Accessibility is usability for people who interact with products differently. Your role is to help the team approach accessibility as a facet of user experience rather than a checklist of requirements.

Inclusive Design

1. Celebrate accessibility requirements as a set of design constraints that help you create a better product for all users.
2. Gain a basic understanding of the main categories of disabilities, limitations, or constraints that affect how people use digital services –
   • Vision disabilities – such as blindness and low vision, color blindness,
   • Hearing disabilities – such as deafness and low hearing, tinnitus
   • Motor problems – such as hand tremors, physical deformities or amputations
   • Cognitive disorders – such as dyslexia, dementia, or being sleep deprived
3. Understand that almost everyone experiences some type of disability either permanently, temporarily, or situationally. For example: having only one arm is a permanent condition, having an arm in a cast is temporary, and holding a baby in one arm is situational – but in each case you’re restricted to completing tasks with one arm.
4. Look for ways that making your product easier to use for folks with disabilities also improves the experience for everyone.
5. Design for progressive enhancement by making sure every person is able to use your product using the most basic technologies, while layering on better experiences for those who can use them.
6. When conducting user research, make sure the diversity of your participants reflects the diverse abilities, circumstances, and backgrounds of your actual users.

Assistive Technology

1. Some assistive technologies are likely only going to be used by people with specific, long-term disabilities. These include screen readers, switch devices, screen magnifiers, and others. Other kinds of assistive technologies may be more familiar to you and include voice control on your cell phone, ergonomic keyboards, or a browser’s native zoom function. People have different skill levels in how they use these technologies.
2. Take an Accessibility 101 class, such as Web Accessibility class, to get a baseline knowledge of accessibility.
3. Learn how to navigate a webpage using only your keyboard and learn how to use a screen reader, such as VoiceOver on your Mac so you can spot check new features when necessary. This can help you understand the technology itself, but keep in mind that folks who use it every day will often have their own strategies for using these tools.
4. Observe people using assistive technology (AT) on your product or others. In some cases you may be able to find videos demonstrating how people use different strategies to interact with digital products.

Humanize Accessibility

1. Cover accessibility and inclusive design issues when conducting user research. Consider the native language, literacy, digital literacy, and digital access of your users as well as potential visual, hearing, motor, and cognitive disabilities.
2. Incorporate accessibility considerations in your personas, user archetypes, or user stories. This could take the form of swapping out accessibility issues in your personas or creating standalone user stories focused on accessibility.
3. Help your team learn about the experience of using your product with assistive technology. (Keep in mind that the way a person with a disability uses assistive tools may be very different from your experience of the tools.) This could include:
   • Ask each person on your team to turn off their mouse and trackpad and navigate the product using only their keyboard.
   • Under System Preferences > Accessibility > Display, check the grayscale box and explore your site without color to simulate color blindness.
   • Find an appropriate empathy prompt and walk your team through it.
4. When possible, include users with disabilities in user research. During usability testing, make sure to allow them to use their own equipment (which has their own settings already in place).

Tab Order

1. A user should be able to use the tab key to navigate to every interactive element on a page.
2. For links, users should be able to activate them with the enter key.
3. For buttons, users should be able to activate them with either the spacebar or the enter key.
4. Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom. Sometimes a logical order will be obvious to your front end team based on a simple layout, but in more complicated layouts you may need to identify the tab order in your wireframes or mockups.
5. Each interactive element should have a visible focus state, work with your visual designer to make sure you’ve accounted for these.

Focus

1. Work with your front end designer to identify any interactions on the page that require JavaScript or that can’t be created using default HTML elements. You should intentionally design how focus flows through these interactions.

Navigation Shortcuts

1. Work with your front end designer to identify the basic landmark elements in your wireframes, particularly for complex layouts. Landmark elements are identified either through HTML5 semantic markers or through ARIA roles when HTML can’t identify something. You don’t need to be an expert on HTML or ARIA, as long as you know the basics
   • header
   • nav
   • main
   • footer
   • search
   • form
2. Include a “Skip to main content” link before the header for keyboard users. Keyboard users can’t take advantage of landmark navigation so a skip link helps them navigate more quickly. This link can be visually hidden but should become visible when it has focus.

Forms

1. Make sure all inputs have descriptive labels that remain visible even after a field has been filled in.
2. Try to use HTML form elements as much as possible, and test any custom interactions for use with screen readers and keyboard only.
3. Use a straw or make a narrow window with your fist and view the page through that, scanning vertically but not horizontally. This can help you discover if content is hidden from users using screen magnifiers.
4. Minimize the number of responses overall and that are displayed on a single page, but provide context clues throughout for people who might easily lose their place.

Images

1. Images that are purely decorative shouldn’t be announced by the screenreader, work with your front-end developer to make sure they’re coded correctly.
2. Images that have meaning should include alt text and possibly a longer description, work with the content designer on your team to create these.
3. Making sure any text in images of text is at least 14 points and has good contrast.

Touch Targets

1. Make sure you can reach primary actions easily with either right or left thumbs, even on larger phones. Items on the bottom of the screen tend to be easier to reach.
2. Make touch targets at least 44 px or 10 mm. This will allow the target to be tapped by the average adult finger pad, which measures 10 mm. The icons may be smaller and you can work with your developer to extend padding past the icon. Pay particular attention to how line-height affects touch target size.

You can also view our other digital accessibility checklists:

• Web Accessibility Checklist
• iOS Accessibility Guide
• Android Accessibility Guide
• Digital Accessibility Guide for Visual Designers
• Digital Accessibility Guide for Content Designers
• Digital Accessibility Guide for Product Managers
• Digital Accessibility Guide for Front-End Developers

Reference: Accesibility.digital.gov