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.
>> In the last movie we used the Web Developer and accessibility toolbars to make some changes to this page. I've unchecked those options now so the page is back to its default view. Now we're going to use the Fangs and Color Contrast Analyzer extensions that we also downloaded. To use Fangs you can right-click for Windows or Ctrl click for Mac on the page to bring up a context menu. Scroll down to the last option which says View Fangs. Click on that, and a new window will open. In this case, the window is blank. It shows no text.
This is a common problem when you first install the Fangs extension. Close this window. And we're going to go to the web page where we downloaded the Fangs extension. We're at www.standards-schmandards.com/projects/fangs/faq. The first question on this page asks about what to do when the output is blank, which is the problem we just experienced. What we need to do is change some preferences in Firefox is the about config screen.
Open a new tab in Firefox and in the address bar type about:config and hit Enter or Return. A number of preferences are shown on the page. We need to add the two that were listed on the FAQ. Go back to the FAQ page. Select the first preference name, and use Ctrl C or Cmd C to copy that text. Also note that the value that we're going to set for this preference is E N. Go back to the about config tag and right-click or Ctrl click to bring up a context menu.
Select New and then click on the String option. In the dialogue box that appears use Ctrl V or Cmd V to paste in the text that you copied from the FAQ page. Click OK, and the next dialogue box that says enter string value, type in E N. And click OK. Now we need to set the other preference. Go back to the FAQ page and select the name of the next preference. Use Ctrl C or Cmd C to copy it, and note that the value that we need to set is default.
Go back to the about config tag, right-click or Ctrl click, select new, and select string. Use Ctrl V or Cmd V to paste in the preference name. Click OK, then in the next box type default and click OK. We can now close this tab as well as the tab for the FAQ. We're now back on the page we want to test.
Once again, right-click on the page or Ctrl click on a Mac. Scroll down and select View Fangs. This time when the new window opens up you'll see that it's full of text. The text that is shown emulates what Jaws, a popular screen reader, would read out to its users. So it's not simply the text on the page but also additional information such as list of two items as we can see at the top of the page. There are also additional tabs to view a headings list, and in this case we can see that the page has no headings.
We can also click on the third tab to see the links list. This will show us the text of all the links on the page. In a later movie we'll show how to use Jaws and why the headings list and the links list are so important. You can use Fangs to quickly see if you have headings marked up correctly, what your link text is, if it's understandable, and the order of the text output on the page. Close the Fangs window now. The next thing we want to analysis on this page is its color contrast using the extension that we downloaded. Right-click or Ctrl click on the page again, and select Color Contrast Analyzer.
Then click on the All Test option. A new tab will open up showing the results of your test. It analyzing the text color and background color of all of the text elements on the page and lists them down the report. Any elements that do not pass WCAG guidelines will be highlighted in yellow. For instance, this first piece of text, which is yellow and red, is passing in the luminosity contrast ratio column. It also passes the difference in brightness test. But the last column on the page shows the difference in color results and states that it fails.
We can scroll down the page to see all elements on the page, what their colors are, and whether they pass all three of these tests. So now we've seen a number of tools that we can use in Firefox to test different areas of our pages for their accessibility. Next we're going to look at some online tools that you can use as well.
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.