Have you been given the task of running a 508 audit against a site? Or perhaps you’re building a site that needs to be 508 compliant and want to know what that even means? Then this guide is for you! It will give you a great starting point that will explain exactly what Section 508 Standards are and walk you through how to check if a site is compliant with these standards using free tools.
What is Section 508?
The Section 508 Standards refer to an amendment passed in 1998 of the Workforce Rehabilitation Act of 1973. It specifically establishes guidelines for electronic and information technology to be accessible by people with disabilities.
As a quick history lesson, Section 508 Standards were originally added as an amendent in 1986. This is shortly after the Internet was spreading and becoming widely used, so it’s not a surprise that the original 508 Standards had to be replaced in 1998 by the Federal Electronic and Information Technology Accessibility and Compliance Act, which are now the new Section 508 Standards. This goes to show that accesibility has always been on people’s minds!
Why are Section 508 Standards Important?
The aim of having any site be 508 compliant is so that those with disabilities may use the site as effectively as someone without any impairments. This is huge considering that the Internet is one of the greatest tools available to us!
When you begin digging around for Section 508 Standards, you may come accross World Wide Web Consortium’s (W3C) site. They were responsible for launching the Web Accessibility Initiative (WAI) in 1997 with endorsement from the White House and helped shape the current 508 Standards. In fact, their site goes further in depth when it comes to anything regarding accessibility, as it should. W3C does provide a Checklist of Checkpoints for Web Content Accessibility Guidline, but we’re going to focus on a format friendly checklist provided by WebAIM that was extracted from the same set of rules.
What are some 508 Compliance Tools?
The real question is, how can you reasonably assume your website is 508 compliant and will pass an audit? The best way is to perform a 508 compliance check yourself! We’ll be using the Section 508 Standards Checklist mentioned above in conjunction with the Web Accessibility Toolbar (WAT). This will get you most of the way there unless you’re performing an audit for a complex site.
It’s also worth noting that the best 508 tool available is yourself! Once you have a good grasp of the 508 Standards, you’ll be able to quickly make judgement calls that other tools wouldn’t be able to. If you’re looking to go the extra mile and have a computer running Windows, you can download the Window-Eyes Screen Reader and play around with the accessibility features first hand. W3C also provides a long list of web accessibility evaluation tools in case you’re not interested in WAT or Window-Eyes.
The Window-Eyes Screen Reader is assistive software that allows users with impairments to effectively navigate web pages. By means of text-to-speech, Window-Eyes interprets on-screen elements and voices them to the user who is able to navigate the page through a combination of tabbing through elements and using the arrow keys.
The WAT Toolbar is a browser enhancement plugin that allows users to evaluate accessibility features of a web page. The toolbar consists of various buttons that, when selected, alter the currently viewed web page. This allows the user to assess the effectiveness of implemented accessibility features as well as the interaction between a web page and assistive technologies.
Below, we’ll perform a quick audit against Hubspot’s home page with the WAT Toolbar against the 508 checklist. You’ll notice that not every standard in the checklist applies to Hubspot’s home page. This is a common occurrence since not every website you come across will have things such as embedded videos and graphs. To save time, the standards that don’t apply to the Hubspot home page will be skipped, but we’ll still hit the big ones.
Performing a 508 Audit
Once you have the WAT Toolbar installed in Internet Explorer, it should look like the image below.
We will now go through the standards provided in the 508 checklist and describe how to use the WAT Toolbar to test them.
Standard 1
The above standard can be
tested by going to the “Images” tab in the WAT Toolbar and selecting “Show Images.” (shown right) This will identify the alt tags for all images on the page and alert you if there are any images missing alt tags.
Standard 2
You can use the previous test with the WAT Toolbar, but ultimately you will have to go through each alt tag to see if it makes sense for the image it’s describing, like the table shows above.
Standard 3
Again, you can use the first test we conducted with{{cta(‘d173b5b6-18d9-4d5d-9383-d06f0cfdfa78′,’justifyright’)}} the WAT Toolbar to see what the alt tags for images are. After that, you will have to see if any images perform any functions. For instance, the image from the first test above acts as a link to Hubspot’s home page. In this case, the alt tag doesn’t explain that by clicking the image, you’ll be taken back to the home page. Therefore, Hubspot would fail its 508 compliance check because of this. It’s not a huge deal though! This is something that can easily be remediated by beefing up the alt text so a screen reader can alert the user of the image’s function.
Standard 4
The above standard can be tested by going to
“Colour” tab in the WAT Toolbar and then selecting the “Contrast Analyser.” (image shown below) The Contrast Analyser allows you to test for contrast between two pixels of your choice. To effectively test this standard, you should look for text in the webpage that may blend well with the background. For instance, grey text written on a black background wouldn’t be easily seen by those with visual impairments. In the image below, we see that we were able to use the Contrast Analyser to compare a piece of text on Hubspot’s home page to its background.
Standard 5
Using the WAT Toolbar, you
can easily turn off the style sheet for a website by going to the “CSS” tab and selecting “Disable CSS.” (image shown right) Once you’ve disabled the stylesheet, you can scroll through the website and see if it still makes sense. This is certainly the case for Hubspot’s home page.
Standard 6
Even though Hubspot’s home page doesn’t have any tables, 
this is an important standard to hit because you will more than likely come accross another website that does have tables. To test for column headers with the WAT Toolbar, go to the “Tables” tab and select “Table Headers.” (image shown right)
Standard 7
Another thing that you may see tables used for is layouts. It’s not so common anymore since front end frameworks such as Bootstrap use a div layout for formatting, but you still may come across it. You can use the same method as the previous standard to test, but in this case you want to ensure that the tables used for formatting aren’t labeled with headers.
Standard 8
This standard is a huge help for
screen readers, especially when there is a lot of navigation involved in a website. To test if there’s a skip to navigation link with the WAT Toolbar, go to the “Doc Info” tab and select “List Links.” In this link list, you should be able to see an entry for “skip to main content” close to the top of the list.
Accessibility Moving Forward
We’ve gone over a lot of things! Hopefully you can now walk away with a better understanding of Section 508 Standards: where they came from and how to check if a website is compliant. In my follow-up blog post, I discuss how to implement these 508 standards in your coding. I leave you with this BBC article that touches on Facebook’s efforts to use Artificial Intelligence to describe pictures on websites to the visually impaired using screen readers.
What tips do you have on understanding 508 standards and ensuring site compliance? Share your wisdom with us in a comment below!
Found this blog post useful? Make yourself comfortable and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life easier,subscribe to our blog to get instant updates sent straight to your inbox:
{{cta(‘33985992-7ced-4ebd-b7c8-4fcb88ae3da4’)}}
