Basic Page Best Practice

Basic Page

Last Updated: 12/15/2011

Pages are the primary means for providing information to a user. A user can obtain news, run a search, navigate links, etc..

Challenges disabled users face with a page's layout are:

Navigating quickly to different sections of a page
Knowing where they are at within a page
Understanding the meaning of embedded content
Unable to increase page's text size
Difficult to see due to bad color contrast

Example

Download

New Window

Launch example in a separate window

Build It
Basic Test
Advanced Test

Make sections of a page easy to navigate to

Use header tags and ARIA's role attribute to mark-off sections on a page…

Header tags should be organized in the following manner:

<h1> - Page Title
<h2> - Section Titles
<h3> - Subheader
<h4> - Alerts/Errors/Search Listing

default.htm (excerpt)

<div … role="banner">
<h1>Page Header</h1>
</div>
…
<div … role="navigation">
<h2>Navigation Header</h2>
</div>
…
<div … role="main">
<h2>Central Content Header</h2>                
…
<h3>Subheader 1</h3>
…
<h3>Subheader 2</h3>
</div>

<div … role="complementary">
…
<div … role="search">
<h2><label for="searchBox">Search</label></h2>
</div>
 …
<h2>Sidebar Header 1</h2>
…
<h2>Sidebar Header 2</h2>
</div>

<div … role="contentinfo">
<h2>Footer</h2>
</div>

When you have a listing of common links on your page then provide a skip navigation link:

default.htm (excerpt)

<div id="header" role="banner">
<div class="skipNav"><a href="#centralContent">Skip to Central Content</a></div>
<h1>Page Header</h1>
</div>
…
<div … id="centralContent" role="main">
…
</div>

If you don't want the link to appear on the screen, use CSS to show and hide it based on whether or not the user has focus on it:

basic_page.css (excerpt)

/* Skip Navigation Link */
.skipNav {height:0;padding-bottom:5px;}
.skipNav a:link, .skipNav a:visited {font-size:0em; color:#D0D392;} 
.skipNav a:focus, .skipNav a:hover, .skipNav a:active {font-size:1em; text-decoration:underline; color:#009;}

Ensure links to content within a page properly shift focus

When an anchor link is selected you want to highlight and scroll to the target area so that a sighted user knows where the focus has shifted. Additionally, you want to ensure that when a keyboard user presses Tab or the Arrow Keys that the focus starts in the anchor's target area:

basic_page.js (excerpt)

/********************************************************/
/*   HIGHLIGHT & SCROLL TO ANCHORS   */
/*   requires jquery.color.js                           */
/*   requires jquery.easing.1.3.js                  */
/*   requires jquery.scrollTo.min.js               */
/******************************************************/
function highlight(elemId){
    var elem = $(elemId);
    elem.css("backgroundColor", "#ffffff"); // hack for Safari
    elem.animate({ backgroundColor: "#ffffaa" }, 1500);
    setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
    }
       
    if (document.location.hash) {
    highlight(document.location.hash);
    }
    
    /* Handle Anchor Links when selected */
    $("a[href*='#']").click(function(event){
        /* Override Link Href */
        event.preventDefault();

        /* Establish Anchor ID */
        var elemId = "#" + $(this).attr("href").split("#")[1];

        /* Scroll To Location */
        if ($.browser.msie) {
           var y = $(elemId).position().top;
           $.scrollTo(y, 2000, { easing: 'easeInOutQuad' });
        }
        else {
           $.scrollTo($(elemId), 2000, { easing: 'easeInOutQuad' });
        }
        /* Activate Highlight */
        highlight(elemId);

       /* Shift Focus to Anchor's Target Area */
        $(elemId).attr("tabindex", "-1").focus();
});

Embedded content is properly titled
When an <iframe> tag is used make certain that it has a title attribute:

default.htm (excerpt)
```
<iframe … title="External Tip"></iframe>
```

Text size can be increased

Use ems or percents when establishing a font-size for your page:

basic_page.css (excerpt)

html, body{
    font-size:100%;
    }

As an alternative, you can use JavaScript to provide the user with a means of increasing text size on the screen:

default.htm (excerpt)

<ul id="toolbar">
<li>Text Size: <a class="normalText" href="#normal" title="Normal Text Size">A</a> | 
<a class="largerText" href="#larger" title="Larger Text Size">A</a> | 
<a class="largestText" href="#largest" title="Largest Text Size">A</a></li>
</ul>

basic_page.js (excerpt)

/********************************/
/*   TEXT SIZE TOGGLE  */
/*********************************/

    /* Text Size Toolbar */
    var toolbar = {
        normalText: function () {
            $("html").css("font-size", "100%");
        },
        largerText: function () {
            $("html").css("font-size", "125%");
        },
        largestText: function () {
            $("html").css("font-size", "150%");
        },
    };

    $("ul#toolbar a").click(function () {
        switch ($(this).attr("class")) {
            case "normalText":
                toolbar.normalText();
                break;
            case "largerText":
                toolbar.largerText();
                break;
            case "largestText":
                toolbar.largestText();
                break;
        }

       /* Override link's href */
       return false;
    });

Ensure high color contrast is used
When settling on a color palette for your screen it's very important to ensure that any foreground color stands out well from the background. A good rule of thumb is this:
- for a light background, use dark text
- for a dark background, use light text
The easiest way to check for high contrast is by using a Color Contrast tool. Here are two popular products on the web:
- Vischeck
- Contrast Analyser

SSA Accessibility Best Practices Library

Basic Page

Example

Download

New Window

Keyboard

Keyboard

Visual Inspection

Visual Inspection

JAWS

NO TEST METHOD...

JAWS

NO TEST METHOD...

MAGic

Basic Page

Example Download New Window

Example

Download

New Window