What is accessibility?

First, let’s dispel the myth that accessible design only benefits a marginal group of people. While the common notion of a “disabled person” is that of a blind man using a white cane to get around, or a paraplegic person in a wheel chair, this is a rather limited view.

Accessibility is a question: Can I use this?

“Touch” example from Microsoft’s Inclusive Design 101 toolkit (PDF)

Inaccessibility is a problem that harms us all, and accessibility is a solution that benefits everyone. Consider an entranceway. A heavy door can impair accessibility to the physically disabled, children, seniors, or someone carrying their groceries home. This last case is referred to as a situational disability, and they’re an unexpected use case that benefits from accessible design in a way that they would have never thought to ask for.

The case for accessibility.

For those with visual or hearing impairments, motor issues, or cognitive issues, addressing this question is essential.

Designing with constraints in mind, however, offers a hidden benefit. For example, closed captioning on videos was created for the hard of hearing, but also affords the hearing the ability to understand the content in noisy conditions, and affords children learning opportunities for reading.

By designing for accessibility, we improve the experience for everyone, and unlock methods of use that we may never have considered otherwise.

Accessibility on the web.

Visual.

Those with blindness, low vision, or just away from their phone.

Auditory.

Those who are deaf, hard of hearing, or in a noisy place.

Motor.

Those with carpal tunnel syndrome, children, or someone with their hands full.

Cognitive.

Those with autism, ADHD, or someone who's distracted.

Visual

To remove the reliance on sight, a page's meaning and message must be understood without its visual elements, such as pictures, colors, or shapes.

Semantic tags

This is done using special tags and landmarks, that designate special meaning to certain texts. An example of this is a heading, which demarkates sections on content on the page. Tagging the headers as different from the rest of the text allows computers, such as screenreaders and search engines, to skip to sections or create a preview table of contents automatically.

Alt text on images

For images, special captions need to be provided. This allows a computer to describe an image, which benefits visually impaired users as well as search engines and those with poor network connection.

High contrast colours

Colors are useful to organize informations, but they must be high contrast, so they are easy to distinguish from the page background. They must also not be the only means of getting this information.

Auditory

Subtitles and proper captioning on videos is essential to ensure they are accessible. Additionally, transcripts should be provided where possible. They have the added benefit of allowing people to scan the content more quickly, and allowing search engines to index the video.

Motor

Large touch targets

Some users have difficulty clicking or tapping on small targets. On mobile devices they may find it hard to keep a steady hand and may tap accidentally. The best thing to do is to provide large touch targets, with extra safe space around them that will not react to taps.

Cognitive

Concentration, memory, and sensory sensitivity

Cognitive accessibility is harder to accommodate for, and is much harder to see. A user with cognitive impairments may have difficulty concentrating, focusing, or remembering previous information. They may also be distracted by motion, animations, flashing colours, or sounds.

Break up chunks of text, use simple language, and provide context

Accommodating for cognitive impairments involves breaking up large chunks of text, using simple language and providing context where needed. It is also important not to have flashing colours, to not autoplay videos, and to allow the user to disable motion and animations.

Test Readability

Conclusion

Accessibility on the web means supporting your users, whatever their needs may be. It means accurate captioning on videos for those who wish to experience your site without hearing. It means strong colour contrast and scalable font sizes for those who wish to experience your site without squinting. It means text description of images for those who wish to experience your site without them. It means simpler language and smaller chunks of text for those who wish to use less concentration. It means providing context for those who won’t remember.