Here217;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 in mind, but also design with accessibility in mind.

Images from Accessibility Originates With UX: A BBC iPlayer Case Study showing accessibility problems

2Test 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 to design for the . Good semantics and hierarchy allow assistive technology to read the content properly (also good for SEO), which results in a better experience.

Hierarchy of the BBC player content using HTML heading tags
My reaction for “click here” links.

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:

How VoiceReader reads GM’s website — Image from “Mobile And Accessibility: Why You Should Care And What You Can Do About It

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.

On the right, how a color-blind person sees a table that relied only on colors to inform



Source link https://blog..io/8-things-we-can-do-to--web-accessibility-4774cc885b8d?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here