by Shawn Dryden on June 14, 2021
Accessibility is an important factor in all aspects of life, and websites are no exception. The web has become a fundamental service and making sure everyone can access everything they need online is not only the right thing to do, but legally required. There are federal guidelines such as the Americans with Disabilities Act (ADA) and Section 508 that outline accessibility requirements for websites. In addition, the World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG) for developers to follow. Luckily, by following best practices when building a site, most are fully accessible by default. However, here are some common items that often get overlooked.
Low color contrast
An easy one to overlook and therefore one of the most common issues on websites is low contrast on text and background color combinations. Think about how hard it would be to read white text on a yellow background — while that’s an extreme example, you want to make sure the words on your website are as easy to read as possible. This affects people with color vision deficiencies and low vision, including older users, even more. If you’re considering making a button or link bright red to guarantee it will get noticed, think again. Some users are red/green deficient, thus making the button or link very hard to see if not designed properly.
Poor keyboard access
A common method for navigating a website for many disabled users is through the keyboard, where using a mouse is not an option because of visual or motor impairments. Interactions that only work with a mouse make portions of your site inaccessible and simple things like pop-ups can trap users on pages because they can’t exit using the keyboard. The best way to check your site is to actually navigate around the site yourself using the Tab key to swap between links and make sure it works smoothly.
Missing descriptive text on images and links
Alt text on images allows users with visual impairments to use a screen reader to read website content to them out loud. If alt text isn’t there, the user misses out on important information and/or context from your images. Similarly, using complex graphics with text embedded, like an infographic, needs descriptive alt text and captioning to allow all users to access the content hidden in the images.
In addition to images, links and buttons also need descriptive text. Using ambiguous text for links such as “click here” doesn’t provide enough information about the link when read out loud to a user. Using descriptive text for images and links will also benefit your search engine optimization (SEO) and make you easier to find during searches, which is a nice bonus.
Missing video captions
As video content online continues to grow, the importance of video accessibility grows too. Be sure to include corresponding descriptive text and/or captions with your videos. Many video hosting sites like YouTube have auto-captioning features you can take advantage of when uploading your video. You can also add your own custom captions or use a transcribing service to help automate the process. Also, avoid auto-playing any media as it can be quite jarring to someone trying to have a page read out to them and can be difficult for the user to stop playing.
Unordered HTML structure and headings
Most screen readers read the page from top to bottom following the structure of the underlying HTML, regardless of its visual appearance. Making sure the order of the HTML flows logically is important so users can easily follow the content. Structuring your content using appropriate heading levels (H1, H2, H3, etc.) also helps visually impaired users navigate the page. Screen readers can identify heading levels and jump between them to help a user quickly get to content they are interested in without reading out the whole page. And again, you’ll get an SEO bonus for proper structure and headings.
Inaccessible interactive elements
Tools to get started
- A11y Contrast Checker to check your colors and make sure they meet contrast requirements.
- WebAim’s Web Accessbility Evaluation Tool to test your alt text, links and much more.
- CynthiaSays to quickly test accessibility compliance against several standards.
- The W3C Markup Validator to check your HTML markup and structure.
If you’re concerned about your website’s accessibility or need help with other web-related woes, contact us today.