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

From fancy widgets to simple online forms, it’s necessary to make sure they are accessible or provide alternatives. Online forms are one of the most common ways users interact with sites. Be sure to provide proper labels for fields, button text and accessible field options. Using fancy toggles and date pickers can look great but be sure a user can also fill out the form without them available. Same goes for JavaScript tools, widgets and apps. Screen readers are getting better at handling JavaScript, but all the same accessibility pitfalls apply: keyboard access, visual impairment access and HTML structure. There are also times where JavaScript is disabled, so you’ll need to be able to provide an alternative. The most famous example of this was in 2019, when Domino’s was sued because their pizza tracker was inaccessible using a screen reader.

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.