Designing With Accessibility In Mind

A Community for Inspiration, Networking, Creative Web Sites and Vibrant Online Business

Cre8asite Forums > Read Only Archives > Tutorials & Virtual Learning

Designing With Accessibility In Mind, Considering accessibility begins with the first tag.

Options

Technical Administrator

Group: Technical Administrators

Joined: 8-March 06

Posts: 2,650

From: Minneapolis/Saint Paul, MN

Nov 29 2006, 09:17 PM

joedolson

PM
Card

So, this is my 1000th post. Being aware of the numbers involved, I figured I'd go ahead and make an occasion of it!

What's nearest and dearest to my development ideas, of course, is website accessibility: ensuring, as best I can, the ability of all users and devices to access the website's content. So I'm going to give a few tips on what I do to begin my design process which I think are helpful in terms of accessibility.

Preparing the Blank Slate

Every site starts with a blank file. Usually (not always, unfortunately...) I know from advance meetings what the general shape of the site needs to be. I know whether I'll 2, 3 or 4 columns of information: how complicated the navigation is likely to be, and where things generally need to go. Using that, I can create a completely empty template: unstyled. This is my playground.

Accessibility features are an inherent part of the design; not an afterthought, so the very first thing I'll start with is a valid doctype. I primarily work with XHTML 1.0 strict, although HTML 4.01 strict is perfectly respectable, as well!

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" dir="ltr">

So, I've specified my preferred flavor of XHTML. I've also cued the language of the document using two separate methods: an xml:lang namespace and the "lang" html attribute. Furthermore, I've specified the direction of the text as left-to-right. Is any of these going to affect many users? Nope. However, it's best practice: and if it's easy, why not start out right?

Next inline: meta information. There are certain meta tags I'm likely to put in every site: there may end up being more in the end, but these will always be there:

CODE

Description, content encoding, content language. (Getting repetitive, that language specification, isn't it?) Unfortunately, not every device acknowledges the same version of language spec: so it's best to add them all. It's useful so that, for example, screen readers will know how to pronounce your content.

Next up, I'll cue in the expected style sheets (and I'll create those files, too.)

CODE

I know that I'll be making exceptions for IE 6 and IE 7 - although it's certainly possible that I won't need any, it's not what I generally gamble on - and I'm not going to sacrifice a particular style I want just because IE doesn't do it right.

Now, I know that most sites I do will have a form at some point: and most of them will have at least one form field on every page: the search function. IE 6 and below don't acknowledge :focus or :hover on form fields. But I think that form focus is very important. In any design, I want to make certain that users can clearly see where they are buy applying different styling to links AND forms when those items have received focus.

So, I'll add in a little javascript file which helps with this:

CODE

The javascript I'm likely to use is actually a little script that Cre8asite member Mike Cherim wrote to go along with his contact form:

CODE

// Form field hover/focus script for Secure and Accessible PHP FContat Form v.2.0 by Mike Cherim

window.onload = function() {

// What elements do you want to assign which events to?
var objEvt = {
  input   : ["hover", "focus"],
  select  : ["hover", "focus"],
  textarea: ["hover", "focus"],
};

// spare use variables
var temp, tempLen = 0;

// hover/focus functions
function hoverFunc  (){this.className += ' hover';}
function unHoverFunc(){this.className = this.className.replace(' hover', '');}
function focusFunc  (){this.className += ' focus';
  // for url input content replace to http://
  if(navigator.appName.indexOf('Explorer')!=-1){
   if(this.value==this.defaultValue&&this.name=='url') this.value='http://';
  }
}
function unFocusFunc(){this.className = this.className.replace(' focus', '');}

for(var i in objEvt){
  temp = document.getElementsByTagName(i), tempLen = temp.length;
   for(var j=0; j<tempLen; j++){
    for(var k=0; k<objEvt[i].length; k++){
     if(objEvt[i][k] == 'hover'){
      temp[j].onmouseover = hoverFunc;
      temp[j].onmouseout  = unHoverFunc;
     } else if(objEvt[i][k] == 'focus'){
      temp[j].onfocus = focusFunc;
      temp[j].onblur  = unFocusFunc;
     }
    }
   }
}
}

I have placed it in a file called "IE Scripts" because I'm likely to attach additional functions to the script if needed for IE only functionality: these, however, will only come up later.

That's it for the document head. However, already we've got a good start on an accessible document because we've specified standards, language, and text direction - as well as having provided for good browser inter-operability.

When I get into the document proper, I'll either add the internal content skiplinks immediately (if they're going to be hidden), or I'll lay out the page structure. Most frequently, skiplinks don't get public visibility - so I'll include them now. While I'm at it, I'll include the basic
CSS that I'll add to the main style sheet at the same time:

XHTML:

CODE

<ul id="skiplinks">
<li><a href="#content">Skip to Content</a></li>
<li><a href="#navigation">Skip to Navigation</a></li>
<li><a href="accessibility.php#content">Accessibility Information</a></li>
<li><a href="privacy.php#content">Privacy Information</a></li>
</ul>

The exact links may be massaged; as may be the text: but the general idea is there.

CSS:

CODE

#skiplinks li {
list-style-type : none;
}
#skiplinks li a {
position : absolute;
top : -2000px;
left : -2000px;
}
#skiplinks li a:focus, #skiplinks li a:active {
position: absolute;
top: 10em;
left: 0;
background-color: #fff;
border: 2px solid #009;
display: block;
width: 7em;
padding: .65em;
font-size: 1.1em;
text-align: center;
color: #009;
font-weight: 700;
}
#skiplinks li a:hover {
background-color : #f3f3f3;
border: 2px solid #999;
color: #00e;
text-decoration: underline;
}

This is just a pretty basic scheme - probably won't fit with the design, but I'll just maneuver them around later, once the design is in place.

Finally, the structure of the page gets pulled together. The way I think about this is generally:

- Where should this information be structurally?
- Where do I want this information to be visually?

For this, I'll just do a basic two column layout:

CODE

<div id="outer">
<div id="header">
<h1><a href="">Site Header</a></h1>
</div>

<div id="content">
<h2>Page Header</h2>
<p>
Body paragraph.
</p>
<blockquote>
<p>
Information in a block quote.
</p>
<p>
<cite>Citation for quote</cite>
</p>
</blockquote>
<ul>
<li>Unordered list</li>
<li>Unordered list</li>
</ul>
<ol>
<li>Ordered list</li>
<li>Ordered list</li>
</ol>
<dl>
<dt>Definition term.</dt>
<dd>Definition definition.</dd>
</dl>
<table>
<caption>Table caption</caption>
<tr>
<th>Table header</th>
<th>sec header</th>
</tr>
<tr>
<td>Table cell</td>
<td>sec cell</td>
</tr>
</table>
<p>
<strong>Strong text</strong>, <em>emphasized text</em>, <a href="">linked text</a>, <acronym>ACRO</acronym>.
</p>
</div>

<div id="navigation">
<ul id="menu">
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
</ul>
</div>

<div id="footer">
<p>
Footer information.
</p>
</div>
</div>

And I've got my starting page. It's a blank slate: it can go anywhere from here. But I've run through most of the basic building blocks of a page to design and I've worked out the fundamental structure: from this point forward, I need to focus on not erecting barriers to usability.

The things I'll particularly keep in mind while I'm experimenting with the design are:

- color contrast (not too high, not too low)
- form and link focus, hover, visited, and active states
- clear delineation of sections

So. That's how I start a site. I may have a design concept in mind: but I start with structure and a well-formed XHTML document. This helps prevent me from making essential structural errors from the very beginning.

Hope this is at least somewhat useful for somebody!

Thanks for listening, Cre8asite.

-Joe

[closed id=outer]

This post has been edited by joedolson: Mar 15 2007, 12:25 PM

Offline

Hall of Famer

Group: Hall Of Fame

Joined: 3-November 05

Posts: 3,461

From: CHeeseland

Nov 30 2006, 03:01 AM

JohnMu

PM
Card

QUOTE

Hope this is at least somewhat useful for somebody!

Who are you kidding, Joe

I've been looking for something like this for a while now, thanks for taking the time to write it all up!

John

Offline

Membership Admin & Moderator

Group: Membership Admin & Moderator

Joined: 30-September 05

Posts: 3,265

From: Some round-ish rock floating in a vacuum.

Nov 30 2006, 03:51 AM

eKstreme

PM
Card

Excellent post! Great stuff, Joe and congrats on your 1k!!!! And thank you for your great contributions!

Sometimes, even with years doing this work, I feel I lost touch with the basics. I'll bookmark this just for those times

Pierre

Offline

Star Member

Group: 1000 Post Club

Joined: 29-December 05

Posts: 3,291

From: Novosibirsk, Russia

Nov 30 2006, 04:18 AM

A.N.Onym

PM
Card

Good stuff. It is always easier to start with a blank sheet and add those usable thingies (skip links) before, than to insert them in a complete website.

Offline

Technical Administrator

Group: Technical Administrators

Joined: 8-March 06

Posts: 2,650

From: Minneapolis/Saint Paul, MN

Nov 30 2006, 10:44 AM

joedolson

PM
Card

That's where I find a lot of people make their first mistake: by thinking of accessibility as something you add to a site after it's done, rather than as a normal part of developing a website.

As I've frequently stated, accessibility is easy if you do it right from the beginning, but it's a difficult fix to make. Changing a site to make it accessible is a lot more work than doing it right the first time.

Offline

Member

Group: Members

Joined: 29-December 06

Posts: 17

Jan 28 2007, 02:00 PM

Liz AG

PM
Card

Thank you for taking your time to write it so concisely. Having walked into lots of legacy pages written by former folks, we're "fixing" as fast as we can. But this is a great way to structure all our new work.

Liz

Offline

Technical Administrator

Group: Technical Administrators

Joined: 8-March 06

Posts: 2,650

From: Minneapolis/Saint Paul, MN

Jan 29 2007, 08:39 PM

joedolson

PM
Card

Thanks, Liz AG - I also wrote an article at Improve the Web which might be useful for you if you're doing a lot of conversion of legacy pages. The intention of my article "5 Basic Steps Towards Website Accessibility" was to help give ideas of paths towards accessibility which could be more easily implemented without doing a complete redesign, but still help users.

It can be a challenge to figure out ways of doing partial improvements when you either don't have the resources or the time for a full redesign!

Offline

Star Member

Group: Members

Joined: 8-July 04

Posts: 818

From: Lancashire England

Feb 11 2007, 04:06 PM

paranoidandroid

PM
Card

Great post Joe, that's exactly how I need to start working.

One minor thing, shouldn't there be another </div> to close that "outer" div on the 2 col layout?

Offline