Here8217;s a starting list:
1 —Check if the content order is logical.
The content flow must make sense for screen readers. We can’t just code with accessibility in mind, but also design with accessibility in mind.
2— Test the product with a screen reader.
“But how can I check if everything makes sense for screen readers?”, you may ask. Type
Command + F5 to activate VoiceOver if you’re on a Mac. Download NVDA for free if you are on Windows. You can also activate VoiceOver on iOS and TalkBack on Android, here’s how to do it.
3 — Structure HTML markup correctly.
Without entering the question if UX designers must know how to code or not, it’s important to understand the hierarchy of data within the web to design for the web. Good semantics and hierarchy allow assistive technology to read the content properly (also good for SEO), which results in a better experience.
5 — Navigate using only the keyboard.
This is a simple test to check if all the interactions are possible for keyboard-only users. A common problem: actions that appear just on hover.
“If a keyboard-only user cannot see that a button exists on a page, how can we expect them to navigate to the empty space where it will ultimately appear?” — Jesse Hausler
6—Include skip links.
Skip links at the beggining of a page allow screen readers and keyboard users to skip to the main content without going through all the other stuff every time. Here’s one simple way to do it.
7 — Include image descriptions
We can use the alt tag and the descriptions don’t need to start with “picture/image of…”, because screen readers already do that.
Users were asked for the most common problems they experience and the answers were about inaccessible content using Flash, using CAPTCHAs, links or buttons that don’t make sense (probably because they don’t use correct markup) and images with missing or improper descriptions:
8—Simulate color blindness conditions
NoCoffee can simulate vision conditions. Accessible Colors is a great free tool to check if the color contrast passes the WCAG 2.0 guidelines for contrast accessibility. Many people can’t differentiate red and green, for example — the most used colors to inform error and success, or loss and victory. Let’s not rely on colors alone, but also use correct markup, icons and text to create context.