ALLY: UI Accessibility Checklist for Designers
✅ Designing digital products that are accessible to everyone is crucial. By making our designs accessible, we are creating a more inclusive world. Here are tips and actions to keep in mind while designing for accessibility:
Assistive Technology:
Assistive technology is devices like hearing aids, magnification tools, and screen readers that help enhance, maintain, or improve the functional abilities of people with disabilities.
Screen Readers:
Screen readers accessibility software, such as Google’s TalkBack on Android, Apple’s VoiceOver on iOS, and Freedom Scientific’s JAWS on desktop. Screen readers read aloud the on-screen text and elements (such as buttons), including visible and nonvisible alternative text.
Text and Typography:
- The visual presentation of text and images of text has a sufficient contrast ratio of at least 4.5:1 (Level AA)
- Use fonts that are easy to read, and avoid decorative or cursive fonts.
- Avoid using all caps as it makes text harder to read for people with dyslexia.
- Use appropriate font size and line spacing to improve readability.
- Avoid using colour alone to convey meaning.
Color:
- Do not rely on colour as the sole method of conveying information.
- Ensure that there is enough contrast between text and background colours. Here is a helpful tool: https://webaim.org/resources/contrastchecker/
- Test your design using colour blindness simulators to ensure it is accessible to people with colour blindness.
Navigation:
- Ensure that the navigation is easy to use and intuitive. You should have focus order (more about it here) where focusable components (controls, input fields, buttons, links) receive focus in an order that ensures meaning and operability.
- For example, when the user clicks on the search bar — it enters a focused (state). The input field receives what they enter on the keyboard and displays the characters you type. You should enable the same interaction for keyboard users.
- Use clear and descriptive labels for all links and buttons.
- Provide keyboard shortcuts and support for screen readers.
- Use descriptive alt text for all images and non-text content.
Forms:
- Use clear and concise labels for all form fields.
- Use proper input types for form fields (e.g., email, phone, etc.).
- Use proper error messages and provide clear feedback on form submission using colour, font weight, or text underlining.
- Ensure the form is easily navigable and can be filled out using keyboard-only navigation.
- Design focus states that have contrasting areas with a minimum of 3:1 contrast ratio. That is called a contrasting area (see below).
Multimedia:
- Provide transcripts or captions for all audio and video content.
- Ensure that audio and video controls are accessible and easy to use.
- Provide alternative formats for multimedia content (e.g., audio description for video content).
- For Devs: use aria-labels and Alt tags for images and multimedia to describe what they are. Depending on semantics, this will ensure screen readers don’t skip them.
- Alt text translates a visual UI into a text-based UI. Alt text is a short label (up to 125 characters) in the code that describes an image for users who cannot see them.
Mobile Optimization:
- Ensure that the design is optimized for mobile devices.
- Use responsive design to ensure that the layout adapts to different screen sizes.
- Ensure that touch targets are large enough to be easily activated. The area should be at least 44x44 pixels and 48x48dp for Android. More details here
Conclusion
Designing with accessibility in mind is not an easy task. Start with empathy — consider the edge cases and recognize different capabilities to use your product. This checklist is not an exhaustive list of Accessibility standards but a starting point, so please check out the links below.
By following this accessibility checklist, you can make their designs more inclusive and accessible to a broader range of users, including those with disabilities. This can improve the user experience for all users and help to create a more inclusive and accessible digital environment.
Further Reading and Resources:
https://m2.material.io/design/usability/accessibility.html
