Design
Overview
This article is sectioned by design for each type of impairment, including visual, motor, and cognitive, learning, and neurological impairments. Much of this content has been derived from general design practice, but I believe is still profoundly relevant to web accessibility.
Visual impairments
Visual headings
While native HTML heading elements are pre-formatted in most browsers, it is not uncommon for developers to apply custom CSS styles to headings. When styling anything on the page, be sure to develop and retain a clear hierarchy of information, so that even a partially-blind user could still distinguish between sections of content.
Ideally, you would use multiple methods of developing a hierarchy. Here are a few tools at your disposal:
- Font family
- Font size
- Font weight
- Text decoration (underline, strikethrough, etc.)
- Font color / background color
- Proximity and white space
- Animation
Color and value
The WCAG (or Web Content Accessibility Guidelines) provides specific standards for color and value contrast minimums. Many accessibility checkers will automatically scan for less-than-ideal contrast, though it's good practice to incorporate contrast throughout development.
Resources | Here are a few free contrast checkers:
True text
In certain instances, you may be inclined to use text in an image, such as a diagram. While it may be substantially easier and quicker to screenshot a diagram and pop it into a page, this technique disallows visually-impaired users from engaging with the image's content.
If you are able, try to recreate graphics or diagrams using HTML and CSS, so that screen readers can perceive and read out the content.
Note | If your image is purely decorational, it is not necessary to build it out in HTML and CSS and can even be given a null alt attribute, such as:
<img src="#" alt="">
Seizure-inducing content
The following is a few recommendations to accommodate those who are prone to seizures:
- Avoid the color red for all flashing content.
- Avoid high-contrast flashing.
- Avoid flashing content more than 2 times per second.
Self-explanatory links
Use descriptive language for <a> tags, as assistive technology (like a screen reader) indexes a full list of all the links on a page. If a user were to skim through the links only, they should still be able to understand what each is for.
Caution | Avoid using phrases like "Click here" or "Press me" inside anchor elements. Assistive technology will attempt to index all links on a page, and if the anchor tags are not inherently meaningful, users can easily become confused which links relate to which content.
Motor impairments
Tap targets
For both mobile users and motor-impaired users, large tap targets are the way to go. Even if your visual indication is small, be sure to enlarge your tap target to at least 44x44 pixels.
Cognitive, learning, and neurological impairments
Language
Here are a few tips for developing accessible language:
- Don't use dashes. Instead of 3-6, write 3 to 6.
- Expand abbreviations. Instead of Jan, write January.
- Expand acronyms at least once. Instead of HTML in the first instance, write Hypertext Markup Language.
Line length
An accessibility affordance that benefits all users is intentionality behind line length. Lines longer than 75 characters are challenging to read and can easily become muddled, even for abled users. Consider setting a max-width on your <article> content that limits each line to around 65 characters.
Resources | Design