Accessibility checklist to design products that people will love… and use
Part 2 (see Part 1)
Accessibility is a broad topic. To see how broad it is, it’s enough to look at the WCAG (web accessibility standards) site. There are tons of confusing rules and recommendations (and they’re only for the web)!
Optimizing a product for accessibility is difficult, especially because you can’t simply make your UI accessible for only one disability type and neglect the others. For example, let’s say you’ve designed voice messaging functionality so people with visual disabilities could write and send messages without any problems. But if your product offers only one “voice” option to send text, people with auditory or speech disabilities won’t be able to use it.
Animated landing pages can attract some people, but they can also cause nausea, dizziness, and headaches in other people and push them away forever.
Different people may have different challenges with functionality depending on the disability they have. Let’s dive deeper to see how we can improve our user interfaces for all such cases.
Wonder why you should build accessible products in the first place? Check out this article →
What types of disabilities are there?
According to WCAG, our users may have the following types of disabilities: auditory, cognitive, learning, and neurological, physical, speech, and visual. Now let’s see and what we should do about it:
Auditory
People with auditory disabilities have any type of hearing loss and can’t hear sounds the same way as people without this disability.
Accessibility checklist:
- Make captions or transcripts available for audio and video content with the possibility to adjust the text size and colors for captions
- Add options to stop, pause, and adjust the volume
- Provide alternatives to voice-only interactions
- Add sign language to supplement important information and text that is difficult to read.
Cognitive, learning, and neurological
A person with cognitive disabilities has difficulties with mental tasks and abilities to learn.
Accessibility checklist:
- Make sure the navigation is easy, layouts of pages and sentences are well structured. Avoid unusual words
- Create consistent labels of forms, buttons, and other content parts
- Ensure the most common functionality works in a predictable way. For example, the radio button assumes the choice of 1 option (not 2 or more), scroll works vertically (not horizontally)
- Avoid long passages of the text without images, graphs, or other illustrations to highlight the context
- Provide the possibility to turn off moving, blinking, flickering content, background audio, and animations. For example, in Apple system accessibility preferences there is an option to reduce motion:
Physical
Physical disabilities may affect temporarily or permanently people’s ability to move. These disabilities can be caused by genetic disorders, serious illnesses, or injuries.
Accessibility checklist:
- Provide full keyboard support
- Make sure the time limits are sufficient to read and understand the content. For example, if the information is shown in a tooltip or popup which has to disappear after some time, make sure the time before it disappears is long enough
- Add text alternatives (text under <alt> tag) for images and controls. Text alternatives work as labels and make keyboard and voice navigation easier
- Implement voice recognition, eye tracking, and other approaches for hands-free interactions.
Speech
People with speech disabilities have any type of speech disorder, where speech is disrupted.
Accessibility checklist:
- Provide alternatives to voice-only interactions
- Make sure there are multiple methods of communication listed in the contact information of your site (not just a phone number).
Visual
People with visual disabilities have a decreased ability to see. This group also includes users who can’t see well enough and don’t have access to glasses or contact lenses either temporarily or permanently.
Accessibility checklist:
- Provide full keyboard support
- Add text alternatives (text under <alt> tag) for images and controls. Just as for people with physical disabilities, alt text can be used in voice navigation and will be read aloud via VoiceOver software
- Make sure text size and images can be enlarged or reduced in size using system capabilities and/or сonsider this possibility in the settings of your product
- Create predictable navigation, clear title
- Add sufficient contrast
- Foresee customizing settings for fonts, colors, and spacing
- Listen to the voice-over while testing your product (you can turn it on in browsers and operating systems), make sure it is understandable and logical.
We can’t anticipate which disability a person who uses our product may have, but we can get prepared for the majority of possible difficulties in usage to make sure our product is accessible to everyone.
Below is a list of common design elements with recommendations on how to make them accessible to the majority of users.
A checklist of accessible design elements
Forms
Input fields, checkboxes, and radios are some of the most common elements in user interfaces. They are the main controls users need to interact with a product. Be very careful while designing such components.
- Add clear label to every control
- Provide distinct differences between normal, hover, or focus states, check the contrast.
- Add an asterisk if the field is required (it is possible to add a markup to the form field to instruct screen readers to say the word “required” whenever they encounter an asterisk next to the field label).
- Use standard visual representations for checkboxes and radios. Checkboxes are never round, radio buttons are never square.
- Ensure that validation includes:
- Descriptive instructions and suggestions for correction
- Opportunity to review, correct, or reverse submissions
- An icon along with an error message text
Buttons & Links
These are 2 different elements. Pay attention to that while thinking about user interactions.
There are many examples where a link is styled as a button and vise versa. A button triggers interactions on the same page, while a link is a navigation element, which leads to a different page or section and has a contextual menu. That’s why these 2 elements should not be treated and displayed the same way.
- Be aware of the difference between buttons and links.
A link uses an anchor element <a>, while a button uses <button> type or role.
While some of your users most probably won’t notice that difference, it will create confusion for the users listening to voice-over and using a keyboard. They will have a different expectation of how it should behave and how to interact with it.
Because a button has a strong visual appearance and a link doesn’t, a hand pointer should be applied only to links (Microsoft Design Guidance, W3C User Interface guidelines, Apple’s Human Interface Guidelines):
2. Ensure elements have proper size and space between them.
Interaction elements can be activated by touch. The small size of a target requires more precision, and the lack of space can cause errors (because fingers can overlap the neighboring links or buttons). Microsoft recommends the spacing to be at least 8 pixels, Google says we need to keep 32 pixels space between elements.
- Android’s Material Design principles recommend that touch targets should be at least 48 x 48
- Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 x 44
- An MIT Touch Lab study of Human Fingertips found that the average width of the index finger is 1.6 to 2 cm (16–20 mm) for most adults. This converts to 45–57 pixels, which is wider than what most mobile guidelines suggest
- The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels
Text
We can’t imagine an interface without text. Text is the most important part of accessibility design.
- Adhere title & headings hierarchy
Every page should have its title, all other headings should be placed hierarchically. This will allow people who use screen readers to jump between different page sections.
2. Provide a readable text size
If your text is smaller than 16px, it becomes difficult to read it on any device. Important information should be 16px at least, less important information can be 14 or 13px. The line-height should be at least 1.5 times the font size.
3. Ensure text resizing works. There are 4 main types of resizing:
- Text size settings (in browser / mobile settings). If the default font-family for Apple devices is SF, the text will resize automatically
- Text-only zoom (some browsers have “Text Zoom Only” functionality, and many browser extensions can also provide it)
- Page zoom (Cntl+ / Cntl-)
- Screen magnifying software
The intention here is to provide readability without usability issues when users resize text up to at least 200% or change text spacing.
4. Provide definitions for any unusual words, phrases, idioms, and abbreviations
5. Avoid long sentences. The ideal sentence length is between 45 and 75 characters.
Images
Images, illustrations, and icons provide additional context and entertain the user. They can also be used as instructions and supplement “help” information.
- Add <Alt> text for meaningful images/icons.
Alternative text is very important for people with physical and visual disabilities, as I’ve already mentioned, but not only them. Some users may have the images turned off or these images may not be displayed properly because of slow internet connection.
When you’re writing alt text, make sure you don’t just describe what the image looks like, but add context to it. For example, alt text for maps should describe the address, not the word “map”).
See the rules for compliant alt text.
For images that have only decorative purposes, alt text is not needed.
<Alt> text could also be provided for images, which were uploaded by the user itself. Twitter has the “ALT” tab to make users add description information about the image they uploaded. The same does Medium.
Colors
Contrast ratio is very important for any kind of visual disability. And there are plenty of articles that explain how to work with it. I want to point out only 1 rule that is hugely important:
- Provide sufficient contrast
The contrast between text and background should be sufficient enough to be readable for people with visual disabilities. Keep in mind that you need to make your content readable even after possible color adjustments using system preferences in operating systems or browsers. MacOS, iOS, and Android allow changing all the colors to grayscale. Windows offers more color customization options.
Below is how the contract can be adjusted in the system accessibility preferences on MacOs.
WCAG requires “at least 4.5:1” contrast.
Try this tool to check the contrast for your UIs.
System
What do we need to implement on a system level to make our products accessible?
- Implement “Undo” functionality
Users can accidentally activate some unwanted functionality and need to be able to “undo” it.
2. Provide sufficient time limits
This functionality is especially important for people with physical disabilities but can be critical for everyone. Systems can require re-authentication after some period of time due to security reasons. In this case, you should offer a possibility to re-authenticate without losing the data.
3. Ensure a basic layout is logical and well structured
Page layout is easy to check just by turning off the CSS styles. The content should still be readable and well-structured.
4. Add help information for complex functionality
5. Provide alternatives for voice recognition functionality
6. Support voice-over functionality which is provided by browsers and operating systems. To optimize this function, match labels presented to users with object names in the code.
7. Provide full keyboard support
The keyboard is one of the most important elements that must be optimized for accessibility and among the most overlooked ones.
- Ensure all functionality that is available via a mouse is also available via the keyboard (including “Drag & Drop”)
- Add a keyboard focus state with a minimum contrast ratio of 4.5:1 of the background-color
- Ensure, the key combination is activated sequentially instead of simultaneously
Notion shows the keyboard combinations for most common actions, Typeform gives the opportunity to use the keyboard while answering a survey.
Animation
Be very careful when implementing animations. While ignoring all other principles listed above may cause the inability to use the content, this one can actually be harmful to people.
- Provide users with options to control the animation.
Parallax or motion effects, blinking cursors are pure evil can cause seizures, feel dizzy, vertigo, and other vestibular disorders. Besides, it can be hard to focus on 1 area on the screen, because animations steal people’s attention.
There should be a possibility to turn off all the animations if possible.
If there is no way to turn off blinking animations, use frequencies that are less than 2Hz or greater than 55Hz.
Multimedia
- Provide alternatives to video and audio content.
Add captions and text transcripts. Text size and colors of the caption should be adjustable like any other text. Provide the options to stop, pause, and adjust the volume.
Conclusion
Every product designer has to pay special attention to rules, principles, and recommendations to make their interface design accessible. Only this way we can make successful products people will love and use.
Knowing and understanding how a product should work eventually, what parts of it should be improved, and advocating accessibility approaches in the product team is one of the main characteristics of great product design.
Useful Links
- All resources: https://a11yresources.webflow.io/
- Accessibility for vestibular disorders: https://alistapart.com/article/accessibility-for-vestibular/
- Accessibility for everyone: https://abookapart.com/products/accessibility-for-everyone
- Inclusive design principles: https://inclusivedesignprinciples.org/#offer-choice
- Web content accessibility guidelines: https://www.w3.org/TR/WCAG21/
- Easy checks: https://www.w3.org/WAI/test-evaluate/preliminary/
- Microsoft Inclusive Design: https://www.microsoft.com/design/inclusive/
