TJKDesign: Home Page
Powered by CSS
Guild of Accessible Web Designers Logo
Valid XHTML 1.0!
Section 508
Web Standards
Tables-less Layout
Frames: a solution or a problem?
XML Feed
NN4.7 Safe!

ez-css Putting the 'less' in table-less layouts. css-101 logo


Web pages on include 5 different areas:

  1. A header bar with tools and links,
  2. A left bar that includes the main navigation,
  3. A right bar,
  4. A main content area,
  5. A footer.

When styles are not applied to a document (or when using a screen reader), the 5 areas are read in the above order.

The first link in every document links to our home page. The second link is a "SkipNav"; it is to skip directly to what is considered the main section of the page (the content). The third link is to skip directly to the main navigation links.

The small icons that appear at the top right corner of each page are used to:

  1. Skip directly to the content section,
  2. Skip directly to the navigation menu,
  3. Set text size to 0"90%" - 3 columns layout,
  4. Set text size to "100%" - 3 columns layout, ***
  5. Set text size to "110%" - 3 columns layout,
  6. Set text size to "120%" - 3 columns layout,
  7. Set text size to "110%" and add contrast - 3 columns layout,
  8. Set text size to "100%" - 2 columns layout.

*** Default Settings.

It is normal that only the 2 first icons appear in non-modern browsers, the last 6 being of no use in old browsers.

Take note Cookies are used to store user's preference.

Access Keys Legend

Most browsers allow you to jump to specific links by typing keys defined on this web site. When the ALT+<access key> combination is received, the focus is moved to the element of the Web page that uses this access key .

On Windows: Alt + access key
On Macintosh: Control + access key

Skip past the navigation links to what is considered the main content of the page.
Take note "S" can also be used to get to the top of a document.
Attached to the "Accessibility" link in the menu at the top of this page [points to this document].
Attached to the "Home Page" link in the navigation menu.
Skip to the "NavBar" [attached to the Navigation menu].
Attached to the "Templates Page" link in the navigation menu.
Attached to the "3D Boxes Page" link in the navigation menu.
Attached to the "NavBars Page" link in the navigation menu.
Attached to the "Articles/Tutorials Page" link in the navigation menu.
Attached to the "Miscellaneous Page" link in the navigation menu.
Attached to the "Search" Box.
Attached to the "Contact Page" link. This page includes a Feedback Form.
Attached to the "Print Preview" link.

Take note Using the number pad may not work.

Additional Navigation Aids

Articles and Tutorials that include more than one page use the <link> tag to point to the previous and next document. All documents in the main section are linked to the Home page.

Netscape and Mozilla users can turn on the Site Navigation Bar to take advantage of these LINK-based navigation aids. ["View" menu, "Show/Hide", "Site Navigation Bar", "Show Only As Needed"].

FireBird and FireFox users can install a link toolbar extension, available at

With rare exceptions, pages on this site use structured semantic markup. H2 tags are used for subtitles. JAWS users should be able to skip sections by pressing ALT+INSERT+2.

Take note To ensure that event handlers are input device-independent, the w3C recommends (section 12.4) providing redundant mechanisms, as specifying two handlers for the same element; for example using "onclick" with "onkeypress". Unfortunately, as far as I know, this technique is counter-productive in browsers that trigger onkeypress values when the Tab key is pressed (in MSIE, the user needs to use the Enter key once the link has focus). This is a serious issue that puts an end to Tabbing Navigation as soon as the user reaches such link. I'm aware of the problem, but decided to go "by the book" and follow the W3C recommendation.
As a side note, if our navigation menu on the left hand side is "device-independant" it is because we chose not to use the onkeypress event handler.

Links for Web Designers about Accessibility

TJK Design is a proud member of the: Logo: Guild of Accessible Web Designers