Accessibility Navbar
7th Apr 2006
(oh no, not another accessibility tool!)
What is the Accessibility Navbar?
It's a must-have item for any self-respecting accessible website... um; well... really, it's a just bunch of links; but what a BRILLIANT bunch of links they are! The Accessibility Navbar sits at the top of the document (immediately after the <body> tag) thus giving prominent access to the important options a first time visitor may need.
This article shows how to create and implement the Accessibility Navbar into your website, including how to:
- Create the HTML for your Accessibility Navbar
- Implement a style sheet switcher
- Detect a mobile device and send an appropriate style sheet
- Create a low vision style sheet
- Consider other options you have in making your site accessible
A bit of background information first
Where did this crazy Accessibility Navbar idea come from? Well, my ongoing objective as a web professional is to build websites that work. Put simply, I aim for bullet-proof design that works on any device; never an easy task, considering the range of devices people use to surf the web: mobiles phones to Web TV to PDAs to screen readers to desktop computers. So this idea began with finding a method for detecting mobile devices and ended with the Accessibility Navbar.
So what's it made of?
The Accessibility Navbar is a bunch of hyperlinks, all of which can enhance the accessibility and usability of a website. Basically it's a style sheet switcher and some links to the important sections on a website, like Site Search, Accessibility Settings and Site Map; some of which you'll see at the top of this page. Here's an overview of all the links you could include in your Accessibility Navbar and what each link does:
- Simple - this link provides an alternative page structure, operated by a style sheet switcher. It drastically changes the appearance to a very simplified, single-column layout. There's very little in the way of declared style, instead leaving the default browser styles to dictate how the page is displayed. Will work best if the document is well formed and semantic. Ideal for small-screen devices. The style sheet is called handheld.css
- Low vision - this link provides an alternative page structure, operated by a style sheet switcher. This option changes colours, images and font-sizes to help users who may have vision disadvantages. The colours are highly contrasting with prominently dark backgrounds. Decorative images are removed leaving only essential graphics. The text size is increased to 130% of the browser default. The style sheet is called lowvision.css
- Default - this link provides an alternative page structure, operated by a style sheet switcher. This is the design that most desktop users will see by default. The style sheet is called whatever you normally call your default style sheet. I usually call it after the name of the site. In this case it's called theletter.css
- Navigation - a jump-to link for users to jump to the navigation on the page. Operated by an internal link.
- Content - a jump-to link for users to jump to the main content on the page. Operated by an internal link.
- Accessibility - a link to the page where you can inform your users about what accessibility measures you have undertaken on your site. It is also a good page to provide details of settings and changes the user can administer in order to improve the overall usability and accessibility of the site. Feel free to check out my Accessibility page and base your own on that.
- Search - this link can jump to an internal search box or to a focussed search page. As you can imagine, a search function on a website is extremely useful and probably not usually considered an accessibility feature. So, don't lose potential customers; give them every opportunity to find what they came for.
- Site map - a site map is essential on any site with a large number of pages (there is an argument for when to include a site map and when a site map is not necessary; as a simple rule-of-thumb I'd say that if your site has about seven or eight pages or less and those pages are all accessible via the main navigation or a footer navigation, then a site map is not required), especially if you can't provide a search function. A site map is an opportunity to list every important link on your site on one page. Also a site map is an important page to let spiders and robots index your site.
Of course this list isn't exhaustive nor is it obligatory; you can add or remove any links you see fit. For example, you probably wouldn't need a jump-to link for the navigation and the content, unless the page structure was very complex. Or, if you have an e-commerce site you may want to add in a quick-link to the shopping basket. Or if users are required to log-in then a quick-link to the log-in form would be useful.
Adding the Accessibility Navbar to your site
Here's the list of steps to follow to add the Accessibility Navbar to your site:
- Add the HTML for the links
- Create your style sheets (for handheld.css and / or lowvision.css)
- Implement the style sheet switcher
- Device detection
- Customisation to suit
Add the HTML for the links
The HTML for the Accessibility Navbar should sit immediately after the <body> tag. The main reason for this is to ensure that the navigation is available at the beginning of your document; and thus appears at the top of the web page when CSS is not used.
<div id="accessnav">
<a href="switcher.php?set=handheld" title="handheld">simple</a>,
<a href="switcher.php?set=lowvision" title="low vision">low vision</a>,
<a href="switcher.php?set=theletter" title="default">default</a>,
<a href="#content" title="jump to content">content</a>,
<a href="accessibility" title="accessibility">accessibility</a>,
<a href="search" title="search">search</a>
<a href="sitemap" title="site map">site map</a>
</div>
You may wonder why the code isn't marked up as a list. There are two reasons for this:
- To keep the links displayed on a single line when unstyled. This means that when you load up your site on a mobile device, you don't need to add extra styling to display the links inline or floated. When displayed as a list they take up too much room at the top of the viewport
- To make a clear differentiation between the Accessibility links and the navigational links
Create your style sheets
Well, I expect you've already created your default style sheet, so here are my recommendations to start you off with the handheld.css and the lowvision.css style sheets.
handheld.css
The best tip for any small-screen device is to keep your style sheet very simple. If you feel confident enough that your (X)HTML markup is good enough to be read naked, you could leave your style sheet completely blank. On the other hand, it's a good idea to declare your colours; so set your background and foreground colours to contrast sufficiently.
For The Letter I don't use a graphic for the main header (at the time of writing), so styling up the lettering is simple for a small-screen device. If you currently use an image, then you have two options: use content negotiation to send a plain text heading instead or set the width of your image to be 100% in your style sheet and that way the image will automatically re-size to fit the width of the reading device.
The following rules are an ideal starting point for your handheld style sheet. Feel free to change them as you see fit... just don't go overboard or before you know it you'll have a style sheet bigger than your document ;-)
//set defaults like main background and foreground colours and font properties
body{
font: 100%/1.2 Helvetica, Arial, sans-serif;
background: #fff;
color: #333;
}
h1{
margin: 0;
}
//for an embedded header image (this is assuming you
//have placed your image within an h1 tag)
h1 img{
width: 100%;
}
//otherwise for a heading with plain text
h1 a, h1 a:visited{
color: #c00;
font-size: 1.5em;
text-decoration: none;
}
h1 a:hover, h1 a:focus{
color: #fff;
background: #c00;
font-size: 1.5em;
text-decoration: underline;
}
//all hover/focus links
a:hover, a:focus{
color: #fff;
background: #000;
}
//all visited links
a:visited{
color: #777;
}
lowvision.css
A 'low vision' style sheet should primarily provide the content in a format that is very easy to read, i.e. a combination of larger than default text and high contrasting colours.
In reference to Joe Clark's Zoom Layout idea users with vision disadvantages sometimes prefer dark text on light backgrounds and others prefer light text on dark backgrounds. My theory then is that the lowvision.css is styled with light on dark and the handheld.css is dark on light... ultimately both provide similar single-column layouts. The only real difference being the text size and this can be adjusted by the user via their browser if required.
Here's a basic set of rules to start you off:
body{
font: 130%/1.2 Helvetica, Arial, Verdana, sans-serif;
color: #D8D1B5;
background: #3F351A;
}
h1 a, h1 a:visited{
font-size: 1.5em;
color: #fff;
}
h1 a:hover, h1 a:focus{
font-size: 1.5em;
color: #000;
}
h2{
font-size: 1.2em;
}
h2, h2 a, h2 a:visited{
color: #00BADF;
display: block;
}
h3{
color: #ffe400;
}
a{
color: #FFC31C;
}
a:visited{
color: #77A551;
}
a:hover, a:focus{
color: #000;
background: #fff
}
a img, a:visited img{
color: #FFC31C;
}
a:hover img{
color: #fff;
}
/* forms */
fieldset{
border: solid 1px #fff;
}
legend{
font-weight: bold;
padding: 0 5px;
color: #fff;
}
label{
font-weight: bold;
}
input, select, textarea{
font: 100% Helvetica, Verdana, sans-serif;
width: 75%;
padding: 0 2px 4px 2px;
color: #fff;
background: #695520;
}
input:focus, select:focus, textarea:focus{
background: #000;
color: #9cf;
padding: 0 2px 4px 2px;
}
input.button{
width: inherit;
width: auto;
padding: .5em;
color: #000;
background: #77A551;
}
Implement the style sheet switcher
To change the style sheets you need a style sheet switcher. Although there are plenty of techniques and scripts out there that could do the trick, I recommend you do your switching on the server-side; i.e. without the need to rely on scripting because not all devices can be guaranteed to support scripting.
The technique I use was originally based on an article by Chris Clark and uses PHP. Gez Lemon has detailed a similar method that uses ASP.
From the HTML above you'll see that link for the style sheet switcher points to a page called switcher.php. Appended to this link is a parameter called set with a value which details the name of the style sheet. Example:
<a href="switcher.php?set=lowvision">low vision</a>
The page switcher.php contains a tiny script which simply sets a cookie and then redirects the user back to the page they came from. Here's the code:
<?php
//delete the existing cookie
setcookie ("style", "", time() - 3600);
//get the name of the parameter set
$set = $_GET['set'];
//set new cookie
setcookie('style', $set, time()+31536000, '/', '', '0');
//get the page the user came from
$page = $_SERVER['HTTP_REFERER'];
//redirect them back
header("Location: $page");
?>
And in the head of my document I list all the style sheets I could potentially be using. The first line details the 'User Defined Style', which is set by the switcher (or by default on first page load - see Device Detection below). Set the new style by 'echoing' out the style variable as so:
<link rel="stylesheet" type="text/css" media="all" title="User Defined Style" href="css/<?php echo $style; ?>.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theletter" href="css/theletter.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="lowvision" href="css/lowvision.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="handheld" href="css/handheld.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" type="text/css" media="handheld" title="handheld" href="css/handheld.css" />
Before you even start to implement the device detection you need to ensure you've got the style sheet switcher working correctly.
Device detection
With 'device detection' I want to send small-screen devices a simplified style sheet without the user needing to load up the default style sheet first and then reload the appropriate handheld.css style sheet.
If all small-screen devices were able to detect the existence of a handheld.css style sheet, we wouldn't have any problems; unfortunately, only Opera Mobile / Opera-Mini can understand the media type "handheld".
So what do we do? Well, Cameron Moll produced a brilliant series of articles about designing for mobile devices, and this included one section on how you serve your website code to mobile browsers. He gave four options:
- Do nothing with your current code and let each browser deal with it in it's own way
- Serve your code without any styles
- Use handheld.css style sheets
- Create a separate mobile-specific site
All great options but it would have been nice he'd shown us a method that we could actually implement ourselves.
The W3C produced a document advocating Mobile Best Practices in January of 2006 which states many useful tips to providing content suitable for mobile devices, including things like:
- Organize documents so that they may be read without style sheets
- Always specify the size of images in markup
- Keep style sheets as small as possible
And again, they don't point to any examples we could implement ourselves to detect small-screen devices.
And finally, I looked at t he article Brian Fling produced which detailed device detection problems. And it was his idea about 'reverse device detection' which grabbed my attention. It involves grabbing the 'user-agent' string from the browser and, after ruling out the most popular browsers, serve up a simplified style sheet suitable for all other browsing devices. I'm aware of one potentially serious flaw with this technique and that's that some devices will be served a simple style sheet when they could be quite capable of handling the default style sheet. In this circumstance I'd prefer to send a simplified version to a more capable browser rather than the other way round.
So here's the script. You can save it as a separate file and include it, or stick it in the 'header include' of your web pages. Just make sure you include it before your page headers are sent. It checks for a cookie called 'style' which sets the style sheet to use. It sets one if it doesn't already exist. All you need to do is replace the name of the default style sheet for your site. I've called mine theletter.
<?php
//get value of style sheet cookie
$style = $_COOKIE['style'];
//if it's not set - then set it
if(!isset($style))
{
$agent_string = $_SERVER['HTTP_USER_AGENT'];
//this is a list of the most common desktop browsers which
//are capable of handling the default style sheet as defined
//by their user agent string..
//and we're sticking them into an array
$agent = array('Firefox/1', 'MSIE 7', 'MSIE 6', 'MSIE 5', 'Opera/7', 'Opera/8', 'Safari/4', 'Netscape/8', 'Camino/1', 'Konqueror/3');
//then we check each value in the array for a match
foreach($agent as $v)
{
$result += strpos($agent_string, $v);
}
//if a match is found a result of 1 is returned
//so we add up each result and store it in $result
//which means if $result is greater than 1
//we have a browser from our list above
if($result > 0)// the string was matched and hey presto! it's not a mobile or older browser
{
//in case they've simply changed the style sheet
//using the Accessibility Navbar
//delete existing cookie first
setcookie ("style", "", time() - 3600);
//then set new cookie called for the default style sheet
setcookie('style', 'theletter', time()+31536000, '/', '', '0');
//get the page that was requested and redirect them back
$pg = $_SERVER['HTTP_REFERER'];
if(!isset($pg)) $pg = "http://theletter.co.uk";
header("Location: $pg");
}
else//it's a mobile or older browser
{
//delete existing cookie
setcookie ("style", "", time() - 3600);
//set new cookie called handheld
setcookie('style', 'handheld', time()+31536000, '/', '', '0');
//get the page that was requested and redirect them back
$pg = $_SERVER['HTTP_REFERER'];
if(!isset($pg)) $pg = "http://theletter.co.uk";
header("Location: $pg");
}
}
?>
Caveats and other considerations to enhance accessibility and usability
- From my site statistics I've found that offering users the ability to change text size via a style sheet switcher is a waste of time. I currently provide this simple option on my business site (Doepud Web Design) and the links very rarely get used
- To increase usability, if you have large pages, it could be useful to repeat the Accessibility Navbar at the bottom of the page too
- Likewise, for large pages, content negotiation is useful and possible when you know if the requested page is intended for a small-screen device. It's quite simple to negotiate content too; using the scripts above, you already have a cookie value detailing which style-sheet the user has chosen (or been automatically served) so use this value to with some conditional statements (e.g.
<?php if($style=="handheld") //serve only important content ?>) - If you don't like the look of an extra strip along the top of your site, you can hide the Accessibility Navbar by default and show only when hovered over or focussed on. This technique is used quite commonly and can be found on The Web Standards Project and Molly, so check those sites to see how that works
Good luck! Any problems let me know.