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.
>> In this movie we're going to install and use Jaws, a popular screen reader for Windows. If you're on a Mac this movie wouldn't apply to you, but in the next movie we'll go over a screen reader that comes built into Mac OS X. Jaws is a software program used by blind and visually impaired users to read off the screen to them. It's made by freedom scientific, so you can download it from their web site. We're at www.freedomscientific.com/fs_downloads/jaws.asp.
Jaws is not a free program, but a free demo is offered that will run for 40 minutes at a time on your computer. After 40 minutes you'll need to restart in order to use Jaws again. But this demo version does have all of the same features that a full version has. Scroll down the page and look for the heading that says demonstration version of Jaws. Click on the free demo of Jaws link to download the installer. Click on the Save File button, and the downloader will begin installing.
Once the installer file has finished downloading you'll see it on your desktop. Double-click on this file to open it and go through the installation process as you would for other programs on your computer. One thing that does differ with the Jaws installation is that you'll need to restart your computer early on during the install. After you've restarted Jaws will finish installing. Once Jaws has finished installing you'll have an icon for the program on your desktop. Double-click on it to begin the program. It will immediately begin reading the contents on your screen as well as some other information.
>> Jaws, 40 minute mode, dialogue audio monitor, toolbar, 100%. To activate, press the space bar. >> Now we want Jaws to read a web page. So let's open Firefox. Go to the Start menu. >> Menu, start search edit. To move through items press up or down arrow. >> Control up in the Start menu. Go up and select Mozilla Firefox. >> Desktop, folder view, list view, now selected Jaws three of three. To move items use arrow keys. >> The web page that we want to test is part of the W3C's before and after pages.
Go to the address bar and type in www.w -- >> 3.org/wai/eo/2005cemo/after/index. Enter. Leaving menus. Welcome to city lights, welcome to city lights. 100%. >> As you heard, Jaws read allow every key as I typed it.
When the web page loaded it then read the title of the web page. In order to get Jaws to start reading the full contents of the page you'll use the keyboard shortcut insert, and the down arrow. This will make Jaws start reading from top to bottom on the page. To stop the speech at any time hit the Ctrl key. I am going to hit insert down arrow to start reading the page. >> Go button, traffic colon, construction work on main road today colon, Friday, 27 January, 2006. Sunny spells, 23 degrees, see navigation menu.
Colon. List of four items, Home link News link tickets, visit link survey, level one welcome to city lights. >> Then I hit the Ctrl key to stop the speech. Jaws literally has dozens and dozens of keyboard short cuts. That's because a blind user will use the keyboard as their main way of navigating their operating system and browser. We're just going to look at a few of the keyboard short cuts that are useful when testing web pages. To bring up a list of headings in the page hit Insert and F6 >> Adding list dialogue, adding list view.
Welcome to city lights, colon, 1, 1 of 7. To move to item view use arrow keys. >> The heading list it one of the main navigation mechanisms that screen reader users take advantage of. Instead of having to listen to all of the content on the page read out at once, seeing the headings gives them a way to basically skim the page, just as a sighted user would do. The text of each heading as well as which level it is, is shown again so the user can get a sense of the structure and hierarchy of the page and decide what part they want to jump to and read the content of.
You can use the arrow keys in this box to jump between headings. >> Heat wave linked to temperatures, colon 2. >> To select this heading and go to it on the page, hit Enter. >> Enter. Heat wave link to temperatures heading level two link. >> It will read the text of the heading. If you want it to continue reading from that point, again, hit Insert and the down arrow. Another way that Jaws users frequently navigate a web site is by looking at the list of links at the web site. You can bring this up by hitting Insert and F7. >> Link list dialogue, link list view, heat wave link to temperatures, (Inaudible) to move to item view use the arrow keys.
>> The link that we are currently on is the one that is first read in this box. Again, you can use the arrow keys to move up and down between the links. >> Survey. >> Selecting the link reads out the text of that link, but not the URL. That's why it's important that your link text be clear on its own. We'll talk about that in greater detail later. If you hit Enter you'll be taken to that link. >> Enter. >> That will immediately take you to the new page. There are also keyboard shortcuts for jumping between different items on the page, such as from one heading to the next, from one list to the next, and so forth.
Here are some of those keyboard short cuts that you'll probably use the most when using Jaws to test your web pages. The H key jumps you from heading to heading. U moves you to the next unvisited link, while V to the next visited link. N moves you to the next non-linked text. This is useful for screen reader users when there are a lot of links at the top of the page that they want to quickly get past. Hitting end will jump them to the next block of text that is not linked, which hopefully is the main content of the page. The L button moves to the next list, and F to the next form control.
You can also type S to move to the next element that's of the same type that you're on now. For instance, if you're on a block quote and wanted to go to the next block quote you could hit S. D would do the same for a different type element. Finely, the Enter key as we saw activates links. These are just a few of the commands available in Jaws. It's a very complex program that has a steep learning curve. That's why it's so important to test your pages with real users of Jaws. However, using it yourself should give you an idea of what they might experience and should point you towards the main issues you'll want to fix.
Next we're going to look at the voiceover screen reader on a Mac, and then we'll move on to setting Dreamweaver's accessibility preferences.
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.