The Do’s and Don’ts of Accessibility and Inclusive Design: Aging

One avenue of potential primary disabilities is open to all of us: If we are lucky to live long enough, we will all have to come to grips with aging. Aging is, at least at the time of this writing, an inevitable part of life that will cause all of us to deal with issues related to sight, hearing, cognition, and mobility. There is also the distinct possibility of dealing with all of them at the same time.

A large percentage of Baby Boomers are in retirement or will be in the next few years, and the first denizens of Generation X will be reaching this milestone in less than 15 years. Put plainly, a large number of active digital users will soon find interacting with their devices more challenging, if they are not already having issues.

Common Aging-Related Issues

There is a significant overlap between aging populations’ issues and the areas of primary disability we have already discussed in this series.

• Vision: Along with a need for reading glasses for many around age 45 due to diminishing near vision, most aging people deal with reduced ability to determine contrast and distinguish colors.
• Mobility: Common issues such as arthritis and other physical conditions, such as Parkinson’s disease, can diminish the ability to perform tasks requiring fine motor control, which makes targeted movements toward small elements difficult, if not impossible.
• Hearing: Age-related hearing loss often entails a loss of perception of higher frequencies, along with losing the ability to hear midrange and lower frequency sounds at lower decibel levels. Conditions such as tinnitus and Meniere’s disease also are more common with older people.
• Cognition: In addition to the prevalence of conditions such as Alzheimer’s disease being age-related, general cognitive functions in aging people often involve diminished short-term memory, distractions, and difficulty focusing on complex tasks.

In my view, the size and makeup of the overall population entering their later years makes for a compelling case to help design products that are easier to interact with.

Making Sites Usable for Aging Populations

Below are a few suggestions, many of which do not require assistive technology — a primary goal of inclusive design. The previous entries in this series focused on each of the individual areas of primary disability and specific areas we can design and test for. All of those approaches are still relevant, as well as a few additional areas:

Make resizing text easy

In order to meet WCAG 2.0 guidelines for text sizing (1.4.4: Resize text, Level AA), with the exception of captions and images that contain text, users should be able to resize text up to 200 percent without loss of content or functionality. That means that, outside of a need for any assistive technology, the page, widget or application I create should be able to double the text size used and allow for the content and the container to resize without any issues to readability or usability.

Make design choices that allow text to scale easily, such as avoiding the use of definite pixel sizes. If I look at pages with the zoom option enabled, I should be able to see that the text scales uniformly and that the spacing and organization of other content on the page remains consistent.

Provide the ability to increase line space and paragraph space

For many people, staring at a wall of text is both intimidating and frustrating. By increasing the line height, content is easier to read.

Use paragraph spacing that is one and a half times the line height and make paragraphs proportionally separated. In order to retain the separation of paragraphs, the space between paragraphs should also increase so that it is at least one and a half times as distant as the line spacing.

By creating an alternating style sheet, with a click of a button, text can be displayed in its normal mode and in this more greatly spaced option.

Use more than color to express meaning

Red means stop, green means go and yellow means caution — at least if you are in the U.S. and familiar with a typical stoplight. However, as many people age, their color perception diminishes.

If I want to ensure that my message is getting across, I should design my system to also include a clear indication of what those colors are trying to convey. If I intend for green to mean that a condition has passed or we are in a good state, using the words “pass” or “good” will help make that meaning easier for everyone to interpret.

Make link text explicit

Because links will be accessed in a variety of ways, with both assistive technology and keyboard interaction, it helps greatly to make link text as explicit as possible pertaining to what the link is and where it will take you. In navigation bars, brevity may be essential, but in the content of a page, if a link will take the user to a specific location for a specific purpose, spelling out that specific purpose will be much more helpful than a generic link text that says only “Click here.”

An easy automation win is to look for the text “Click here” on any page and determine whether there is more than one instance of the phrase. Even if there is just one, there should probably be a conversation about how to make the link text more explicit to avoid confusion.

Opportunities for Automation

There are a variety of areas where both the developer and tester can use automation to test these features.

Search for additional label text with colors

If my interface is displaying a shaded area to draw attention to information, there needs to also be text that helps me understand what the color is doing.

In the case of creating icons, searching for a particular class with a color value should also include searching for a specific label or include text that will make sense with that color. Creating a round circle filled with red for the purpose of indicating that something is wrong should also contain a text string that says “Fail” or at least an equivalent to help make sure the meaning of the circle is clear.

Have a button that loads alternative style sheets

As in the example above for increasing the line and paragraph spacing, it’s possible to include a toggling option so that when the page is loaded, I can confirm that the page is displaying the normal layout or the layout with enlarged line spacing and paragraph spacing.

Place controls to incrementally increase text size

Either thorough running JavaScript to change values dynamically or by calling on a different style sheet for a variety of font sizes, I can change the size of the text and verify that the size change has occurred by looking for the percentage of text increase, or whichever method of resizing I’ve chosen to use.

While this technique will help me determine whether the size of the font has increased and by what specific amount, it may not be able to determine if the content is displaying correctly. An image capture and comparison tool could be used to help validate the page layout.

Conclusion

Aging almost inevitably comes with certain infirmities and issues. Consequently, software that is easy to use today may be unbearable for the same users in a few short years.

By designing our software up front to take into consideration the issues people face when they age, we effectively future-proof our software and help ensure that it will be responsive to us and easy to use well into the times to come.