Digital Accessibility 101

Category : Accessibility
Date : May 8, 2023
a11y graphic

What Is It

“A11y” is a shorthand term for “accessibility” and is derived from the 11 characters between “a” and “y” in the word. It represents a global movement to improve web content and computer systems’ accessibility.

Disability Numbers Are Growing

Populations are aging and older people have a higher risk of chronic health conditions.

26% of Adults

The US Identifies as having some disability, not strictly physical. Recent additions include cognitive and even emotional disabilities.

Disability is a Spectrum

We’re all temporarily disabled at one time or another.


  • 1st circle – perfect conditions
  • 2nd circle – acute conditions – glare, noisy, crowded
  • 3rd circle-situational conditions – broken bone, surgery
  • Outside – permanent – blind, deaf, paralysis
Disability Chart Display

Web accessibility Essential for some useful for all

Disabilities can exist on a spectrum and vary in duration from situational, temporary to permanent. They can share common requirements when it comes to digital experiences.

Disability Spectrum Graphic

Equality

Equality Graphic

Recognizing there are differences and assuming everyone will benefit From the same solution

Equity

Equity Graphic

Accommodating the differences and allowing their voice to directly affect the solution

Inclusion

Inclusion Graphic

Looking at the diversity of the experience and how it allows everyone to benefit from it.

The Gray Zone

This is a neutral area that you want to aim to be on a consistent basis, it will allow aesthetics and accessibility to be attainable.

The Gray Zone Spectrum to show ideal accessibility.

Operating In The Gray Zone

General rules make to help guide you maintain Web Content Accessibility Guideline (WCAG) compliance.

Design Focus

Provide good color Contrast (especially with gradients)

Watch the use of ALL CAPS

Use adequate Font Size

Adjust Letter Spacing and Line Height when needed

Make sure Links are recognizable

Add a Hover State to buttons and links

Create Visual Hierarchy

Developer Focus

Use Live Text as often as possible

Use Alt Text for all images or when live text is not available

Use Animation, Motion, and Video carefully

Consider Reading Order

Design a Skip to the main content

Correct Keyboard is activated Keyboard access is supported

Moving The Gray Zone

Keeping the focus on the suggestions mentioned above will help work towards thoughtful accessibility and can move the Gray Zone toward the left.

The Gray Zone moved further to the left for optimal accessibility

Do The Right Thing

Accessibility is a journey and commitment that can take time. Whether you are starting a new venture or working in a large organization integrating good design with accessibility in mind is good for everyone. There are specific laws that are in place that can potentially put an organization or site at risk if not followed but there are tools and additional guidelines to help with compliance.

W3C – WGAG Guidelines

DOJ – Web Accessibility

Color Contrast Checker

@