Accessing Web Site Elements with the Keyboard

Firefox is completely keyboard-accessible, which means anything you can do with your mouse, you can also do with your keyboard. That's a pretty remarkable achievement when you consider all the things you can do with your mouse in a Web page alone: Select text on the page, click buttons and links, and select items from drop-down lists, among other things. All this is easy with a mouse because you can target the element you want to interact with using the mouse pointer.

Because you don't have this luxury when you're using the keyboard, you must first focus the element you want to interact with. Throughout this appendix, you can find a number of references to focusing and you might have wondered whether I've lost my mind. In fact, even though you might not have heard the term, the concept of focus is common to all software programs, and you use it all the time. When you focus an element (such as a text box or a Web page link), you are simply indicating that you want to work with that particular element by using the keyboard. For example, when you focus a text box, a flashing cursor appears in the box, and now you can begin typing. This example points out the three main questions that pertain to focusing:

• How do you focus an element with the keyboard?

• How does an element indicate when it has focus?

• What can you do with a focused element?

To answer the first question, you must be familiar with the concept of Tab order. When you target an element on a Web page with the mouse, you probably don't give much thought to how the page is oriented. You don't need to: The mouse pointer allows you to reach any element easily. However, the keyboard offers much less freedom, and so reaching an element takes much longer. You must focus element by element until you reach the one you want. You do this by pressing Tab repeatedly. Elements are focused in a left-to-right, top-to-bottom fashion (approximately), as I demonstrate in Figure B-4, and this is called the Tab order. To navigate elements in reverse Tab order (in a right-to-left, bottom-to-top fashion, approximately), you press Shift+Tab. The reason I say these orders are approximate is because unfortunately, Web designers have the final say over the Tab order of elements on their pages. Don't be surprised if the ordering seems erratic sometimes.

Figure B-4: Press Tab until the element you want to work with is focused.

REMEMBER 

Only one element can have focus at a time. The concept of focus is not limited to Web page elements; it extends throughout the Firefox interface. For example, clicking within the Location Bar focuses the bar so you can enter an address, and whichever element currently has focus (even if it's part of the Web page) loses focus.

To know when the element you want to work with is focused, you need to know how that particular type of element indicates focus. Of course, you'll also want to know what you can do with the focused element. Because each of these things varies among elements, I include a list of focusable elements in this section.

REMEMBER 

As if the topic of focus weren't complicated enough, the situation gets worse. Unfortunately, the Web designer ultimately has the final say over how a particular element on his or her page looks when it's focused. By default, elements have the appearances I describe in the following list, but the designer can override the appearance. For example, some designers indicate a focused link by bolding the text of the link instead of using a dotted rectangle. Because hundreds of possible styles are available for a designer to use, I can't cover them all; it's just something to watch out for. Fortunately, most designers stick to the tried-and-true defaults in the following list:

• Web pages themselves: As strange as it sounds, the Web page itself (the Content area) can have focus. You can scroll the focused page by using the arrow keys, or select text by holding Shift+← or Shift+→ (depending on the direction in which you wish to select). When text is selected, you can use the keyboard shortcuts listed in Table B-3, earlier in this appendix.

  Tip 

  When the Web page has focus, a particular portion of the page actually has the focus. Which portion is focused controls where selection begins when you use the text selection method I describe. To see which part of the page has focus, you can turn on a flashing cursor, just like the flashing cursor you see in focused text boxes. This is called Caret Browsing, and you can activate it by pressing F7, or by setting an option in the Advanced category of the Options window, as I discuss at the end of Chapter 16.

  Firefox focuses a page automatically when it finishes loading. If you then focus the Search Box or the Location Bar (by clicking within either), you can restore focus to the page by pressing the Tab key once or twice, or by clicking an empty spot within the page. Unfortunately, the Web page is the only element that doesn't indicate when it has focus (a bug we developers hope to fix soon). Try ↑ and ↓; if the page scrolls, it has focus.

  When the page has focus, pressing Tab focuses the first element within the page. Pressing Shift+Tab focuses the Search Box in keeping with the reverse Tab order of right to left, bottom to top.

• Links: When a link has focus, its text is surrounded by a dotted, rectangular border, as shown in Figure B-5. You can load the Web page pointed to by the focused link by pressing Enter. To load the page in a new window, press Shift+Enter. To load the page in a new tab, press Ctrl+Enter (Windows) or +Return (Mac). (Just as when you open a link in a new tab using the mouse, the new tab is not automatically selected.) To save the linked page to your computer instead of following the link, press Alt+Enter (Windows) or Option+Return (Mac), and then select a destination and filename in the window that appears.

  
  Figure B-5: A flock of focused elements.

• Buttons: When a button has focus, its text is surrounded by a dotted, rectangular border, as shown in Figure B-5. You can click the focused button with the keyboard (execute whatever command the button executes when clicked) by pressing the spacebar.

• Drop-down lists: When a drop-down list has focus, its text is surrounded by a dotted, rectangular border, as shown in Figure B-5. You can cycle through the other items in the focused list one-by-one, upward or downward, by pressing the up- or down-arrow keys. You can cycle through the list in intervals of 20 by pressing Page Up or Page Down. If the list has fewer than 20 items, Page Up selects the first item in the list, and Page Down selects the last. You can also press Home to select the first item or End to select the last, which works even in lists of more than 20 items.

• Regular lists: When a regular list has focus, the selected item in the list is surrounded by a dotted, rectangular border, as shown in Figure B-5. Because the selection color tends to be dark, this border can be hard to see, but it's there if you look closely. You can select another item in the focused list by pressing the up or down arrow until you reach it. To navigate the list more quickly, press Page Up or Page Down. You can also press Home to select the first item in the list or End to select the last.

• Text box: When a text box has focus, it contains a flashing cursor, as shown in Figure B-5. You can type text into a focused text box, and it is inserted at the location indicated by the cursor. To select text on either side of the cursor, hold down Shift+← or Shift+→ (depending on the direction of the selection) until the desired text is selected. Then you can use the keyboard shortcuts that I list in Table B-3, earlier.

• Check box: When a check box has focused, its box is surrounded by a dotted, rectangular border, as shown in Figure B-5. You can select or (if it's currently selected) deselect a check box by pressing the spacebar.

• Radio button: A radio button is similar to a check box, but it is part of a group in which only one option can be selected. Thus, radio buttons are used for mutually exclusive options. For example, many online forms use two radio buttons to allow visitors to specify their gender. (The name radio buttons is a throwback to old car radios, from which large buttons protruded. Pressing one button popped the other buttons out.)

  When a radio button has focus, its circle is surrounded by a dotted border, as shown in Figure B-5. You can select an adjacent radio button in the group by pressing any of the four arrow keys depending on the direction in which the other button lies. To select a button in the group that's further away, just continue pressing the arrow key until you reach it.