Introduction
Welcome to another general Atechability Article! This article will be slightly different than the others you have read, because in this article, we will be covering web navigation. We’ll be going over all keyboard shortcuts and what each one does. Many screen readers have the same commands to do this, except VoiceOver on Apple products, wich will be covered at the end of this article. We will be covering the most commonly used keystrokes and a little bit of what each does.
Quick Notes
These commands work on all web browsers, as long as a screen reader is running. As long as you are on a web page that is accessible, (which most of them are) you can use these commands. The following commands are letters you press on the keyboard, which will move you to a certain point on a web page. A letter by itself, moves you forward an element, while adding the “Shift” key to the letter moves you backwards.
Forms Mode
when working with form fields like edit boxes, combo boxes, or lists, you must activate a special mode called “Forms Mode” on your screen reader to interact with these. To activate forms mode, Press “Enter” on a form field. For example, let’s say you are trying to type your name into a form. Navigate to the “Name” field, and when you hear “Edit” or “Text Field,” press “Enter” to activate forms mode. Your screen reader should either play a sound, or say “Editing” to confirm you are ready to type. Type as usual, and when finished, press “Escape” to exit. You can also press “Tab” to move through the form and complete the form that way. You will exit forms mode when you hit escape, or come across a button.
With these notes out of the way, let us begin! We shall go in alphabetical order for easier look up.
Annotations (“A)”
This element is useful when you want notes on a web page. For instance, let’s say a teacher is having you read an article on the web. If the site designer made small note sections on the web page, you can press “A” to move to the next annotation. In this case, they are used to check to make sure you are understanding the article, but they have many other uses.
Buttons (“B”)
You will see these a LOT, on a web page. Think of it as an imaginary button on an imaginary keypad. To move by buttons, press “B.” Press “Enter” to activate it.
Combo Boxes (“C)”
No, this is not a combo meal from a restaurant, I promise. This is just a fancy term for a list box. These typically have you pick an item from them, such as a month and year if you’re putting in an expiration date to a credit card, but many site designers use them in different ways. Press “C” to move to a combo box. Use the arrow keys to navigate through the items, and you can typically press “Enter” to select one. The item is automatically highlighted once you move to the one you want, but you can never be too careful with the “Enter” key to make sure it is highlighted. Also, sometimes, combo boxes don’t open properly. To resolve this, press “ALT+Down Arrow” to force open it. If that still does not work, contact the web developer of the page you are on if you can, and be specific as to where the problem is, and they should be able to fix it. NO LAWSUITS JUST FOR A COMBO BOX NOT OPENING!
Landmarks (“D”)
Landmarks on a page mark the start of a section. For example, a site can have one of these at the start of a menu, or it can go to the main part of an article. Press “D” to move by landmarks.
Edit Fields (“E”)
These fields are used when, let’s say, you’re filling out a form and they want your name, address, social security number, the last thing you ate, etcetera. You can input text into these fields normally. Press “E” to move by these fields.
Form Fields (“F”)
These are all the components of a form like buttons, edit fields, combo boxes, checkboxes, etcetera. Use “F” to move by form fields.
Graphics (“G”)
Graphics are simply pictures. Webpages can have pictures all over it, and a lot of them are unlabeled for screen readers. You may see something like, “Graphic 1234567890.” Some graphics can be clicked on to make the web site do different things, depending on the context. For example,a button can have a graphic on it. Press “G” to move by graphics.
Headings (“H”)
These are sections, and subsections of a webpage. All these letters of the article you see here are in sections. On other articles, you may see subsections where we go in depth on how something works, for example. Think of headings as a nesting doll. Remember those? Those toys were fun to mess with, for sure! No, it was not a doll. It was like a big container, with a smaller container inside it, and a much smaller container inside that, and so on until you found a very small piece. Well, headings work the same way. They have six levels in total. Press “H” to move by heading. If you know what you are looking for is in a subheading, use the numbers “One” through “Six” on the number row to move by that subheading level.
List Items (“I”)
This is similar to an item in a combo box, but sometimes web developers have a list as links on a web page. Use “I” to move by list items.
Links (“K”)
A link takes you to either a different part of a web page or a different site altogether, depending on the context. You’ll see these all the time, we promise. Use either “K” or the “Tab” key to move by links.
Lists (“L”)
These will also pop up quite a bit on many web pages. It is just like a list you would see on paper, and you can use that to highlight items, like the combo box. The same applies if you have an issue opening a list. The difference here is that a list can have check boxes, which we will explain later. Press “L” to move by lists.
Frames (“M”)
Do you ever get angry because you open a form, and it does not take you to it directly, and instead, it opens at the bottom of a web page? Are you trying to mute the political ad that you really do not care about on a web page when reading an article? These will sometimes appear at the bottom of the web page, and sometimes the screen reader does not notify you of this. Most of the time though, frames are used when an embedded video is playing on the web page. Press “M” to move by frames.
Static Text (“N”)
This element, to put it simply, moves you to text that has NO navigable elements on it, just like this text on the article you are reading. Press “N” to move by blocks of text.
Block Quotes (“Q”)
These are typically quotations on a web page, just like you would find on a research paper in school, where you’ll read the quote, and the source of it. Press “Q” to move by block quote.
Radio Buttons (“R”)
No, this will not play music. A radio button is a button you have to chek. For instance, think of the “Gender” field on a physical piece of paper. You have to check either “Mail,” or “Female,” right? Well, on a web page, the radio button is used to check that preferred item. This is just one of many scenarios where you will come across the radio button. Press “R” to move by radio buttons.
Separators (“S”)
This element literally separates things on a web page. For example, they can separate a web site’s menu from an article. Or, it can separate a form from the other parts of a web page. Press “S” to move by separators.
Tables (“T”)
Sweet, more tables for me to sit at! Oh, hold on a sec, nevermind. Some web sites can present information using tables, where you can move by columns and rows. Press “T” to move by tables. You can then press “Alt+Control+Up” and “Down” arrows to move by rows, and “Left” and “right” with the same “Control” and “Alt” keys to move by column. It is recommended to check your screen reader’s documentation on table navigation, since some screen readers may have different keystrokes to move through a table.
Visited Links (“V”)
If you did not know, your web browser keeps a history of the websites you have visited, unless you have turned that feature off. With that history, it also keeps the links you have clicked on before. The screen reader will say “Visited” if it detects a link you clicked on previously. Press “V” to move by visited links.
Checkboxes (“X”)
These are the legendary tick boxes you have on a paper form where you write a “checkmark” in the box when you are highlighting an item. On the computer, it is similar. Press “X” to move by checkbox, and press “Space” or “Enter” to check it. Don’t like the item you chose? No problem! Press “Space” or “Enter” again to uncheck it. You can check more than one box in some cases.
VoiceOver commands
As mentioned above, FoiceOver on Apple devices has slightly different commands for web navigation. To enable this feature, you must have a keyboard connected to your iOS device. If you are on a mac, this is not necessary. You must also enable single letter quick navigation by pressing “VO+Q.” The “VO” keys are the VoiceOver modifier keys, which can either be “Control+Option,” or, the “Caps Lock” key. Once you do that, these commands are the ones that will be different from the standard screen reader set.
- “F”: Frame
- “J”: Form Field
- “L”: Link
- “P”: Static Text
- “X”: List
As of this writing, there is no way to navigate to checkboxes, or combo boxes.
Using the Rotor On iOS
If you are using a touch screen, you can use the rotor to access a lot of these page elements. To configure what you can move by, find “Rotor,” in Voiceover’s settings. Enable the options you want to move by, and once you are happy with it, find a web page. Once you are ready, on the screen, do a “Two-finger Clockwise” or “Counter-Clockwise” rotation until you find the element you wish to move by on the page. Think of it as you turning a dial, but with only two fingers. For example, put your thumb, and index finger on top of each other. That is, the pads of the two should touch each other. Then, separate them from each other just a little bit where you can feel a small gap between the two. Rotate them on the screen this way, and you should be able to turn that rotor! It does take practice, but it can easily be done once you get the hang of it. Patience is a virtue. From there, “Flick Up,” or “Down” with one finger, and you will move forward or backward using the element you picked.
Forms Mode On Apple
To activate the forms mode feature on Apple devices, you can focus on the form field you are wanting to interact with on the web page. From there, you can either “Double Tap” with one finger, or press “VO+Space” on your keyboard. The field should then be interactable, whether it is an edit field, or another type of form control. If it is a list or combo box, VoiceOver will read it as a “Picker Item.” Do a one finger “Flick Up” or “Down” to move through the picker item.
Epilogue
What an extensive list, huh? Once you practice using all these commands, you will be navigating the web like a pro! We promise you, it will increase your productivity by a lot, rather than having to just arrow to the desired element. If you struggle with any of this, drop us an email, and we will be happy to help! Happy browsing!