[ Navigation | Content | Footer ]

A Focus on Focus

Test Page Three: Elastic-Width Using “em”

The purpose of this elastic-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” Div for this page has a CSS-defined property for a elastic-width of 42.15em. This measurement is in relation to the size of a “square” text as defined by the user’s settings. Jump to Content.

Navigation List

The “inner” Div for this floating navigation box has a CSS-defined property for a elastic-width of 14.69em.

It should be noted that the list above and this text is located in a division within a division on this page.

[ Top ]

How it’s set up

On this page there are several bookmarks (see the Footer 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 “Id.” 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 CSS 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 CSS 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.

[ Navigation | Top ]

The intra-page tab links and their respective bookmark targets on this page as are follows. Note the ones with a CSS-defined width property versus those that do not:

  1. Navigation: This points to an empty anchor bookmark located directly above/before the “Navigation List” heading. This is located in a nested Div with a defined width.
  2. Content: This points to an empty anchor bookmark located directly above/before the “How it’s set up” heading. This is located in a Div with an undefined width.
  3. Footer: This points to an Id assigned to the “This page’s tab-map” heading. This is a non-anchor bookmark inside of a Div with an undefined width.
  4. Top: This points to an Id assigned to main page “wrapper” division with its defined width. This is a non-anchor bookmark.

This experimental research web page was created by Mike Cherim in cooperation with Jim Thatcher and Liam McGee.
This issue was first identified by Jim; the CSS width property necessity was independently discovered by Becky Gibson and Mike Scott. Terrence Wood further determined that an object is focusable in IE Version 6.x when the “hasLayout” property has the value “true” (width defined in other words). Copyright © 2005-2017. All rights reserved. Validate: [ HTML | CSS ]