homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

26 Steps to a More Accessible Website
Simple ideas to improve your site's accessibility

 5:27 pm on Jan 15, 2008 (gmt 0)

26 Steps to a More Accessible Website
Simple ideas to improve your site's accessibility

A lot of websites today have accessibility problems. Development tends to cater for the mainstream of desktop users without thinking of the impact that coding choices may have on users who find it more difficult to access and use your content. Many of the most common problems are minor, and can be easily fixed, and by taking some easy measures you can significantly improve the accessibility of your site without impacting on the look and feel or functionality.

So, inspired by an earlier post [webmasterworld.com], here's a few tips to make your site more accessible. The tips are not presented in any order of importance, and this is not an exhaustive list. But, if you implement just some of these changes, your users will profit - and because accessibility helps search engines, your rankings could get better too.

A. Alt text and alternate content

The first step is easy. Every image and object on your site should offer alternative text which describes or replaces the object itself. Make sure the alt text is informative, its role is to be a text equivalent of the contents of the image. Some very simple examples:

<img src="taj-mahal.jpg" alt="A photograph of the Taj Mahal">
<iframe src="weather-forecast.html"><a href="weather-forecast.html">Find out the current weather in Agra.</a></iframe>

If the image or object contains information which is not represented elsewhere on the page, then you must ensure that you convey the information in a non-visual way too. So if you show a graphic of a pie-chart showing important information, you should also offer the same information in a data table.

This brings us on to:

B. Transcripts of video content

There is more and more embedded video content on the web. But this can be a huge barrier to many. A real example: a local politician's website during an election campaign had three videos explaining their priorities. But if you couldn't access the videos, there was no alternative source. I couldn't view them, and I ended up voting for someone else.

As this is supposed to be a simple guide, I won't go into questions of captioning or codecs. But if you add a text transcript of the contents of the video, or even a summary of the important points, you will not only help users who can't access the video but you will also help users who just want to quickly scan the information. It will also allow the text to be indexed by the search engines. Everyone wins!

C. "Click here!", or descriptive link text

One trick used by screenreaders is to read out a list of links on the page. The user can then quickly jump to the information they need. However, doing this takes the links out of context, so you must take action to ensure that each link makes sense on its own. An example:

BAD: <p><a href="/taj-mahal.html">Click here</a> to read more about the Taj Mahal.</p>
<p><a href="/taj-mahal.html">The Taj Mahal: History and Architecture</a>.</p>

Using descriptive anchor text makes the links more valuable to search engines too, for much the same reason: it adds context to the link.

D. Space between links

It is very hard for accessibility software to read the contents of the page when there is no space between adjacent links. It becomes unclear where one link ends and another begins. This can happen in a badly-designed menu. The solution is to ensure there is always more than just white-space between each link. This can be done with a visible separator (a hyphen or dash), or by placing the links in a list and using CSS to style them how you want.

BAD: <a href="1.html">Page 1</a> <a href="2.html">Page 2</a> <a href="3.html">Page 3</a> <a href="4.html">Page 4</a>
<li><a href="1.html">Page 1</a></li>
<li><a href="2.html">Page 2</a></li>
<li><a href="3.html">Page 3</a></li>
<li><a href="4.html">Page 4</a></li>

E. No javascript: links

There's nothing wrong with using Javascript to enhance the usability of a website, but make sure that links are not dependent on Javascript. If you want to display some product information in a pop-up, use a plain link and override it with your popup action.

BAD: <a href="javascript:popup('/weather-forecast.html')">Agra weather forecast</a>
<a href="/weather-forecast.html" onclick="popup('/weather-forecast.html');return false;">Agra weather forecast</a>

F. Use the lang attribute

A very easy tip: make sure you declare what language you are using for the content of the page. If the whole page is in one language, just declare it on the HTML element:

<html lang="en">

If you have one part of the page in a different language, use the lang attribute to identify the section:

<p lang="fr">Ceci est en français</p>

G. No gratuitous animation

In 1998 this used to include the use of cheap animated GIFs of rotating globes or dancing babies. In 2008, this includes Flash animations and advertisements which fly around the page. Why is this an accessibility tip rather than a design tip? Because distraction makes the comprehension of the content of the page much harder for many users.

H. Don't depend on color

One of the most common accessibility problems is color-blindness. Red/green is particularly common, but other variations exist too. So, make sure your design does not depend on color to convey meaning. Do you have a pie-chart with red and green segments? Ask yourself whether your site would work in black and white: ensure you are using colors with a significantly different contrast so that users can differentiate them without seeing the colors themselves.

I. Captcha alternatives

More and more forms use a Captcha system to reduce spam, but this can stop genuine users with visual deficiencies from submitting the form. You must either replace or offer an alternative to a visual Captcha system. "Logic" systems which ask a question only a human could answer are becoming more popular, but that can reduce accessibility for those with cognitive disabilities. So keep these logic alternative as simple as possible, for example ask to type a particular word.

J. Labels on forms

This is both an accessibility and a usability tip: use label on forms:

<h4><label for="realname">Your name</label></h4>
<p><input type="text" name="realname" id="realname" size="35" maxlength="40"></p>
<h4><label for="email">Your email address</label></h4>
<p><input type="text" name="email" id="email" size="35" maxlength="40"></p>
<h4><label for="subject">Subject</label></h4>
<p><input type="text" name="subject" id="subject" size="35" maxlength="40"></p>
<h4><label for="comment">Your message</label></h4>
<p><textarea name="comment" id="comment" cols="45" rows="6"></textarea></p>

label associates the text with the appropriate field, so a screenreader user can understand which field refers to which question. label is particularly useful for radio buttons, as in most modern browsers you can click the label text as well as the radio button itself, so it is easier to use for those with motor deficiencies.

K. Accessible Tables

See the following guide: Accessible Tables - What to do and what not to do [webmasterworld.com]. If you are using simple tables for layout, it's not a big problem, but try to avoid using nested tables, as this makes it extremely difficult for screenreader users who have to listen to streams of table cell and row declarations.

L. Page structure: use meaningful headings

These two tips make on-screen comprehension much better, and can help the search engines too. Firstly, make sure you use the right HTML markup for you page and section headings:

BAD: <p><font size="5">My page title</font></p>
<h1>My page title</h1>

You can use H1 thru H6 to show the hierarchy of the heading of your page. Use CSS to style headings as you like.

M. Page structure: divide up information blocks

Imagine if I had written this post as one solid block of text - no-one would read more than the first sentence. The tips given for content in the original 26 steps guide [webmasterworld.com] are equally valid for accessibility - make your content easy to scan, easy to understand. Which brings us to:

N. Simple language

Don't try to impress your audience with your verbosity. Use simple words. Avoid buzzwords, legalese and technical gobbledygook.

O. Acronym (and abbr, cite, p, li...)

Use HTML elements to give meaning to your text. This is a continuation of using the correct headings, you should also use <p> for paragraphs, ul/li for lists, <acronym> for, well, acronyms: Organizational list HTML 4.01 elements [htmlhelp.com].

P. No meta refresh

Don't use meta refresh: either for redirects to another page, unless they are non-zero and offer a clear link to the next page for users who have refreshes disabled. Don't ever use a refresh to reload the same page regularly, as it puts screenreaders back to the beginning even if they haven't finished reading.

Q. noscript

Use a <noscript> for every significant instance of <script>. The <noscript> section will only be used by those with Javascript disabled. This includes search engine bots.

R. Relative text size

Browsers such as IE6 can't properly resize text with fixed pixel sizes. So use CSS to specify relative text sizes, such as ems or percentages.

S. Bigger font sizes!

This problem is even more common that color-blindness. Many users over a certain age cannot read small text without great difficulty. You may be comfortable with sub-10 pixel body text, but your users will abandon your site in droves, even if you have implemented relative font sizes as suggested above. Make your body text bigger, and use larger fonts such as Verdana rather than Arial to improve legibility.

T. Alternate stylesheets

With CSS, you can offer alternative designs for users with specific issues. Alternative stylesheets can be called by a simple Javascript function which uses a cookie to preserve the user's preferences. You can offer your page with larger or smaller text sizes, or maybe a high-contast version.

U. Skip to... links

Once you have split your page into digestible sections, you can use "skip" links for users with screenreaders or for users navigating via the keyboard rathen than mouse. For example, if the menu comes first on the page, you can have a link to skip to the main content - or vice-versa. One little-known point - these skip links should be visible not hidden, specifically for use by those navigating via the keyboard.

V. Page size/weight

Accessibility also means being able to access the page. Try to reduce the page weight (file size) as much as practicable. It will be quicker to download, it will be easier to parse (because you've cleaned up your HTML), and it will be easier to understand.

W. Add a sitemap (HTML not XML)

XML sitemaps are useful for automated access by search engine bots, but that doesn't mean you should abandon the old-style HTML sitemap for regular visitors. A well-organized sitemap can be used as a starting point for accessing content which is otherwise only linked in-page or via multiple clicks in the menu.

X. Check in Lynx

Want to get an impression of how your site might work in a non-visual environment? Download the text browser Lynx and see how your site functions (or not!): [lynx.isc.org...]

Y. User testing and feedback

If you have a site which is in any way interactive (ecommerce, etc.), then conducting user testing, even if on an informal basis, can help you identify problems encountered by real users. At the simplest level, ask family or friends of varying age-groups and technical abilities to accomplish simple tasks on your site. Watch carefully without intervening and take notes, then once the task is complete (or abandoned), collect comments on the user experience.

Z. Accessibility statement

Once you've implemented changes to your site, it's time to write an accessibility statement that users can consult. You can include a list of any accesskeys you have defined, outline what steps you have taken to improve accessibility, whether you comply to any published accessibility standards, and you can even solicit feedback from users on how to make your site even better.

The ideas above are designed to offer a selection of actions you can take to an existing site to make it easier for a wide range of end-users. There are many other lists which offer other ideas - see also Accessibility basics: tips and tricks to build an accessible website [webmasterworld.com] and Simple Accessibility Tricks [webmasterworld.com] in this forum, as well as Dive Into Accessibility - 30 days to a more accessible web site [diveintoaccessibility.org]. What would you add to the list?

[edited by: encyclo at 8:23 pm (utc) on Jan. 15, 2008]



 5:48 pm on Jan 15, 2008 (gmt 0)


Encyclo, Great post.


 6:30 pm on Jan 15, 2008 (gmt 0)

Excellent post encyclo. I was able to review it before it went live. Definitely well worth the read for everyone involved with the design, development and marketing of websites.

Take encyclo's 26 Steps, add it to Brett's 26 Steps and you have a Full Deck, don't you? All we are missing are the 2 Jokers. :)

Hey, we can call it the WebmasterWorld Full Deck. You know how Brett likes Vegas and everything...


 9:20 pm on Jan 15, 2008 (gmt 0)

OK, Who is going to write the algo that will output an accessible page from any non-accessible page?


 11:59 pm on Jan 15, 2008 (gmt 0)

Many users over a certain age cannot read small text without great difficulty

More than most people think. It's not just granny. Near vision can start going around age 40. But of course they resist getting reading glasses.

That means huge numbers of baby boomers are annoyed with small text plus some people who are even younger.

Don't forget about line height. A little extra css line height can help a lot with readability.


 12:05 am on Jan 16, 2008 (gmt 0)

Take encyclo's 26 Steps, add it to Brett's 26 Steps and you have a Full Deck

Finally, proof that some of us at WebmasterWorld are not playing with a full deck!

Encyclo, that's a superb post, but there is one item I'd like to quibble with:

N. Simple language

Don't try to impress your audience with your verbosity. Use simple words. Avoid buzzwords, legalese and technical gobbledygook.

The first bit is good, solid advice: "Don't try to impress..," but every time I see the 'use simple language' advice, I want to re-word it to say something like this instead:

Use the clearest language appropriate to your audience and subject matter.

This makes it clearer (to me at least) that terms like "categorical imperative," "catalytic convertor," and "mysqldump" are probably perfectly appropriate on sites dealing with ethical theories, car repair and command-line utilities respectively, but that the target audience is still a fundamentally important consideration when writing content...



 3:31 am on Jan 16, 2008 (gmt 0)

I constantly struggle with font size and keeping content above the fold.


 5:36 am on Jan 16, 2008 (gmt 0)

These 26 steps will definately help to all people who are optimizing their websites.


 5:36 am on Jan 16, 2008 (gmt 0)

I constantly struggle with font size and keeping content above the fold.

I did too up until recently when working with some new 3 column source ordered fluid designs. I made all the static navigation and visual stuff fixed. Everything that the visitor is there for, the primary content, is set at 100%/140% on the containment <div>. It makes things a whole lot easier in making the transition to 100% fluid.


 10:11 am on Jan 16, 2008 (gmt 0)

Great post Encyclo.

A. Alt text and alternate content
The first step is easy. Every image and object on your site should offer alternative text which describes or replaces the object itself.
May I just add that if the image is not significant or if it's an empty / spacer image, one should use alt="" and not omit the alt attribute otherwise screen readers will read the path to the image.

E. No javascript: links
BAD: <a href="javascript:popup('/weather-forecast.html')">Agra weather forecast</a>
GOOD: <a href="/weather-forecast.html" onclick="popup('/weather-forecast.html');return false;">Agra weather forecast</a>
If, like me, you've become '@nal' when it comes to content / style / behaviour separation, you could also use:
POPUP: <a href="/weather-forecast.html" rel="forecast">Agra weather forecast</a>
NEW WINDOW: <a href="/weather-forecast.html" rel="external">Agra weather forecast</a>

and in your external js file you have:

window.onload = function(){
if (document.getElementById) {
var anchors = document.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
//new window
if (anchor.getAttribute('rel') == 'external'){ anchor.target = '_blank';
}else if (anchor.getAttribute('rel') == 'forecast'){
anchor.onclick = function(){ window.open(this.href, 'forecast', 'width=220,height=165,toolbars=0,left=200,top=200,screenX=200,screenY=200' ); return false;
}// end if ... else if
}// end for
}//end if document.getElementById
}//end window onload

I would like to add to the list:

AA. Always validate forms using server side programming.
You can use javascript as well if you want but always use server side validation. And upon finding errors use a meaningful error message to let the people know what triggered the error. I like grouping the error message at the top of the form:
<p><strong>The for wasn't sent because it contains X errors</strong></p>
<li>You forgot to enter your name</li>
<li>The email address you entered does not appear to be valid, it does not contain a @ sign</li>

AB. Don't use - your own - Accesskeys.
User defined access keys [google.com] are the best - because the user will remember them and it won't interfere with possible browser settings.

AC. Use the CSS print stylesheet.
Some - older - people will prefer reading about your company / product / services on paper, so use the CSS print stylesheet and make it a large enough font on paper to be easy to read. Remove all the unnecessary parts of your site - like the navigation, ads etc... and use the width:98% (or 100%) on the body tag not fixed pixel width as it may not print all on one page then.

AD. Check your site with a screen reader
It's easy there are free ones: JAWS still does the free try out I think.

AD. Don't mess - too much - with tabindex
Let the tabs flow naturally on the page. I only use tabindex="-1" when I don't want the tabbing to go to the embedded list within my suckerfish navigation(s).


 10:19 am on Jan 16, 2008 (gmt 0)

Brilliant post :D


 11:26 am on Jan 16, 2008 (gmt 0)

wow - many imperatives that I didn't even think of. Good job.

2 out of the 26, D and J are not 100% clear to me.

D: there's a full set of tags around every link - not too hard to parse, I guess?

J: labelling makes the form more accessible - but many people don't even use "correct" names for form fields - (e.g. TEmail) but some random names to get rid of spammers. This seems to be a hard-to-resolve conflict of interest. Could we find somthing that helps in both aspects?


 1:06 pm on Jan 16, 2008 (gmt 0)


D: there's a full set of tags around every link - not too hard to parse, I guess?
This is for the Checkpoint 10.5 [w3.org] - using only space make it harder to differentiate links when the stylesheet is off.

J: labelling makes the form more accessible - but many people don't even use "correct" names for form fields - (e.g. TEmail) but some random names to get rid of spammers. This seems to be a hard-to-resolve conflict of interest. Could we find somthing that helps in both aspects?
To take encyclo's example:
<h4><label for="TEmail">Your email address</label></h4>
<p><input type="text" name="TEmail" id="TEmail" size="35" maxlength="40"></p>

The label uses the for="" and matches it against the form field id="" so you could have:

<h4><label for="yourmail">Your email address</label></h4>
<p><input type="text" name="TEmail" id="yourmail" size="35" maxlength="40"></p>

I don't think you can use capital letters in id's in xhtml though.


 2:29 pm on Jan 17, 2008 (gmt 0)

Here's Step No. 27 to a More Accessible Website:

When employing a list on a website -- particularly if you've identified the list as a numbered list, as in, for example, oh I don't know, say, "26 Steps to a More Accessible Website" -- use numbers instead of letters to identify items in the list, as in - 1 through 26 rather than A through Z. Much easier to figure out what number you're on if it's a number rather a letter.

But, as others have said, an A-1 list. Well done! :)


 9:43 pm on Jan 17, 2008 (gmt 0)

Thanks for explaining C. I knew it was good practice, but not why.

One comment on R. it is also necessary to use a layout that does not get broken by large text. The largest discount stock broker in Britain has navigation that disappears (UNDER the content, not even off to the side) if you have anything but a tiny minimum text size set in your browser. That is the orst example, but I come across a lot of sites that have text that disappears or overlaps.

Oliver Henniges

 12:04 am on Jan 19, 2008 (gmt 0)

I have always been a friend of the "conservative" approach of webmasterworld, and I profited a lot from the accessibility of my website as far as search-engines are concerned. So flagged this thread, yes, a great and concise summary, encyclo.

But what about "personalized" websites? With systems like ajax coming up, we are faced with another qualitative level of dynamics in website design. All you summarized, surely holds true for a visitor or spider showing up for the FIRST time. But on future websites, a human visitor might THEN design this website according to his own preferences, his own logic of perceiving things most efficiently? And yes, I am talking about single, bookmarkable URIs here, not whole sites.

Accessibility for screen-readers, lynx, or people with eyes getting worse every day (like mine), is one side of the medal. But the quick and easy and self-determined presentation of the desired information for the young urban professional with three 19 inch monitors on his desktop is also a question of accessibility, isn't it? He seeks ACCESS to information.

For instance, why not let your visitor decide how much white space he needs between links?

[edited by: Oliver_Henniges at 12:05 am (utc) on Jan. 19, 2008]


 9:13 am on Feb 28, 2008 (gmt 0)

B. Transcripts of video content

Wouldn't that be great. No more mp4s and streaming downloads. Just the transcript, right there.

Maybe online speech recognition will one day be up to it. It's so primitive and so tied to particular voices, now, one can't hope to use such tools in that way.

It is kind of a 'grail', auto-transcription as opposed to specific dictation.

E. No javascript: links

It's a good idea, where possible. But this great 'script divide' was somewhat noticeable in 2007. I doubt it will be as great in 2008

K. Accessible Tables

On older browsers, you couldn't nest past a certain level. Ideally, the complicated sliced tables use row and col spans, and not a lot of nested tables. But how easy are a bunch of non-intuitive row and col span placements going to be? I think what you see, now, is less of the old sliced tables, and more Flash doing the same sort of thing.

Some don't even like the idea of table, being a presentation tool as they see it. It's the ambiguity of HTML.

N. Simple language

This is ridiculous. Write the page you want to write. Period. You know your audience. What is - simple? Write what you want, how you want.

S. Bigger font sizes!

Again, set up as you like. If someone doesn't like, they can ctrl-mousewheel to change font size.

T. Alternate stylesheets

Not alternates - fixer sheets, like one needs for IE. So the main style is still used, but is overriden in part by selection of a 'plain text' sort of thing, or whatever alternate. You can use a number of "!important" overrides. You could even do the entire thing using script and the open-ended arguments property to efficiently modify the classes directly in script, with very few function calls.

W. Add a sitemap (HTML not XML)

Extremely useful, particularly as ones MAIN method of site navigation. It's easy to back out. It's difficult to get back to a specific page. A site map, or series of linked site maps, gets you where you want to go - VERY quickly.


 5:28 am on Mar 15, 2008 (gmt 0)

Superb post!

I have to mention a recent study I made regarding font size. A large number of people (different background, different age, different ... everything) were shown three different sites. The first had small text (10px font size). The second had larger text, but was still proportioned like the site with the smaller text. The third and last site had larger text as well, but now everything else was scaled up as well (more whitespace, etc).

The sample group all had excellent eye sight. About half were shown the sites on larger monitors (resolution above 1024×768). The other half used the 1024×768 resolution.

An overwhelming majority (90%+) preferred the third (and most usable/accessible) site.

Something important to remember. Large font is on the return, both in common design but in general UI design. It is regaining the popularity it lost years ago.

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved