The purpose of this -width page is to demonstrate the differences between certain web browsers and their ability — or inability in some cases — to retain page focus while a user tabs through the page using his or her keyboard. The “wrapper” for this page has a -defined property for a -width of . This measurement is in relation . Jump to .

How it’s set up

On this page there are several bookmarks (see the for a Tab Map). They are comprised of differing types and set within various divisions. Some of the bookmarks are distinguished by “name,” applied to empty anchors, while others are applied to heading elements or divisions and distinguished by “.” Some are set in page divisions with defined widths — either elastic, fixed, or fluid. Others are not.

The goal of these pages is to not only demonstrate which bookmarks function as expected using various browsers, but, more importantly, to also demonstrate which ones retain that ever-important focus to the keyboard-navigating user.

You should be able to hit “Tab” on your keyboard after loading a web page and, after grabbing title bar and page focus, be brought to the first anchor or link on the page. If you keep hitting “Tab” you will navigate the page from anchor to anchor eventually returning to your browser’s title bar. If you hit “Enter” on any of these tabbed-to anchors, it should send you to its target. If that target is on the same page, you should be able to then hit “Tab” again and maintain proper focus on the anchor next in line on the page in the same section as the bookmark — focus being confirmed by a white background on these pages.

In some cases, when using Internet Explorer most notably, this will not happen. Instead you’ll find yourself frustratingly back at the top of the page, in which case you will have to start tabbing through the page again. Not a lot of fun, especially to someone without the option of using a pointing device like a mouse.

What bookmarks produce favorable results and the ones don’t will, perhaps, seem quite random but it’s not so. Some divisions on these pages have their width properties defined in the assigned to that page. Examples are the Navigation Links division and the main page division itself. Whereas the footer and this main content divisions are not so defined. Note the difference of where you end up if you follow a link to these various divisions and then proceed to tab-navigate to the next link.

Divisions or “divs” are perfect in this application because they have no value, no meaning, and thus are perfect were no value or meaning is required. Please note, though, that any elements that are allowed the width property assigned to them will work in the same fashion. In other words, if you wanted to create a bookmark in a table header with a defined width — even if it’s simple 100% — you’ll get satisfactory results in IE.