By John Thompson
To build accessible websites and applications, there are a lot of conformance rules and guidelines to follow. You may learn them faster if you start by gaining empathy for people with disabilities so you can understand why the rules and guidelines were created in the first place.
Spectrum of ability
We all have different abilities and disabilities, some short-term, some long-term. Rachael Scdoris, a legally blind sled dog racer, put it another way, “We are all temporarily abled.”
Some disabilities are permanent, or become permanent as we age or experience an illness. We may be blind or have poor eyesight. We may be deaf or hard of hearing. We may have cognitive or learning disabilities such as Alzheimer’s. We may be dyslexic. We may be wheelchair-bound. We may have photosensitive epilepsy.
Some disabilities are temporary. We may have undergone eye surgery such as LASIK. Our hearing aid might be broken. Our arm or leg might be broken. We may have an ear infection. We may be running on little-to-no sleep.
And some disabilities are situational. We may have protective eyewear on. We may wear gloves as we tap and swipe a screen. We may be distracted while we drive. We may be at a loud venue. We may be overwhelmed with stress.
Empathizing and improving
We may not experience being disabled, but we can at least empathize or at least try to experience the same or similar feeling with one another.
There are a few things you can do right away to understand how to design, develop, understand and plan with accessibility in mind.
- Perceivable: We must be able to see it, hear it and feel it.
- Operable: We must be able to use it.
- Understandable: We must be able to get it.
- Robust: We must be able to access it as technology advances.
Then try simulating how those people with disabilities may experience your website or app:
- Navigate your favorite website only using keyboard.
- Use a screen reader such as VoiceOver for Mac or NVDA for Windows.
- Close your eyes and listen to a video.
- Mute a video or podcast and follow along with the captions or transcript, if available.
- Try reading as if you had dyslexia.
- Simulate colorblindness using Color Oracle or Sim Daltonism.
Familiarize yourself with the business case, legal matters and statistics:
Companies usually lose accessibility lawsuits when all they need to do is demonstrate efforts toward making their website accessible.
According to a study on good fonts for dyslexia, about 10-17.5 percent of people in the U.S. and 8.6-11 percent of those who are Spanish-speaking have dyslexia.
The Vestibular Disorders Association reports as many as 35 percent of Americans aged 60-plus have experienced a vestibular disorder.
Also from the Census Bureau: Users in the U.S. with disabilities have a discretionary income of $247 billion.
Once you’re ready to take steps toward improving accessibility in your websites and apps, try some of the following steps.
If you’re a content strategist or writer:
Be consistent in page layout and writing style. Section headings should be organized like a table of contents.
Write clear, descriptive link and button text.
Add appropriate alt text for meaningful, non-decorative images.
Add transcripts for audio and video content. Microsoft Inclusive Design shows some great examples of accessible videos.
If you’re a designer:
Never rely on color alone to convey meaning.
Check color contrast before deciding on a palette. Evaluate brand colors and text styles and decide whether a separate web accessible palette and font set is needed. Try Color Safe and Accessible-colors.com.
Never rely on mouse, keyboard or speech alone for interactions and user input. Design alternatives to drag and drop.
Include or start with a content outline when designing web pages and app screens.
Make text bigger, such as 16-20 pixels for body copy with a minimum of 14 pixels. WCAG 2.0 success criteria 1.4.3 defines “large text” as 18 or 14 points and bold, but modern websites and applications more often use 16 pixels as a base font size. Medium even sets their body copy size at 21 pixels.
Design focus, hover and active states for buttons, links and navigation.
When designing for mobile, follow Apple iOS and Google Material Design human interface guidelines, and try to stick to native components and conventions.
Collaborate with frontend developers and quality assurance (QA) engineers to ensure your designs are implemented with accessibility in mind.
Avoid hiding important content inside tabs, modals, tooltips and other components. Keep it simple and show it.
If you’re a developer:
Ensure the code is semantic with a logical flow.
Use native elements as much as possible.
Do not remove CSS focus state outlines.
Learn when and how to use ARIA.
Work with your designers!
If you’re a quality assurance (QA) engineer:
Tab through the site to make sure focus is always visible and follows a logical path without skipping any interactive elements.
Try to use the site with a free screen reader like VoiceOver or NVDA. Listen to how the screen reader describes images, headings, buttons and other elements.
If you’re testing a native app, read through these mobile accessibility suggestions from W3C.
First know the scope in which to think about accessibility, who it affects and how. Consider how users who are permanently, temporarily or situationally disabled experience what you are creating and learn new ways to include accessibility as part of your process.
A more accessible product for one group of people improves that experience for everyone else. Accessibility is more than designing and developing for people with disabilities — it’s about building things that everyone can use and enjoy.
Want to learn more about accessibility?
See Google’s Material Design accessibility guidelines for a quick overview.
Learn more about color contrast methods.
Study the Conscious Style Guide for writing sensitive language.
Check out more stats from the U.S. Census Bureau.
Published on 08.22.17