Customizing Firefox for accessibility testing
Customizing Firefox for accessibility testing
>> 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.
Applied Interaction Design72,231 Views
Foundations of UX: Making the Case for Usability Testing28,824 Views
Responsive Design Workflows179,894 Views
UX Design Techniques: Creating Personas118,114 Views
UX Design Techniques: Creating Scenarios and Storyboards91,368 Views
PHP with MySQL Essential Training4,283,533 Views
HTML Essential Training3,833,338 Views
Foundations of Programming: Fundamentals7,772,051 Views