We share some tips on how to test your website for Section 508 issues and ensure that it is accessible to every user.
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 that they are accessible to all users, the next step is knowing how to identify these types of issues on your website. Below are a few tips that you can use to begin evaluating your site.
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.
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 pointer 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.
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 the repetitive global navigation and jump right to the main body 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 not clear what the focus of the image is, or where it’s missing entirely. 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 also provide you with a full report of images missing their alt text on a page.
Don’t Rely Entirely on Automatic-Checking Tools
Be cautious of some of the automated tools out there that claim they can identify all the accessibility issues on your website. Most free automated tools are just checking the HTML code for things like missing alt text and form labels, but they’re not performing a full audit to see how accessible your site really is. While some parts of the process can be automated, there’s no way to know if you're Section 508 compliant and have met all the accessibility standards unless manually testing is involved.
You need to put yourself in the place of someone with a disability and imagine how you would find information on your site if you were blind or had mobility issues. Thinking of it from this perspective demonstrates that you’re not just following regulations, but making sure your site is meeting the needs of 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.
Have questions or comments about this post? We'd love to hear from you.
Learn the need-to-knows of Website Accessibility, Section 508, and what your obligations are as a designer, developer or website manager.
We look at how Section 508 sets standards for websites to ensure everyone can use them, even if they have physical disabilities.
Website Traffic Woes?
Google search algorithm updates can wreak havoc on your website’s traffic. Don't let your organic rankings tank. Our free SEO health check can help you identify issues that make Google unhappy with your site.
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.