Accessibility is a key component of web design, but easy to forget when it’s not at the top of your mind. However, disability and impairment is a fact of life for many of your readers, and it’s just as important to accommodate those individuals online as it is in the real world.
Accessibility for web design focuses on three main areas: compatibility with tools like text-to-speech and magnification readers, usability for the visually or cognitively impaired, and navigability for those with physical disabilities.
1. Use Content Tools with Accessibility Features
Accessible web design gets a lot easier when your tools inherently support its key features. The best content management systems (CMS) have a variety of methods for enabling and encouraging accessible web design, but even systems without those features can become accessible with the right website template on top.
The most helpful systems will prompt you to include components like tags and media descriptions by default, making accessible design a seamless part of your work.
2. Always Use Complete Metadata and Tags
Good metadata and tags succinctly describe the content or media being presented, and that makes it easy for text-to-speech readers and other tools to convey that content to your visitors.
Accordingly, every relevant component of your website should be tagged or described in metadata whenever possible.
3. Use Accessible Text Formatting
When it comes to formatting text for accessibility, the best practices are usually the same ones used to produce high-quality web writing, period.
Making text accessible means clearly structuring all content with headers and subheaders so that your section headlines themselves provide immediate clues about what information is included, and where.
If the content is long, make it easy to navigate with tricks like sub-section and return-to-top links. Even when such links aren’t attention-grabbing for typical visitors, accessibility tools still rely on them to help quickly navigate pages.
4. Maintain Best Practices for Links
To keep links accessible, always embed the link onto a word or phrase that immediately conveys the relevance of the content behind it.
For example, a link on “click here” provides no useful information to readers (or accessibility tools), while a link embedded on “contact us” tells the visitor exactly where it will lead. When in doubt, simply try to embed links on words that are similar to the title of the page being linked to.
5. Avoid Tables and Layout Complexity
Complex layouts are very hard to navigate with accessibility tools, and tables or nested frames are the worst culprits. While a visual reader can quickly click through such elements to find what they’re looking for, text-to-speech and other accessibility tools get easily lost, and you may be requiring such visitors to listen to an audio readout of the entire table’s contents, regardless of what they’re actually looking for.
To stay accessible, avoid tables entirely and always convey information in a clear, linear format where all elements are present in the same primary content field.
6. Enable Keyboard Navigation
Many people struggle to navigate computer screens with a mouse even when they might not otherwise be considered disabled or impaired, so it’s vital your web content can be thoroughly navigated with a keyboard alone.
Today, web browsers usually handle all the shortcuts and tricks used to navigate pages with keyboards, but any element on your page that requires a click to operate is not accessible and should be redesigned to enable keyboard navigation.
7. Make Smart Color Choices
Thoughtless color choices can make it impossible for color-blind readers to view your web page, but even visitors with non-visual impairments like reading difficulty benefit from accessible color design.
You can use tools to compare color contrast for web design, but you don’t necessarily need to completely revamp your color scheme to maintain accessibility. Instead, just make sure every component that relies on color cues also contains an alternative cue, like explanatory text or even a simple asterisk highlight.
8. Keep Inputs and Forms Accessible
Unimpaired readers can usually figure out how to use even the most poorly designed input forms, but accessibility tools won’t.
Ensure every field is properly and accurately named according to what should be entered, and never rely on buttons labeled without text, or with an unreadable symbol or graphical character.
Visual cues like an asterisk to denote required text are vital for the visually impaired, but for other accessibility tools, you may need to rely on ARIA elements instead.
9. Use Best Practices for Dynamic Content and ARIA
ARIA is a suite of design components used to provide more accessible features for any content that can’t be easily tagged or described with displayed text. Common uses for ARIA include dynamic content elements like refreshing headline tickers or auto-played video clips.
Contemporary best practices for ARIA say you shouldn’t use it except when necessary, but the best web design companies will be able to help you figure out when it’s required, and how it can best be implemented.
10. Good UI/UX Is Inherently Accessible
Ultimately, many of the best practices for accessible web design are identical to the best practices for all design, in any capacity. A good UI/UX experience provides a wealth of contextual and inherent clues that let your visitors instantly understand what is being presented, how it can be navigated, and where the key information resides.
Work with your web designer to develop the best page possible, then review it point-by-point to ensure you’ve included all relevant accessibility features.
ABOUT 3 MEDIA WEB
3 Media Web is a Boston area website development company. We partner with companies and agencies to build beautiful, responsive websites. Our web skills run deep. HTML5, CSS3, jQuery, Bootstrap, responsive, WordPress: We speak all those languages. Whatever you’ve got, we can build it. Whether you already know exactly what you want out of your website or you’re just starting a new web project, we’re the web development team you’ve been looking for. Contact us to learn more.