Getting Online Screen Reader: Items on a Web Page Additional Elements

Hello, my name is Ricky Enger and today we'll learn about some additional items besides our links, edit fields, and buttons that we're likely to find on a typical web page. We're going to build on some concepts we've discussed in other workshops in the series, so if headings, forms mode, links, buttons, and edit boxes aren't yet familiar to you, be sure and check out the workshops at the beginning of this series to get up to speed with those things first.

We're using the Google Chrome browser along with NVDA as our screen reader, but the concepts we learn will be pretty similar, no matter which screen reader and browser we're using. So as we're getting around on the web, we know that our web pages are made up of lots of different building blocks or elements. Links and buttons are just a couple of examples of these, but there are a few more really useful elements that we'll take a look at today. We're gonna learn about radio buttons, check boxes, and combo boxes, and we'll put it all together by working with these elements in a form. Our screen reader actually makes it really easy for us to learn about these things because we can use a feature called the elements list to take a look at everything our page is made of. Let's check out how this works.

To do this, we'll use the bookshare.org website, where we can download a lot of awesome books. We're on the home page here and to bring up our elements list, we've got a great little keystroke. We'll press our insert key and F7. So that's function key seven.

Screen Reader: Elements list dialogue. Tree view. Skip to main content one of 37 levels zero.

Ricky: Interesting. So we've got 37 of something, we're focused on the first one, and it's called skip to main content. But what kind of element do we have here? Well, turns out this is our list of links on our page and we can move down this list with our down arrow key.

Screen Reader: Bookshare homepage. Visited two of 37 levels zero. Login collapsed three of 37 levels zero.

Ricky: And for any of these links that we wanna open, we can just press enter on the link in our list here, but we don't wanna do that right now. We wanna see what else we've got here on this page, so let's move backward in this dialogue and we'll do that by pressing shift plus tab.

Screen Reader: Type grouping. Links radio button checked out plus K.

Ricky: Okay, yeah, we just got a ton of information, so let's make some sense out of all this. So the first three words type grouping links. This is telling us that the type of element we're currently showing is a list of links. Great, now how about the next couple of words we heard? Radio button checked. What is a radio button and what does checked mean? A radio button is an element where we've got several options, but only one of them can be selected or checked. For example, if we have a heater button, an air conditioner button, and an off button on our thermostat, we can only choose one of those at a time, right? A radio button is like that too. So now that we're on our radio button, we'll press our down arrow key to move through our options.

Screen Reader: Headings, radio button checked out, plus H. Form fields, radio button checked out, plus F. Buttons radio button checked out plus B.

Ricky: Okay, cool, and if we tab forward again, we'll see all the headings on our page. Let's stay on our radio button for now, though, and see what else we have here. We'll press our down arrow key.

Screen Reader: Landmarks, radio button checked off plus D.

Ricky: Landmarks are kind of like sections of the page that we can jump to. Every site may have different landmarks. Let's tab forward to our list and see what Bookshare has.

Screen Reader: Tree view. Banner expanded one of three levels, zero.

Ricky: And we'll move down our list.

Screen Reader: Level one navigation, one of three. Search two of three level one.

Ricky: Okay, so that seems like a great section to jump to, so let's press enter to jump to the search landmark.

Screen Reader: Banner landmark search landmark search keyword search keywords edit type.

Ricky: All right, great. We moved to the search section of our site, so let's press our down arrow a couple of times until we find our advanced search link.

Screen Reader: Edit title author or ISBN. Button search visited link advanced search link browse.

Ricky: Let's press enter to open it.

Screen Reader: Search Bookshare document. Main landmark title, edit blank.

Ricky: Great, we're in forms mode now and we're going to find lots of useful elements in here, including a couple we haven't learned about yet. This first one is an edit field where we can type in a title that we're searching for. Let's keep tabbing through our form and see what we've got.

Screen Reader: Author, edit blank. ISBN edit blank. Publisher edit blank. Synopsis edit blank. Full text edit blank. Books to search combo box. All books collapsed.

Ricky: Oh, hey, there's something new. A combo box. We might also hear this called a drop down. To work with it, we'll press our alt key plus our down arrow key to open it.

Screen Reader: Expanded list all books one of three.

Ricky: So this tells us we've got some options to choose from and just like a radio button, we can only choose one at a time. We'll use our down arrow key to see what's here.

Screen Reader: Freely available books, two of three.

Ricky: Oh nice. Those are books we can download, even if don't have a Bookshare account. So we'll press enter to choose that option and our combo box will close again.

Screen Reader: Books to search combo box. Freely available books collapsed.

Ricky: All right, so we hear the option we've selected and we hear a combo box is now closed or collapsed. That just means our list of options isn't showing anymore. Whenever we wanna open it again, we can just press our alt plus down arrow keystroke. Okay, so let's tab one more time to find the last element we wanna talk about today.

Screen Reader: Publisher quality check box checked.

Ricky: Checkbox. What is that? It's basically something that we can turn on or off and we'll do that by pressing our space bar on it.

Screen Reader: Not checked, checked.

Ricky: And there we go. We've turned this off and then back on again. That will tell Bookshare that we wanna search for publisher quality books. Checkboxes are great because they can really help us narrow things down when we wanna choose multiple things at a time, instead of just one option as we do for radio buttons and combo boxes.

An example might be a set of check boxes for the kinds of vegetables we like. We can check the broccoli check box and the asparagus check box to say that we like those and then leave the tomatoes checkbox unchecked to indicate that veggie is not on our list of favorite things. So now if we continue tabbing here in our Bookshare search form, we'd find lots more check boxes, as well as combo boxes and even a search button at the end to go ahead and submit our form and get search results.

So this is really a great page to practice working with these different types of elements because it has a lot of them. And when we find all these elements on our other web pages, we'll work with them in exactly the same way as we do here. Pretty powerful stuff, right?

I'm Ricky Enger and I'm glad you could spend a little time with me today learning about the elements list and how to work with elements on a webpage. Wanna learn more? Join me for other workshops in this series on getting online, see you next time.