Driving Blind on the Information Superhighway�Basic Interactions: The Fast Lane to Getting Stuff Done on the Web

Driving Blind on the Information Superhighway–Basic Interactions: The Fast Lane to Getting Stuff Done on the Web

by Amy Mason

From the Editor: This is the fifth in an ongoing series to help blind people learn to use the web or to increase their proficiency and ease of use. We regret that a keystroke listed in the last article is incorrect. To display the elements list using NVDA, the keystroke is NVDA+F7. That correction being noted, Amy presents to us another in this fantastic series to take the mystery out of browsing the web and getting us to the place where it is not burdensome but enjoyable. Here is what she says:

Greetings once again. How were your first cruising experiences? It's been a lovely few days for driving, so I hope you've been getting out and exploring the open road. Today we are going to add another layer of skills to those you have already learned, and we will be focusing on using interactive elements. These are the items on a webpage that allow you to actually do things on a website instead of just read and navigate around. They are useful for changing settings and options, filling out forms, and providing information. Your ability to use these tools will be crucial to your success on the web, whether you are ordering groceries on Peapod, commenting on the latest scandal in Washington, DC, or turning in an assignment to your professor on Blackboard.

Browsing with the Screen Reader: A Couple of Quick Reminders

Screen readers are an interface that sit between the user and the operating system/applications they are using. Remember from our earlier lesson that the screen reader is like your dashboard, and you interact with it to work with the webpages and applications you are using. This we compared to the road. You aren't touching the road directly when you are driving a car, but instead your car is interacting with it because of the commands you give it. However, not all of the commands and informational panels you have on your car's dashboard affect your involvement with the road directly. Sure, when you use a steering wheel, you move the wheels of the vehicle on the pavement, and you control your speed with the brake and accelerator. But there are many controls that give you information and don't change things. Your speedometer tells you how fast you are going, but it does not actually allow you to interact with the road. Instead, it gives you information about your interaction passively. Your car may tell you what direction you are travelling, the temperature outside, and the state of its engine. All of this information is useful and often necessary to be able to operate a vehicle on the highway but is not actually affecting your interaction directly.

Likewise, your screen reader also contains controls that allow you to interact directly with the web or applications and others that provide information only. On the internet, non-interactive controls are usually not able to be touched by a user, so text, headings, graphics, and other static information would be out of reach if the screen reader didn't have commands for allowing you to review and move among them. When you use these commands, you are not able to change anything. Instead, you are just reading and moving through elements visible on the screen.

The internet is a bit of a tricky place because it contains many elements that are static and cannot be changed. But many others that must be interacted with directly are there, so screen readers have been designed to run in a few different modes: read-only, read-and-interact, and heavy-interaction. Each screen reader has its own terminology for the different modes, so they are described below:

Read-Only

In JAWS this is known as the Virtual PC Cursor, VoiceOver calls it Quick Nav Mode, and NVDA calls it Browse Mode. No matter what you call it, these are the modes in which you are able to use the different letters on the keyboard to jump between elements like headings, links, graphics, and others. This is the mode in which you can read text without changing things and can review the info on a page with your arrow keys. In older browsing and screen-reading situations, these modes were pretty solidly separated from those in which the user could interact with items on the page, going so far as requiring the user to activate any interactive controls before they could use them. The traditional behavior of JAWS with Forms Mode prior to the introduction of automatic and semi-automatic forms mode falls into this category. Quick Nav is not the default behavior for VoiceOver and therefore is pretty strict about its use of this read-only review mode. But today JAWS and NVDA are a little more fluid about moving between this virtual mode and the one in which the user can interact most directly, usually when you arrow onto an interactive control.

Read and Interact

By default, this hybrid situation is one in which a user is able to tab between elements and have the screen reader activate them or arrow between them and only interact when they are focused explicitly. It is in many ways the actual default behavior for JAWS and VoiceOver today. NVDA's "browse mode" pretty fluidly switches into focus mode when an interactive element is encountered but seems to stay slightly more purely separated than either the JAWS or VoiceOver behaviors since it is still necessary to tab to any links the user wishes to reach.

Interaction-Only Mode

This is traditionally called "forms mode" in JAWS and "focus mode" in NVDA, and it's where you do things to interactive elements. You are using the website pretty directly, and the screen reader, other than reading you the information it programmatically gathers from the site, sits back and lets you interact in a manner very similar to that which a sighted keyboard user would employ. Tab, arrows, keypresses, and the use of Space, Enter, and Escape are directly (or nearly directly) handled by the browser.

There is another interactive mode known as "applications mode" which is being used on complex websites more each day. Normally you choose when to switch between reading and interacting, but in applications mode this is chosen for you by the website. To initiate this mode, a developer includes a special signal for your screen reader using ARIA to say that this section of the website should be treated more like an application (like MS Word, or iTunes) and less like a document. In this mode the section of the website that is seen as an application is interacted with directly, just like when you are using forms or focus mode to move between smaller elements. We won't see much of that in our explorations today, but it's important to be aware of applications mode because it changes everything about the way you use the web, and frankly your chances that a developer used it correctly and on the right elements are not great today. Knowing it exists and that you have a way to force your screen reader to try switching cursors or modes (JAWS key + Z for JAWS, NVDA Key + Space for NVDA, and toggle Quick Nav on and off for VoiceOver) will be important in our future lessons where we discuss how things sometimes go wrong on the web.

A Note about My Teaching Philosophy and How It Affects You

While we are discussing things that can go wrong on the web, I feel it is important to point out that today's lesson is based around proper, accessible, accepted patterns of behavior for interactive elements. I’ve chosen the examples I’m using today for the overall consistency of what you will experience. These websites are designed to work the way these elements should work with screen readers, and where they do not, I do my best to lay out how the interaction normally should go. Not every website is so well behaved, and we will be covering what to do when things break in future articles. For now, just keep in mind that for every rule I give you, there may be an exception.

That's the bad news, but please don't let it scare you off. Think of our lessons here like when you first learned cane travel, cooking, or any other skill. I've always likened these lessons in my mind to when I learned cane travel. I first learned to hold the cane, then how to swing it properly. I learned in flat, simple environments. Once I mastered the techniques, my travel instructor took me out to face weird street crossings, construction, and drops. Soon I was planning my own routes. Early cane users would be very lost, scared, and frustrated if they were confronted with a major construction site on their first day, but veterans will usually be fine. Well-skilled travelers probably won't enjoy dealing with messes, but they have a lot of experience and tools to help them confront those challenges successfully. It is my goal to build up your web skills so that you have that same ability to problem-solve in your virtual travels as effectively as you can in the physical world.

Traveling Through a Real-World Web Workflow

As I am writing this, spring is in the air, and preparations are ramping up for national convention. When this article is released, it will likely be June, and many of us will be making our travel plans to attend. This got me thinking: cruising is fun, but when people get in their cars to drive, they are usually driving for a purpose. In keeping with the theme of going places and traveling, I came up with the theme for this month's article and hatched what I believe is a truly delightful plan. Even if you read this article months or years after its printing, I believe that this plan will be of benefit to you, my loyal readers. Today's topic involves taking a tour of interactive elements with the screen reader. The mastery of these skills will allow you to put your hard-earned internet driving education to work. In fact, if you will forgive the pun, I believe that with the skills we will practice today, your internet usage will really "take off."

So, with no further air-headed jokes, I shall now reveal today's itinerary: we are going to go through the process of booking a flight on the Expedia (www.expedia.com) website and stop just after we've discussed each of the major interactive element types. Here's my reasoning: I know that the page is full of the most common interactive elements you are going to see on the internet, so we will spend less time wandering between examples and more on a coherent process than in last month's article.

Expedia sports quite an accessible page. I will not promise that each step is simple, but it is very accessible, so it will give you a nice overview without having to teach or muddle through a lot of exceptions to the rules of expected behavior on the road. You've done a lot of work to get this far, and I know that the first time that I booked my own travel online, it felt like a real accomplishment. I hope that for some of you this will provide that same boost I experienced.

I've had the privilege to partner with several of the developers from Expedia as they have worked to improve its accessibility, and I want to show off how well they've done. So grab your keys—um... keyboards—and let's cruise on over to www.expedia.com. Remember that from here on, I am using and describing my experiences with NVDA and Chrome. I'll let you know of any oddities I am aware of for other browser and screen reader combos, but, as in the last article, my ability to explain everything is greatly outstripped by the options available. I would recommend consulting your documentation to find how to accomplish the same goals with your vehicle of choice.

The Expedia Landing Page or Home Page

Every site has a home page or landing page. It acts as the reception area or lobby of the site. Like a hotel lobby, it gives you paths to access other parts of the property and usually includes advertisements, assistance, and major services of that site. You may hear the terms home, homepage, or landing page used interchangeably. You may occasionally find any of these terms being offered as links on websites you are browsing, and if you activate them, they will return you to the entry point for the site.

Upon first opening the Expedia site, you are greeted with the page title, "Expedia Travel: Search hotels, cheap flights, car rentals, and vacations." A well-built page will provide a similar title when it first loads. After all, how do you know what business you are visiting if there isn't a clear sign above the door? Feel free to take a few minutes to explore the page that comes up. Use the skills you have learned so far to see what information is provided and what you can do here. When you are finished exploring, meet me back at the "Skip to Main Content" link on the top of the page. Remember that you can quickly move to the top of a page with the keyboard shortcut Ctrl+Home on Windows, and Command+Up Arrow on the Mac.

Skip Navigation Links

From here we are going to activate the "Skip to Main Content" link to save ourselves from having to navigate the rest of the stuff above the portion of the page we want. Skip links don't always work, but this one is handled well, and it never hurts to try them if you know there is content you want to bypass. I'd guess they work about 50 to 60 percent of the time, so it doesn't hurt to give them a shot, but unless you know the page is well coded, I wouldn't plan to rely on them. To continue our hotel metaphor, the skip link is a lot like the bellhop. A good one will save you a lot of time; one that is not so good might just muddle things for you when you don't really need or want the help.

In this case the Skip to Main link moves us to a location labeled as "Beginning of Main Content," which is precisely where we want to be. If you arrow down, you will probably find an advertising link followed by a list with our first interactive elements—eight buttons.

Buttons

Good news! You already know how to use buttons. Buttons are used just like links. You can tab to them and press either Space or Enter to activate them. So why, you might be asking, are there both buttons and links if they both behave the same?

The answer is they aren't really meant to behave the same. It just sort of happens sometimes because of the way some pages are designed. In very broad and general strokes, links take you somewhere, and buttons are supposed to do something. A button might be placed at the end of a form to allow you to submit it. Alternatively, you might find one to clear your answers and let you begin again. By contrast a link would take you to a different page.

In our hotel, you will be taking the hallways (links) to go from the lobby (homepage) to your room. On the way, you will call the elevator with a button. The buttons here are doing things, while the links take you places. Even when you press the elevator button to go somewhere, you are doing so by making something happen first. Sometimes buttons won't change where you are at all; they will just set a process in motion, like if you call the front desk to ask for extra towels.

You will likely find situations in which links and buttons have been interchanged without much thought for the way each of them is meant to be used because a designer feels that the button or link would provide a better visual appearance to the website. The important thing to remember overall though is that you can interact with both elements in more or less the same way. If you are expecting a button or link and don't find one, it's worth looking for the alternate option instead. Keeping with our analogy, if you can't call the elevator, there's always the stairs.

The other thing to know about buttons that makes them different from links is that they have different states than links do. A link as you remember may be a "same-page link," "visited," or "unvisited." A button, on the other hand, will let you know if it is "pressed," "selected," "disabled," or may not have a specific state at all. Disabled buttons can't be pressed right now, possibly because the form they are tied to is not filled out properly or for other reasons you may need to investigate on the page. A selected button on the other hand is often found when you have a group of buttons you can choose from, and only one of those buttons can be activated at a time, sharing some similarities with "radio buttons," which we will look at later in this article.

In the case of this Expedia page, however, the list of eight buttons lets us choose which type of travel product we are looking for. They include the flights tab, hotel tab, and bundles tab buttons. When I loaded the page, it reported that the "bundles" were selected. Since we are searching for flights today, tab to the flights button and activate it. Now if you tab and shift tab through the group of buttons, you will see that the bundles tab no longer reads as selected but that the flights button does.

Simple as it sounds, we've now completed the button tutorial for today's class, so tab or arrow to the next place where we get a new element type.

Radio Buttons—There Can Be Only One!

Excuse me, I appear to have been channeling Highlander for a moment there, though the heading of this section is, in fact, accurate. Radio buttons are a group of elements which require you to make a choice. As soon as you have chosen one, any other you may have selected is automatically unselected. They get their name from the buttons you used to find on car and home stereos which would pop back out as soon as a different button was chosen. You may have seen this behavior in the old National Library Service tape player controls.

If you would prefer to follow our theme of travel today, you can imagine the radio buttons as a strip mall containing multiple sit-down restaurants, sushi next to Mexican next to a steak house. When you drive to the strip mall, you are going to one location, but you have to choose which cuisine you actually want. As soon as you have chosen one, you have chosen against the others. In the same way, when you enter a properly built group of radio buttons, you will find it is preceded by a question (the mini-mall) and that each button is connected to an answer for that question (the three restaurants). In our example today on the Expedia site, our question is "Flight type?" It also advises us that the option you choose will change the rest of the page below the set of radio buttons.

The answers you can choose are "Roundtrip," "Oneway," or "Multi-city." Today, we are going to choose Roundtrip. If you are using JAWS or NVDA, you can tab into the group of radio buttons from the buttons above it, and you ought to hear the question and the first answer, Roundtrip. Pretend for just a minute that you want to select a multi-city flight. If this is what you wished to do, you would not tab at this juncture. The buttons above are each completely separate items. Other than changing the selection the user wishes to make, they have nothing to do with one another. This is not how the radio buttons work. Instead, they function as individual parts of a whole. This means that when you tab from the first radio button in a group, the computer thinks you are done with the whole group and skips your other options. It is for this reason that when you encounter a group of radio buttons, you will enter and exit the group with the Tab key but actually make your selection with the Up and Down Arrow keys. It may be necessary to select one with the space bar. This will depend on the group of radio buttons and what they are coded to do when you first give them focus.

Feel free to practice selecting different radio buttons, then tabbing below them to see how the form below changes. When you are comfortable with the way this works, choose “Roundtrip” and tab into our next element.

Edit Fields, Text Boxes, and Editable Combo Boxes

Here we come upon one of the easier element classes to use but one of the hardest to describe. These are difficult because they all have approximately the same purpose, but each one is slightly different. It's a bit like clothes shopping at the mall. All the stores sell clothes, but you will find different sizes, different purposes, different rules, and all of them come with their own unique names (The Gap, Kohl’s, Victoria’s Secret, and Nordstrom all sell clothes.) That being said, at the end of the day in their myriad uniqueness, all of these elements share the majority of these basic traits. A text field, no matter how your screen reader identifies it, still contains text, or at least it will when you are done entering it. Basic interactions should be fairly straightforward. Tab or arrow into the field, listen for any formatting requirements, enter the text that is expected, and tab out again at the end. Your cursor should move at this point into the next element in the tab order.

And that's it. Everything else is just a little up to chance. Here's a list of some of the things you are likely to come across when you are moving through edit/text boxes/fields/areas/combo boxes.

Required: This box must be filled in to the satisfaction of the site, or you are not going to be able to move forward in the process.

Protected: Usually these are password fields, and you may hear synonyms for "protected," but it will come to the same thing. The text you enter in this box is almost immediately obscured to both sighted and blind users. If you attempt to review the text in this box, you will hear bullets, stars, asterisk, or dots instead of the characters you originally typed.

Editable combo box or has autocomplete: These boxes will offer suggestions in a list below the box which you can choose from based upon what you have already typed. This is the same type of box you encountered during the Google Search exercise in the last article.

Email/phone/date boxes: The newest forms of web design allow a developer to tell the browser what types of information they are expecting in an edit box so that smart phones and other devices with software keyboards can pull up keyboards which include necessary symbols for filling out these boxes. Other than changing your keyboard, these will work more or less like any other box.

Text areas or multi-line areas: These are big text fields, which are intended for holding more than a single value. They might be used for social media postings, essay answers, comment sections, product reviews, or anywhere else that the user is expected to write more than a couple of words. These boxes may be a little harder to extract your cursor from since the Tab key and Enter may be keys you would use when entering text in them. In these cases, you should be able to "escape" with the use of the Escape key (clever, isn’t it?).

With that basic overview out of the way, let's turn our attention back to the project at hand and look at the edit fields for where you are flying from and where you are flying to. Both of them read exactly the same except for how they are labeled, so let's unpack what's here: As we have discussed before, your screen reader may use slightly different terminology with some of these items, but the meanings will be the same: “Flying From/Flying to: edit, has autocomplete, required, city or airport.” (Well, that is quite the mouthful.)

Flying from (or flying to): This is the label of the form; essentially, this is the information they want you to put in the field.

Edit: This is the type of element we are dealing with. In this case "edit" means “please type in me.”

Has autocomplete: This means that once you have started typing you can switch to arrowing up and down a list of suggestions provided by the site and choose one of those. This can be extremely helpful when you are trying to fly to Albuquerque, for example, and have no idea how to spell it. Incidentally, I had no idea how to spell it. If it were not for Word's spell checker, I'd have had a very embarrassing example on my hands.

Required: Exactly what it says on the package. This information is required in order to complete this form and start the process of looking for a flight. If you don't fill this out, you will not be able to go on, and the website will throw errors your way.

City or airport: This is a hint the developers added to this field to tell you what sorts of information the field will accept.

You will regularly hear other hints on edit fields which might tell you what format a field expects an answer in or what types of info are accepted. Common ones include:

Format mm/dd/yyyy: when entering a date, use digits for the month, day, year, with slashes in between (example 01/01/2019).

Must include a letter, a number, and a special character: usually found when creating a password and occasionally a username for websites. This info tells you that your entry has to have letters (sometimes mixed between upper and lower case), numbers, and punctuation or other special symbols. We will talk about good password hygiene in another lesson.

Digits only: simple, they want the answer without spaces or other punctuation. You will find this most often with phone numbers or credit card numbers.

Now that we know what everything means, give filling out these boxes a try. Enter the nearest city to you with an airport in the first box, and when you get partway through, you should hear something like "five options are available use your arrow keys to select from the list." It may not be precisely this, but something similar will likely be read. Because of the complex wizardry being done by the website and your screen reader, it is possible that you will not hear this message. I did not while preparing this example. But you were given a heads up when the page mentioned an "autocomplete," so feel free to arrow down and see what options are available. When you have finished choosing or typing (both options work), tab and you will be placed in the "clear field" button that appeared upon your completion of this edit box. Tab once more and you will be in the "flying to" field. Rinse and Repeat.

Note: the clear field buttons are a nice addition created by Expedia that are not on most edit fields. If you need to clear other edit boxes, make sure your cursor is in them and that you are in your screen reader's interaction mode. Press Control-A for Windows or Command-A for Mac to select all, and then press Delete or just start typing. Your system should overwrite whatever was in the field with the new information you are entering.

Tables... and more!

Now we reach the most complicated element on the whole page, possibly in the whole process. Don't worry, you can handle it. It is in fact quite accessible, just involved. In fact we are going to deal with it in a few parts because it includes both an edit box and a table. Yup, you heard that right—edit boxes and tables—in the same element. Not to worry, Expedia has provided some nice explanations of how to handle this complex element, and it gives us a chance to talk about tables today as well. We will walk through it together now.

Departing Expanded: Enter a date or choose one from the table below

This is the section of the element that is an edit field again. It doesn't quite tell you that by calling itself an edit field, but it gives you the instructions to "enter the date" you want. Expanded tells us that this element has more going on and that it is open right now for you to explore. This element tells us that there is a table below, so we can infer this is the other piece of this element that is "expanded." If you still want to practice edit fields, go ahead and type the date you want to fly out in your imaginary trip planning and press Tab. Either way, do me a favor and press Tab.

Close the date picker or proceed to select a date button

Once again, it's a button. You know how to use buttons, but let's look at your options in a little more detail. “Activate this button to close the date picker.” If you do this, when you next tab, you will enter the "returning calendar/edit box combo element.” If you don't activate this button you can tab to continue into the picker itself.

Finally, because the picker is governed by being open or closed (expanded or collapsed), you can choose to press Escape to close it. Escape in this scenario has the same function as the "close" button above so that when you tab, you will move to the next field and not into the calendar. When you encounter expanded elements, or open lists, or generally want to leave an interactive element, the Escape key will be your friend. It will perform this function for most interactive elements and tends to do so without erasing your work. So, remember it is always a tool you can use when you need to step out of something gracefully or if you feel stuck.

Since we have looked at edit fields before and you are already old pros at buttons, let's take the opportunity presented by the date picker/calendar widget and learn a little more about tables.

Don't close the date picker. Instead, tab from that button into the next element available. It should read "next month button.” If you were to activate it, the date picker would move the visually available calendars ahead by a month and should announce what months are shown.

You can safely tab from this button as well and will find yourself in the first date button that is available. For instance, as I am writing this portion of the article, it's May 2, 2018. When I tabbed onto the calendar, I reached the button for today, May 2nd. Once again, there is a load of material here to unpack, so let's break down the information we are getting from the website: “May 2018 table with 6 rows and 7 columns, row 2 Wednesday column 4, 2 button.”

We have another compound element here. This is both a table and a button as you can see from the text above. We understand its function as a button, so for now we will just set that aside. Suffice it to say, you could tab to each button on this calendar until you reach the one you want, but that is not the fastest or most efficient way for you to use this control.

Tables sometimes get read oddly. This table is no exception. Since I jumped into the table already in progress as it were, I was given my cell coordinates, the name of the table, the cell contents, and what context could be gleaned all at once. Normally, when you enter a non-interactive table, you will get similar information upon first entering, but you will likely start at the cell at row 1 and column 1. This table breaks down in the following ways:

May 2018 table—this is the name of the table in question; it tells you what the table is about.
Table with 6 rows and 8 columns—these are the dimensions of the table; it is a grid that is six rows tall and seven columns across.
Row 2 Wednesday column 4—these are your cell coordinates. Since this is the first point at which you entered the table, it contains appropriate labels for the headers of the table (the overarching label for the column "Wednesday" was also read to give you context).
2 button—this is the value of the actual table cell you are reading.

With JAWS and NVDA, you can move through this table by pressing Ctrl+Alt+Arrows in the direction you wish to move on the table. If you want to move to May 10 for example (using my calendar, obviously your results will differ), you would hold the Alt and Ctrl keys and press down once and right once. When you reach the button you want to activate, you then could activate it the normal way.

Tables, in their most basic form, are just grids; you can navigate them very effectively with your screen reader's table reading commands. Each option has many more ways to navigate tables, so I am going to refer you back to your documentation for a more complete discussion of this subject. (If it helps, you can think of tables as very large parking lots. You can use lots of different methods for finding your car, including just walking up and down the aisles, but it will be a lot faster if you know you are in the fifth row from the front of the store and in the second column of cars.

Fast Forward

After the two calendar widgets, we find another fancy compound element. This item calls itself a list with one item and a button and asks about the number of travelers. It is currently collapsed. If you hit enter, it is expanded, and you will find buttons for setting the number of adults, children, and infants who will be flying. Everything in this element is familiar, as it is meaningfully a bunch of buttons, so I will leave it to you to play with. Let me know if you have questions.

Next we find a button for advanced options. It is also collapsed. Please activate it, since we will look at our last two element types in the advanced options below this button.

Checkboxes—For when you just can't decide and you want to have it all

Well, with all the traveling we've done, I'm hungry again. It's been a while since our radio button lunch. I have good news though. We've just arrived at a checkbox food court in the mall.

Checkboxes behave the same way as radio buttons with one major difference: you can choose more than one. When they are grouped under a single question (food court), you can choose multiple items under that question (McDonald’s fries, a shake from Dairy Queen, and a burger from Wendy's).

Sadly, this is not how our checkboxes are set up on this page on Expedia. Instead, each is under its own question and only offers a single option. "Non-Stop" and "Refundable Flight" followed by the checkbox and label associated with each. This is slightly disappointing as an example, but remember that essentially you can treat these the same as radio buttons when they are grouped together. Select all the ones you want by activating them with the spacebar. When multiple checkboxes are under a single question, once again you can arrow among them, choosing as many as you like.

List boxes/spinners/combo boxes

Our final stop on the tour today is at boxes that can be expanded or collapsed and used to select a value from a list of options. They are pre-populated with values, and you can arrow through the choices until you find the one you want. Depending on how they are coded, it may be necessary to open them first by pressing Alt+Down Arrow, or you may be able to just press Up and Down Arrows without opening them first. The best practice is to try opening them, but the way they are coded varies, and unfortunately this makes them some of the least reliable elements for keyboard users. On Expedia you can use them expanded or collapsed. Try both ways.

Following these elements (which let you choose the class of your flight and any preferred airlines), all that is left are a few extra checkboxes and the submit button.

Congratulations, you have now searched for a flight on Expedia!

Homework

With that, we've completed our tour of interactive elements for now. Of course, you will benefit from spending a bit more time, so... you knew this was coming. Your homework is to finish your flight booking up to the point where you would actually activate the purchase button. (I would recommend not activating that button unless you really want to go on the trip you created, though if you have somewhere to be... go for it!)

This assignment will give you ample opportunity to practice everything you've learned so far in what is a friendly environment. As you are working, remember a few things we learned today and through the course thus far:

You can use the Escape key to back out of fields and move back into the more "read only" screen reader interactions you may be used to on the web right now. Escape will also collapse elements that are opened and that you wish to get out of the way.

As you have seen throughout this article, there are often multiple ways to complete any task. Be flexible, and try multiple options when your first choice doesn't work. You will find that with practice, you will build a toolbox of your preferred interaction models, but you will also grow more accustomed to your backup strategies and make great strides just because you are flexible.

Pay attention to the clues being provided by the website. "Required" notifications, information on what should be in an edit box, instructions on how to complete a task, and the type of element you are interacting with can all give you massively important information on how to interact with the page in the most efficient way.

Remember to use headings and other navigational elements to your advantage as well. You don't need to read everything on a page, just the stuff that is relevant to you.

Be patient with yourself. If this is new, it can be frustrating, but if you come at it with a sense of curiosity and pay attention to the clues provided, you should have the tools you need to complete this task, no problem.

Of course, as usual, please direct any feedback on this article or any questions you have on further training resources or technology tools to [email protected], or feel free to get in touch with me directly and let me know how I can assist you further in increasing your driving skills.

For Further Practice

My dear students, I know that you are champing at the bit to continue your journey on the information superhighway, and I wouldn't dare leave you without more places to practice your skill with forms and interactive controls. As such, allow me to recommend spending time with some of the following:

www.target.com—shopping in your pajamas can be such a liberating feeling.
www.bookshare.org or https://nlsbard.loc.gov/login//NLS–because knowledge is power, and between these sites you have many books available to bring you that knowledge. All you have to do is search for them.
If a convention or another major NFB event is upcoming, try completing your registration online, or maybe order a free white cane.

The options are endless. Sadly, not all of them are as accessible as those recommended above... but that is a topic for our next meeting. Good work on today's assignment. I'll see you next month. Class dismissed!