Getting Online Screen Reader: Items on a Web Page Basics

Hello, my name is Ricky Enger and today we'll learn about various items that we're likely to find on a typical webpage. We're using the Chrome web 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. There is so much we can do online, right? We can search for information, we can read the news, shop for products, find books, and that's just scratching the surface. So as we begin doing everything we wanna do online, we're going to find that our web pages contain things other than text. We need to know what those things are and how to work with them.

So, a web page is basically made up of various types of building blocks and we call those building blocks elements. Let's start with the element that's probably most familiar to us, a link. Links are on just about every page we open and their purpose is to move us from one place to another on the web. Let's get a quick example with this restaurant menu from Panera Bread. We're here on the Panera site, so let's see what we've got.

Screen Reader: Heading level four, explore our menu.

Ricky: And we'll just press our down arrow here to move through a page.

Screen Reader: List with six items, visited link, freshly baked breads, visited link pastries and sweets.

Ricky: If we wanna go to the page for one of these links, say that pastries and sweets link, we can just press enter to open it.

Screen Reader: Pastries and sweets, heading level one S a great beginning or a sweet ending.

Ricky: And just like that, we're on a page about pastries and sweets. Okay, great! Now a link is probably the most common thing we'll find on a webpage, but it's definitely not the only element we'll need to work with. So let's talk about a couple of other things that we're likely to encounter. The first one is an edit field. This is where we can type in information and we'll see it in all sorts of places. The address in search bar that pops up when we first open our browser is an edit field and we type in the address of the website we wanna open inside that edit field.

Screen Reader: Address in search bar and it has auto-complete control plus L blank.

Ricky: We'll find edit fields while we're shopping online and need to search for something, we'll find them when we need to enter our shipping address and those are just a couple of places that we might see them. Another element that we're gonna work with pretty frequently is a button. So when we're not online, we work with buttons a lot. We push a button to turn on the oven, or maybe we push a button on the TV remote to turn up the volume. So really we can say that we push buttons to tell an object to do something, right? Well, it's the same concept for a button that we find online.

An example is a login button for sites where we need to provide a username and password to get in. We'll use edit fields to type in our username and password and a login button to tell the computer to go ahead and do something with the information that we just entered. There's actually a name for a collection of elements like this, where we enter information which then gets submitted, it's called a form and that name makes a lot of sense actually. It's just like a paper form where we enter information into boxes and then submit the form to someone to process, right?

So let's take a quick look at a form and see how it works. We'll open the NLS Bard site where we can download lots of audio and braille books. As we open this, let's listen and see what happens.

Screen Reader: Loc.gov selected instead LOC, National Library Service for the Blind and Print Disabled downloadable books and magazines document, email address, edit blank.

Ricky: Okay, wow! A couple of things happened here. Our screen reader says email edit blank. This means we're inside an edit field that's currently blank and the name of this edit field is email so our email address is what we would type here. Before we do that, one other thing happened that we need to mention. We got a little sound kind of a little beep, let's hear it again. What this is telling us is that our screen reader is in forms mode. So it knows that we're filling out a form instead of exploring our webpage. Let's just press our down arrow key here like we would if we were exploring our page.

Screen Reader: Blank, blank, blank.

Ricky: Well, that's weird, we're not going anywhere. We're just reading the information inside this form field and that's exactly how forms mode works. Our screen reader is just showing us the form and not the rest of the web page. While we're in this mode, we can use our tab key to move through the form and see which fields we need to fill out. So let's do that now. We'll press tab.

Screen Reader: Password edit protected blank.

Ricky: And here's where we'll enter our password and that one extra word, protected, means that as we type our password, it's not going to show what we've typed on the screen. So if someone is watching or if we try and review the information that we've entered here, we're just going to see asterisks instead of what we actually typed. Okay, so let's press tab again and see what other form fields there are.

Screen Reader: Login button.

Ricky: Great, we've got our login button and this is what we'll use to submit our information. But one other thing happened, right? We, another little sound kind of different than the first one. Our first sound tells us we're in forms mode and ready to fill in information. The second sound tells us we're not in a form anymore. Let's hear it again. Cool, we're out of our form. Now, we didn't actually enter anything this time around but if we had, we could push this login button by pressing our Spacebar on it.

So one more quick thing before we go, we noticed that our screen reader automatically puts us in forms mode when it encounters an edit field. That's pretty cool, but there's one more thing we need to be aware of. Sometimes we've got a form field to fill out but there are text instructions that we need to know about as well. We'll miss those instructions if we're just using our tab key to move from form fields to form field. So we need to be able to get in and out of forms mode whenever we want and there's a great little keystroke to do just that. We'll press our NVDA key, which is our Insert key plus the Spacebar. We'll press it once to turn forms mode on and again, to turn forms mode off. we can pay attention to our little sounds to tell us which mode we're in. When forms mode is off, we can explore our webpage the way we normally would and with forms mode on, we can work with our form fields on the page.

Awesome! And now whenever we encounter a link, an edit field, a button or a forum we'll know just what to do with them.

I'm Ricky Enger and I'm glad you could spend a little time with me today learning about the elements that make up a webpage. Wanna to learn more? Join us for other workshops in this series on Getting Online. See you next time.