In the 21st Century, we spend a great deal of our lives online. Whether we’re at work, at home, or elsewhere, we expect to be able to connect and find the information we need. Just like it’s important for public buildings to provide wheelchair access, it’s important for websites to have all of their content reachable by everyone.
We recently discussed how Section 508 provides standards that federal agencies and departments are required to follow to ensure they're accessible to all users, the next step is knowing how to identify these types of issues on your website. Below are a few tips you can use to begin evaluating your site.
Disable CSS
CSS (Cascading Style Sheets) is used on websites to modify the site’s appearance, including the layout, colors, fonts, etc. Testing your site with CSS disabled, which can be done temporarily through your browser settings, will allow you check the reading order and legibility of your content. The front-end visuals may not look great, but focus on making sure the content is all there.
Disconnect Your Mouse
Some users are unable to use a mouse and can only browse the web with a keyboard. Disconnect your mouse and test the site by only using the keys on your keyboard. You should be able to navigate through menus, sliders, forms, etc. by using the Tab key, arrow keys, space bar, Enter key, and other common keyboard controls.
Verify that you can access all links and interactive elements in the correct order and make sure that you don’t get stuck anywhere along the way. It's also important to check for a “skip to content” or “skip navigation” link at the top of each page which should allow you to bypass repetitive global elements and jump right to the main content.
Use a Screen Reader
Visually-impaired users will typically use a screen reader tool that reads a site’s text aloud. In order to mimic this experience for testing purposes on your site, you’ll want to try using one of these tools, either by enabling your operating system's screen reader or by installing a browser plugin, such as ChromeVox.
When testing with a screen reader, ensure that what is being read aloud matches the on-screen content and that nothing is skipped or misinterpreted.
You should also pay close attention to the alt text that’s used to describe your images and identify any places where it’s missing or improperly communicating the context that the image is there to provide. Outside of using a screen reader, alt text can be checked in your browser by right-clicking an image and choosing “Inspect.” Tools like WAVE can provide you with a full report of images missing their alt text on a page.
Check Color Contrast
To verify that your website is accessible by users with color blindness and other visual impairments, you’ll want to check the contrast ratio between the text and backgrounds colors. Tools like WebAIM’s color contrast checker make it easy to identify which color combinations meet the accessibility guidelines and which need to be re-evaluated.
In addition, view your pages in black and white to see if anything stands out as difficult to read or understand without the use of color. You can use a browser plugin like High Contrast or just your general print settings to modify the page colors for testing.
Make sure that you can tell the difference between linked text and non-linked text without having to hover your mouse over it. Links shouldn’t be signified by color alone; instead, they should use another visual identifier that makes them stand out, such as an underline.
Don’t Rely Heavily on Automated-Checking Tools
Be cautious of automated tools that claim they can identify all the accessibility issues on your website. Automated checkers are geared towards finding specific things in the HTML markup such as missing alt text and improper heading hierarchy, but they're not able to see how usable your site really is. For example, just because an image has alt text assigned doesn't mean the image is being properly described. While some parts of the process can be automated, you can't complete a successful accessibility audit without involving manual testing.
Put yourself in the shoes of other people with different perspectives, environments, and challenges. Accessibility is not about following guidelines and meeting regulations, it's about building a product that is accessible and inclusive to everyone.
Do you have any questions about accessibility or Section 508 compliance? Do you want to know more about how Diagram can help you ensure that your site meets accessibility standards? Please contact us and we’ll work with you to make sure your site is compliant, or, feel free to share any questions or tips of your own in the comments below.
Photo by Agence Olloweb on Unsplash
