Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Designing With Accessibility In Mind


  • Please log in to reply
8 replies to this topic

#1 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 29 November 2006 - 09:17 PM

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!

<!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:

<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

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.)

<link rel="stylesheet" type="text/css" media="screen" title="Main Styles" href="styles_fluid.css" />
<!--[if lt IE 7.0]><style type="text/css">@import "ielt7.css";</style><![endif]-->
<!--[if gt IE 6.0]><style type="text/css">@import "ie7.css";</style><![endif]-->

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:

<!--[if lt IE 7.0]><script type="text/javascript" src="scripts/iescripts.js"></script><![endif]-->

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:

// 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:
<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:
#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:

<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]

Edited by joedolson, 15 March 2007 - 12:25 PM.


#2 JohnMu

JohnMu

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3518 posts

Posted 30 November 2006 - 03:01 AM

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

#3 eKstreme

eKstreme

    Hall of Fame

  • Hall Of Fame
  • 3400 posts

Posted 30 November 2006 - 03:51 AM

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

#4 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 30 November 2006 - 04:18 AM

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.

#5 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 30 November 2006 - 10:44 AM

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.

#6 Liz AG

Liz AG

    Ready To Fly Member

  • Members
  • 17 posts

Posted 28 January 2007 - 02:00 PM

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

#7 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 29 January 2007 - 08:39 PM

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!

#8 paranoidandroid

paranoidandroid

    Light Speed Member

  • Members
  • 821 posts

Posted 11 February 2007 - 04:06 PM

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?

#9 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 15 March 2007 - 12:26 PM

Thanks, paranoid! You're right - I've edited the post to repair that.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users