It is about designing and building digital products so that, regardless of a person’s disability, they can still interact with the product in a meaningful and equivalent way.
Visual
Screen reader, magnification
Mobility (cannot use mouse)
speech input
Hearing
Captions and transcripts of media
Cognitive (Difficult focussing)
Screen readers, text highlighting
Seizure and vestibular disorders (difficulty with motion)
Perceivable: information conveyed to multiple senses
Operable: The interface cannot require interaction that a user cannot perform.
Understandable: Content should be clearly written
Robust: focuses on supporting assistive technologies/multiple devices
Tools
Lighthouse
Internationalization (i18n)
Intl namespace provided in browser which has utility functions for language sensitive string comparison, number formatting, and date and time formatting
Don’t use images which has text in them since you then need to support multiple images with different languages.
Instead, separate the text and the image, and use CSS to overlay the text on the image.
If you’re using a web font, make sure it has a range of characters broad enough to cover the languages you’ll be translating into
In chrome rendering tab we can emulate different vision deficiencies
It’s not a good idea to rely purely on color to differentiate between different elements.
For example if you have a chart with legend on colors, consider using pattern, icon, text as well to make it more accessible
You can make your links a different color to the surrounding text. But you should also apply some other styling indicator like underlining the links or making them bold.
Contrast
If there isn’t enough contrast between the foreground color and background color, text becomes difficult to read.
It’s a good idea to always declare color and background-color together in your CSS.
body { color: black; background-color: white; }
Don’t assume that the background color will be the browser default.
High Contrast: For Detecting High Contrast OS setting, we can use prefers-contrast media query which has values:
no-preference
less
more
Inverted Colors: Check manually if website makes sense if colors are inverted from OS settings
Choose commonly used font instead of custom/handwritten fonts
Choose font which has less confusion among pairs:
b, d
p, q
f, t
i, j
m, w
n, u
I, l, 1 (India, Lettuce, 1)
Font Size
People increase the font size as they age
Use relative size for fonts
Avoid using units like px. Use relative units like rem or ch instead
Someone visiting your website on a desktop computer with their font size bumped up to 400% should get the same layout as someone visiting your site on a small-screen device
Links styled with the :hover and :focus pseudo-classes will display those styles regardless of whether someone is using a mouse, a trackpad, or a keyboard.
Use the :focus-visible pseudo-class to style your links for just keyboard navigation.
Focus Order
Test your webpage using tab key on keyboard
Focus order in webpage includes naturally focusable HTML elements like links, checkboxes and text inputs
Don’t set tabIndex property on HTML elements with value 1 or greater
tabIndex=1 or greater defines an explicit tab or keyboard navigation order. (MUST BE AVOIDED). It causes the keyboard navigation to jump first to it.
tabindex="0" allows elements besides links and form elements to receive keyboard focus. If you use this then you must provide additional keyboard support for full accessibility.
tabindex="-1" value removes interactive elements from the default navigation flow. This can be used on inactive/disabled elements
Structure your underlying source code so that the reading/navigation order (via keyboard) is correct.
Skip links
If you have multiple navigation links on the top, it is better to provide skip link as first focus element to help navigation to main quickly
Skip link usually have text: “Skip to main content” and can be hidden until Tab is pressed
Focus should be sufficiently visible with contrast if keyboard navigation is used
a:focus { /* Never make outline: none */ outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */}
Title
It should be accurate, unique, and descriptive, but also concise.
It is also best practice to “front load” the interior page or important content first, since it is read again and again by assistive technologies
In SPAs, navigation is usually done at client side, and the title is not automatically updated, so it is better to update the title manually using javascript
Headings
Use headings like <h1>, <h2>, <h3> … sensibly.
Screen readers use these headings to generate an outline of your document which can be navigated with keyboard shortcuts.
Structure
Use landmark elements like <main>, <nav>, <aside>, <header>, and <footer> to structure your page’s contents.
Screen-reader users can then jump straight to these landmarks.
If the image is purely presentational, you should still include the alt attribute but you can give it an empty value.
<img alt="" src="texture.png">
If the image is complex and needs longer description then you can show the description and link it to image via aria-describedby with id where description is:
<div> <img src="Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug." aria-describedby="description"> <p id="description">In this course, you will learn more about the anatomy of a ladybug, including the head, antenna, eye, pronotum, elytra, leg, abdomen, and wing.</p></div>
The WAI Web site hosts a Forms tutorial to make truly accessible forms
Associate labels: for must match the id of <input> tag
<!-- example 1 separate label and input --><label for="first_name">Your First Name</label><input id="first_name" type="text" name="fname"/><!-- example 2 nesting input inside label with use of span--><label for="first_name"><span lang="en">Your First Name"</span> <input id="first_name" type="text" name="fname"/></label>
textarea is similar:
<label for="address">Enter your address:</label><br><textarea id="address" name="addresstext"></textarea>
fieldset performs grouping and legend describes the group