WCAG 2.1 is a blessing for creating accessible experiences. Yet a lot of the guidelines seem focused on development. Sadly, this leads many designers and content strategists to assume that accessibility is a developer’s job – when in reality, everyone has a role to play.
Accessible content and design are just as important as accessible development. To that end, here are 10 ways that you (yes, you!) can get started. You can improve the accessibility of your products and services through content and design.
Layers of Accessibility
First, let’s take a quick look at what WCAG 2.1 identifies as important for accessibility. The WCAG guidelines are broken into four sections, or “layers”.
Perceivable
The first layer is perceivable. This is one area where designers and content creators have a lot of say. Within “perceivable” WCAG has guidelines in four sub-sections. Here are the four sub-sections of perceivable design.
- Text Alternatives mean adding captions, alt-tags, and other things screen readers can read to explain images.
- Time-based Media recommends adding descriptions, audio descriptions, sign language, and other options for pre-recorded videos and audio clips.
- Adaptable refers to creating content that can work regardless of the visual presentation.
- Distinguishable means designing the page to be able to recognize elements on the page and tell them apart from one another.
Operable
Most elements of operability come down to development work. But there are design factors! This is particularly true in how navigation is created. Here are the five sub-sections of operability.
- Keyboard Accessible means that all functionality can work with a keyboard (instead of requiring a mouse).
- Enough Time ensures time limits, automatic scrolling, and similar elements can be turned off.
- Seizures and Physical Reactions refers to blinking, moving, and animated things that someone might need to turn off, to prevent a seizure.
- Navigable speaks to breadcrumbs, links, and other context clues to help the user navigate or find where they are.
- Input Modalities is the opposite of keyboard accessible. This means all functionality can work without the use of a keyboard.
Understandable
Understandable design is a combination of well-written and well-developed content. Several of our ten ways to get involved come from these sub-sections.
- Readable means the page is not too technical or complicated.
- Predictable means the UI is consistent and aligns with user’s mental models.
- Input Assistance refers to error messages, help text, and other ways to help users avoid or recover from mistakes.
Robust
Lastly, robust guidelines have only one sub-section. We won’t spend much time on it, as it’s intended for developers. To be robust, a product or service must be compatible.
- Compatible. This means the product or service can be used with assistive technologies and other, similar tools.
10 Elements of Accessible Content and Design
With all those layers, where do content and design come into play? Here are the top 10 ways a designer, strategist, or content creator can ensure they are aligning with accessibility guidelines. Each is framed as a question. To be accessible, the answer should be YES!
- Do you have alt-text for images? (Perceivable – text alternatives.)
- Do videos and images have captions? (Perceivable – text alternatives.)
- Does the content work regardless of formatting? (Perceivable – adaptable.)
- Are the colors high contrast? (Perceivable – distinguishable.)
- Is text an appropriate size and font? (Perceivable – distinguishable.)
- Are you using more than just color to convey information? (Perceivable – distinguishable.)
- Do your links make sense independent of context? (Operable – navigable.)
- What’s the readability level? (Understandable – readable.)
- Is the navigation consistent? (Understandable – predictable.)
- Are error messages clear and helpful?(Understandable – input assistance.)
Making Design and Content Accessible
Accessible products and services are better for everyone. And there’s room for everyone!. Looking for a way to get started? Just try out these 10 steps to begin.