Stay up to date with weekly industry insights

the latest trends in web design, inbound marketing, mobile strategy and more...

How Can I Find Section 508 Issues on My Website?

How Can I Find Section 508 Issues on My Website?

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. 

Disable JavaScript

Many websites use JavaScript to add interactive elements or process data, but this code can often interfere with accessibility for people who do not use a traditional mouse-and-keyboard interface. Since some users with disabilities often turn off JavaScript on their devices, you’ll want to test your site without JavaScript enabled and verify that all the content can still be reached. 

You can temporarily disable JavaScript in your browser settings. On mobile devices, JavaScript can be disabled in the phone settings (for iPhones) or browser settings (for Android phones). After it’s been disabled, make sure you can still navigate through the pages and access the same information as before. The front-end visuals don’t have to be perfect, but the content needs to be there.

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. 

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 WSOL 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. 

About the Author

Kendall Smith
Kendall Smith
As WSOL’s QA Engineer, Kendall works to simulate the end user’s overall experience on a website in an effort to seek out problems that they may encounter. She also provides interactive CMS training sessions, content entry assistance, and full support to our clients during User Acceptance Testing to ensure all of their issues have been resolved.