Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
>> Now that we've installed these extensions for Firefox let's use them to test some pages. The first extension that we're going to test is the Web developer toolbar. Some of its features do not work for local pages, so we're going to test the page that we looked at in the previous chapter from the W3C. The web page that we're at is www.w3.org/wai/eo/2005/demo/before/index. Because some of the features in the Web Developer toolbar do not work for locally loaded pages make sure that you up load your pages to a testing server before using the extension.
Select the disable styles option, and then click on all styles. You'll see that the display of the page changes because CSS is no longer available. Some of the images have disappeared and the font formatting has changed. This is useful to make sure that your pages are still readable without styles applied. We can also turn off images. Click on the Images button, select Disable Images, and then select the All Images option.
All images on the page are now displayed as if they were broken. The space is still referred for them, but they are not displayed. You may also want to see which images on a page lack all attributes, which we'll talk about on a later movie. For that, click on the Images button, scroll down to the Outline Images option, and select Images Without All Attributes. This will put a red border around all images that do not currently have an all attribute. You can also view the all attributes of image that's do have one using the Images menu.
Click on Images again, and go to Display All Attributes. The all attributes will be listed in yellow boxes. This page has only a couple all attributes set. You can hover over the yellow box to see what the text is currently set to. You may also want to outline other elements on the page. There are a number of these options underneath the Outline menu. You can outline frames, headings, links, and so forth to make sure that you're marked up these pieces of content correctly. Underneath the Tools menu are links to validate your page against a number of W3C standards, as well as Section 508 accessibility rules.
Let's select the Validate Section 508 option. This opens a new tab with the contents of a report from cynthiasays.com, a web site accessibility checker. You can see the full results of its test. On the left side it gives you a description of each Section 508 rule. On the right side it tells you whether you have passed or not. In this case, you can see that we have not passed for image elements because they do not have all attributes, as we saw with the outline feature that we used earlier.
Now let's close this tab. Next, let's use some of the tools in the accessibility extension. This is the next toolbar down on the page. It contains many of the same tools that the Web Developer toolbar does, but there are some differences. For instance, when you click the navigation button you'll see a number of elements listed. Clicking on these items will bring up a list of each of these elements. Click on the Links option. This brings up a box showing all of the links on the page, what the text of the link is, and where it goes to.
These navigation options in this extension are useful because screen readers have functions just like this. You can use this to see what a screen reader user might see in their own list of links and make sure that the text makes sense. We'll talk more about that in a later movie. Close this box and go to the Style button. Click that and choose high contrast view one. This changes the view of the page to make the text easier to read for visually impaired users. It makes the text large and changes its color. If we scroll down the page you can see that some of the text does not change.
This is because the way the text has been coded does not allow for changes. This would show you that you would need to make changes to your CSS or other pieces of your page to make the text more changeable to user changes. Again, we'll talk about that in a later movie. The other two extensions we downloaded were Fangs, and the Color Contrast Analyzer. These do not show up as tool bars on Firefox, but these are available from the Context menu that appears when you right-click or on a Mac, Ctrl-click on the page. So that gives you an idea of some of the features available in the Web Developer and accessibility tool bars.
In the next movie we'll look at how to use the other tools that we've downloaded, Fangs and the Color Contrast Analyzer.
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.