- [Ryan] Hi, my name is Ryan Jones. I'm a senior project manager at TPGi, and I'm also a JAWS user. Today I'm going to show you a brief example of using JAWS on a webpage. We'll show a good example of a webpage that has accessibility built into it. And then an example of what happens when you're on a webpage that does not have accessibility. These samples are made by the W3C who also makes the web standards. So I have Google Chrome open and JAWS running, and I'm just going to start down arrowing through part of this particular webpage. And we'll hear what JAWS says.

- [JAWS Screen Reader] Heading level two navigation menu, list of four items.

- [Ryan] So JAWS told me I just moved past a heading. And then it says I'm moving into a list with four items in it.

- [JAWS Screen Reader] Link Home.

- [Ryan] Link home, which means this is a link that I could activate, and the name of the link is "home".

- [JAWS Screen Reader] Link News.

- [Ryan] A link called "news".

- [JAWS Screen Reader] Visited link tickets.

- [Ryan] A link called "tickets" that I have visited before. So it says "visited link".

- [JAWS Screen Reader] Survey.

- [Ryan] The word "survey", which is not a link, it's just text.

- [JAWS Screen Reader] List end.

- [Ryan] And then I'm at the end of the list. If I keep down arrowing.

- [JAWS Screen Reader] Heading level one Citylights Survey.

- [Ryan] I get to a new heading called "Citylights Survey".

- [JAWS Screen Reader] Heading level two, This Week's Survey: More city parks - a pain or a gain?

- [Ryan] So if I continue to arrow down, I'll move through the survey, but I'm going to jump forward and find the edit boxes where I know there are some information that I will need to type in. So I'm going to press a JAWS shortcut key to let me do that.

- [JAWS Screen Reader] Name. Edit has popup menu.

- [Ryan] And JAWS said "name", and it says that it's an edit box so that I know that I could type something in here, if I needed to. If I continue to move forward through these fields...

- [JAWS Screen Reader] Email address. Edit has popup menu.

- [Ryan] There's one for email address.

- [JAWS Screen Reader] Retype email. Edit has popup menu.

- [Ryan] I need to retype the email.

- [JAWS Screen Reader] Submit button.

- [Ryan] The submit button. There's another way that I could bring up a list of all of the form fields on this page, assuming that they are labeled properly.

- [JAWS Screen Reader] Select a Form Field dialog. List one, list view. Submit button 15 of 15.

- [Ryan] And I'm at the bottom of the page. So if I scroll up the list, I'll find all the form fields there. The names will make sense because this page does have accessibility built into it.

- [JAWS Screen Reader] Escape.

- [Ryan] Now I'm going to switch over to this similar page, same page, but it's going to not have accessibility built into it.

- [JAWS Screen Reader] Welcome to Citylights. Inaccessible survey.

- [Ryan] So this is the inaccessible version. If I'm back on that same navigation menu on this page where there's things that are not done properly, let's hear what JAWS says.

- [JAWS Screen Reader] Unlabeled graphic graphic IMG slash nav Home on mouse over.

- [Ryan] So this was the thing on the other page that said home link. Now it's giving me a bunch of gibberish.

- [JAWS Screen Reader] Unlabeled graphic graphic IMG slash nav News on mouse over.

- [Ryan] So these are images here in this navigation menu that are not properly labeled, so JAWS doesn't know what to call them.

- [JAWS Screen Reader] Unlabeled graphic graphic IMG slash nav Facts on mouse over.

- [Ryan] And I'm just pressing the down arrow key.

- [JAWS Screen Reader] Unlabeled graphic graphic IMG slash nav Survey on mouse over. Citylights Survey. This Week's Survey: More city-

- [Ryan] JAWS did not tell me that there were headings here because this text was not marked up with the heading text. In a similar example, if I bring up the same list of form fields that I used on the previous page...

- [JAWS Screen Reader] Select a form field dialog. List one, list view. Unlabeled one combo box, quick menu, one of 14.

- [Ryan] Instead of the nice properly labeled form fields that I had on the other page...

- [JAWS Screen Reader] Radio button not checked. Radio button not checked. Radio button not checked.

- [Ryan] I'm not getting any labels on these particular form fields, because they were not properly labeled for accessibility.

- [JAWS Screen Reader] Escape.

- [Ryan] As the screen reader user, I can use all kinds of different shortcut keys to move around this page, move to different form fields, links, buttons, headings. All of those things that I can move to, though, have to have been coded properly for accessibility, in order for the shortcut keys to work, and in order for JAWS to read the information.