Easy Dynamics Blog

Section 508 Standards and Testing

Posted by Kishore Jogia on Apr 28, 2016 11:30:00 AM

Find me on:

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.

wat_image.png

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

Section 508 Standard 1 Compliance Audit by Kishore Jogia of Easy Dynamics

The above standard can beTest Section 508 Standard 1 Show Images WAT toolbar 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

Section 508 Standard 2 Compliance Audit by Kishore Jogia of Easy Dynamics

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

Section 508 Standard 3 Compliance Audit by Kishore Jogia of Easy Dynamics

Again, you can use the first test we conducted withblog subscription for fixes and how-tos CTA 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

Section 508 Standard 4 Compliance Audit by Kishore Jogia of Easy Dynamics

The above standard can be tested by going toTest Section 508 Standard 4 Colour tab in WAT toolbar test Contrast Analyser "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

Section 508 Standard 5 Compliance Audit by Kishore Jogia of Easy Dynamics

Using the WAT Toolbar, youTest Section 508 Standard 5 CSS WAT Toolbar to Disable CSS 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 

Section 508 Standard 6 Compliance Audit by Kishore Jogia of Easy Dynamics

Even though Hubspot's home page doesn't have any tables, Test Section 508 Standard 6 Tables tab WAT Toolbar and Table Headersthis 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 

Section 508 Standard 7 Compliance Audit by Kishore Jogia of Easy Dynamics

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

Section 508 Standard 8 Compliance Audit by Kishore Jogia of Easy Dynamics

This standard is a huge help forTest Section 508 Standard 8 Doc Info tab WAT Toolbar and select List Links to skip to main content 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: 

Subscribe to Blog at Easy Dynamics for Fixes and How-To's

Topics: Live Demo, Best Practices, Section 508 Standards, Testing, Web Development

Easy Dynamics: The SharePoint Experts

We are a leading SharePoint Services and Solutions shop located in Washington, DC. 

Thanks for coming to our blog! Here you will find relevant news and information about the technologies we use and other things we find interesting. Want to know more about who we work with? Or our first commercially available product, EasyBox

You can find links to all of these things and more right from this page. Enjoy reading!

Subscribe to Email Updates