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.
>> Now that we've downloaded Firefox there are a number of extensions that you can add to it for testing the accessibility of your web sites. The four extensions that we are going to add are named Web Developer, Firefox Accessibility Extension, Fangs, and Color Contrast Analyzer. The URLs for the web sites where you can install these extensions are listed on the screen. You may want to pause the movie at this time to write them down. The Web Developer extension can be downloaded from chrispederick.com/work/web-developer.
This extension adds a toolbar to Firefox with a number of tools that you can use for testing not only the accessibility of your web pages but other features as well. So download the extension, click on the Download for Firefox and Flock link. When you click on this link a yellow bar will appear at the top of your browser window that says Firefox prevented this site from asking you to install software on your computer. Click on the Edit Options button in this yellow bar. A dialogue box will come up listing the allowed sites that can install extensions to Firefox.
The address of this web site will be listed and there is a button that says Allow. Click this button to add this web site to your list of allowed sites. The web site now shows up in the list of sites. So we can click the close button at the bottom of the dialogue box window. Now that we're able to install extensions from this site we can once again click on the link that says Download for Firefox/Flock. This time a dialogue box comes up saying "Software Installation" with the name of the extension.
Click on the Install Now button. Firefox will download the extension and tell you that you need to restart to complete the installation. We have three more extensions that we're going to install before we restart, so close this box. Go to the next web site now, which is the web site for the Illinois Center for Information Technology Accessibility. The page that we're on is firefox.cita.uiuc.edu/index.php.
This is the page for the Firefox Accessibility Extension that this organization offers. This extension was designed for people with disabilities but is also useful for web developers. It shares a lot of features with the other web developer extension that we just downloaded, but has some other accessibility features that we'll show. To install this extension go to the orange box on the right side of the page, and click on the link that says Install from extension web site. This will take you further down the page, and there's a link that says select the Mozilla Firefox Extension 1.0 installation link.
Click on this link. Once again, a yellow bar will appear that prevents the download from this particular web site. Again, click on the Edit Options button. Click Allow, then Close. Then click on the Installation link again. Click on the Install Now button. And then close the add ons dialogue box once it has installed. Now let's go to the third web page. This is the web page for the Fangs extension.
The URL is www.standards-schmandards.com/projects/Fangs. This extension emulates the text that a screen reader would read, but instead of putting it in an easy to read text format. To install this extension click on the link that says to install Fangs click here on the left side of the page. Once again, in the yellow bar that appears at the top of Firefox click on the Edit Options button.
Click Allow, and then click Close. Then click on the Installation link again. Click on the Install Now button, and again close the Add-ons dialogue box once it has installed. Finally, let's go to the fourth web site. This is the page to download the Color Contrast Analyzer. The URL is juicystudio.com/article/color-contrast-analyzer-firefox/ extension.php.
You would need to scroll down the page a bit to get to the link to download it. Under the heading that says Contents click on the Firefox Extension link. Then click on the link that says Download the Color Contrast Analyzer. Follow the steps again to allow the site to install extensions. Click on Edit Options, then click on Allow, then Close. Then click on the Color Contrast Analyzer link again.
Click the Install Now button. And now that we have installed all four of these extensions we're ready to restart Firefox. So click the button in the Add-ons dialogue box that says Restart Firefox. It will warn you that you're about to close four tabs. Click Close Tabs. Now that these extensions have been installed you'll notice that there are two new toolbars at the top of the Firefox window. The first is the Web Developer toolbar. The next toolbar is the Web Accessibility toolbar.
In the next movie we'll use these tools on a web page to see how they can help evaluate its accessibility and show us what problems exist and how we might be able to fix them.
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.