Website accessibility is crucial to your business. Knowing how to make the easiest changes first will help you get the ball rolling and set you up for success in the future.
When it comes to website accessibility and integrating an ethical design approach into your business, it’s key to start with your view to continuous improvement over instant perfection.
“It’s not about being perfect – it’s about being better. We strive to do the right things for all users, and that’s not something that we’ll universally achieve overnight. It’s an on-going process, that relies on transparent and honest conversations with our clients and stakeholders on how we can incorporate ethical thinking and accessibility into everything we create.” – Anton Morrison, VP Experience Design
The WCAG Accessibility Guidelines are a complex list of around 75 requirements (depending on which accessibility level you want to achieve) that businesses should take to make their web experiences more accessible. Knowing where to begin can be tricky, but this is a key instance of not wanting to let perfection be the enemy of good.
Even adding a single accessibility improvement to your website is better than nothing. Though large businesses will likely have to reach more comprehensive legal requirements when it comes to accessibility, everyone has to start somewhere.
These lists, inspired by Duke University, aren’t exhaustive and won’t satisfy all of your potential legal accessibility requirements. But they’re a solid place for any business, no matter your size, to begin from.
Accessibility actions for content editors
Several of the easiest accessibility fixes can be made by your content editors right from your content management systems (CMS) — no web developer needed!
1. Make sure all images have alternative text
Also known as alt text, alternative text is a requirement for all images and make sure you describe it textually so that accessibility readers can properly and usefully describe all the images on your site for people who are blind or visually impaired. If the image is solely decorative, you still need to have an empty alt attribute (example: alt=””) so the screen reader knows you want it to be ignored.
2. Make sure all data tables have the right header designations
Improperly formatted tables are one of the most common mistakes that trip up screen readers. Whether the table is vertical or horizontal, header cells are needed to describe the corresponding rows or columns that they’re describing. All table cells need to be marked with a scope attribute so screen readers know how to match the right heading to the right data.
3. Make sure all videos have proper closed captioning
Most of us are familiar with video closed captioning. Users who are deaf or hearing-impaired rely on high-quality captioning to get the full experience of your video content. YouTube uses speech recognition to automatically add closed captioning, but these captions often contain flaws and shouldn’t be used without being reviewed by you first. Creating and reviewing your captions should be added as a regular step in your video creation process, the same as adding any other type of written content to your site.
4. Make sure all headers follow a proper hierarchy
All of your heading levels, from H1-H6, should be correctly nested just like a document outline. For example, all H3 headlines would be subsections under an H2 headline – you don’t want any content under an H3 headline that doesn’t have an H2 above it. Maintaining a proper framework for headlines and using it consistently will make sure you’re following the WCAG principle of understandability.
5. Make sure all your link text is completely descriptive
All of the text in your buttons, CTAs and other links should be entirely descriptive, even out of context. Screen readers typically pull all of the links of a page and aggregate them into a list for each navigation. Links like “click here” or “see more” won’t make sense to screen readers – and that means they also won’t make sense to your customers.
Accessibility actions for developers
1. Make sure all links and navigation dropdowns can be used without a mouse
Taking extra steps to ensure that your website can be used with only a keyboard is a frequently overlooked step that fits right into the WCAG principle of operability. Most accessibility software is keyboard-only, so it’s crucial to be aware during testing that you’re checking that all site navigation works with both a mouse and a keyboard.
2. Make sure your site uses ARIA landmarks and other assistive technology indicators where needed
ARIA landmarks are like bookmarks within a page, typically denoted with the “role” attribute (example: role=”navigation”). HTML5 elements like “nav” and “main” are mapped directly to ARIA landmarks, so they can also be used.
3. Make sure your pages have a straightforward document structure that’s readable without a CSS file
Accessibility software mostly uses only the underlying HTML documents to present content to your users. The content, as seen in the HTML code itself, must be arranged logically and free of errors that might be passed over by a regular browser but that could cause failures in accessibility software.
4. Make sure a “skip to main content” link is present before navigation when tabbing
As sites can become increasingly complicated, dropdown menu navigation menus can easily include dozens of links. A “skip to content” link is helpful for keyboard users, who otherwise would have to tab through every single link on each individual page before the screen reader will begin reading your content to them.
5. Make sure that large text has a contrast ratio of at least 3:1
Most applicable to headings, bold text that is 19px or larger and standard text 24 px or larger needs at least a 3:1 contrast ratio against the background.
These steps are just the beginning. There are many different ways to make your site more accessible, and many will depend on your unique web presence and the type of customer journey you’re aiming to create. Our digital strategy team can help you see where you stand now with accessibility, and create a strategy to make sure you’re continuously improving in the future.
Share this Blog with colleagues
