Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> We've looked at some tools that will allow you to analyze certain parts of your web site, or analyze them for certain disabilities. But now we're going to look at tools that will test your web site for their compliance with Section 508 or WCAG. For this we're going to continue to use the city lights page on the W3.org web site. Go to the address bar and select and copy the URL using Ctrl C or Cmd C. Then we're going to go to the Cynthia Says web site. The URL is www.cynthiasays.com.
This is a very popular web site accessibility validator. If we scroll down the page we can see a form asking us for our web page. Click in that box, highlight over the default text and delete it, then use Ctrl V or Cmd V to paste in our URL. In the next field on the form we're asked to choose an accessibility report mode. Click on the drop down box and either choose Section 508 or WCAG priority 1, 1 and 2 , or 1, 2, and 3.
We'll choose Section 508 for this test. The first check box listed does not apply to this test since we're not testing against WCAG standards. The next check box asks us if we want to include the alternative text quality report. This checks to make sure that your old text is not only present, but high quality. So check that box. You don't need to change anything for the emulate this browser option. So click Test Your Site. And the report will load. Each of the standards of Section 508 is tested.
Let's scroll down the page and see how we did. The first 508 rule states a text equivalent for every non-text element shall be provided. Underneath the rule are listed all of the problems that we currently have complying with this rule. On the right-hand column that says passed, there are three sub columns labeled yes, no, and other. We have a no in this column, meaning we're not currently complying with this rule. In order to pass we would have to fix the failures that are listed in the main column. Continue to scroll down the page.
The next test does not have a yes or no written, but instead an NA for not applicable. That's because this test is looking for equivalent alternatives for multimedia presentations, and the validator did not find any multimedia on this page. Continue to scroll down to get to the third row of the table. For this rule neither yes, no, or NA is filled in. This means that this rule has to be tested by a human of the there's no way for a machine to be able to tell if the color you're using on the page is conveying information or if it's just decoration.
Any time you get a blank result such as here, it means that you need to do manual testing to make sure that you're complying. As we continue to scroll down the page you'll notice that a number of rows are blank. This illustrates what we talked about earlier, that it's very important to test your pages with people. No machine is going to be able to truly know if you complied with these standards and made your page accessible. Let's try another popular web accessibility validator. This one is located at www.webxact.com.
On this page there's only one form field for us to fill out with our page URL. Highlight over the default text, delete it, and use Ctrl V or Cmd V to paste in the same URL we used before. Then click on the go button. This test, unlike Cynthia Says, includes information on a lot more than just accessibility of your page. In includes information such as the file size of the page, when it was last updated, it's meta data, and more information that doesn't necessarily have a bearing on accessibility.
If we scroll back up the page, though, the third tab over on the left is named accessibility. Click on that tab, and you can see the details of our accessibility test. By default, this tool checks against WCAG 1.0, including priority 1, 2, and 3 check points. At the top of the page you have a summary of the number of errors as well as warning that are generated by the test. Warnings mean that your page has not failed but that there might be something there that you need to manually check. If we scroll down the page the priority 1 check points are listed first with their errors at the top and the warnings below.
The number and the name of the check point are given, then you're told the number of times this error or warning has occurred, and finally line numbers where this error or warning is happening in your document so you know exactly where to go to fix the problems. Both of these tools are a good way to quickly check if you have all text on your images and other things that can be determined by a machine. But as you see there are many thing that's need to be determined by manual testing. Next we'll do some manual testing with the Jaws screen reader program.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.