Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

Accessibility basics: tips and tricks to build an accessible website

Tips and tricks to help build accessible and cross browser website

3:11 pm on Dec 7, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Ok, based on other threads on accessibility and CSS I thought I would share some of the things I do to make my sites more accessible. You will get CSS 'tricks' to help you build cross browser site more easily as well as some accessibility basics.

1. Use CSS import for the screen stylesheet
<style type="text/css" media="screen">
@import url(my-stylesheet.css);

That way older browser (4th gen and prior - Netscape 4 + IE4) that would end up messing up your site layout don't use the stylesheet as they don't understand the import command.

2. Use the CSS link rel for basic styling and for the print stylesheet
<link href="my-other-stylesheet.css" rel="stylesheet" type="text/css" media="all" /> (or media="print")

see point 1 for reasons on using only for basic styling and not layout.

3. Start your screen stylesheet with *{ margin:0; padding:0; }
I found this a year or so ago when I was stuck with list and margin / padding differences in IE and Ffox. Basically what it does is remove all the margin and padding that browser automatically set by default to elements. Then what you have to do is set the margin/padding in your stylesheet for every element (p, ul, ol etc...). It has saved me a great deal of time as each browser assign different padding and margin value to HTML elements.

4. Use a:hover,a:active,a:focus for all your links
a{ color:#03c; padding:.3ex .5ex; }
a:visited{ color:#639; }
a:active,a:hover,a:focus{ background:#06c; color:#fff; }

I use to only bother with a:hover when I designed sites to try and live it up my links (usually changing colours and removing the underline). Guess what, when you use your keyboard to navigate you can't see the element you are focusing on if you don't use the other two (:focus of standard compliant browsers; :active for non standard compliant - read IE). Try tabbing through your site now!

5.Use ems (for font size) wherever possible
I prefer to use ems and exs over %ages because I found it more accurate when you switch from one browser to the other. So basically I have:
body{ font:normal 100% Arial, Helvetica, sans-serif; }
and then use 1em 1.5em or .9em to define the font size. Tips: browsers even recognise .75em if you wish to use double digits.

I also use ems with CSS-P when resizing your font actually expand columns rather than just text. It's easy then to use top:5em to position elements. It's really a satisfying feeling to see your whole site fit your text rather than the other way round - I know I am a bit of a geek :)

1. Download a screen reader and listen to your site
[freedomscientific.com...] To download JAWS and listen to your site. I found that it had problems with words like 'homepage','sitemap',webdesign, etc... so I now use 'home page', 'site map' and 'WebDesign'. Try things out and listen to words you wouldn't pronounce the same way.

2. Do not hide links
I was guilty of hiding links by removing the underline and relying only on colours. Well try to imagine someone who can't differenciate colors and what they (it affect men mostly) sees are just shades of gray. Now go and find links on your site. You can't. So leave them underlined.

3. Do not hide visited links
I was guilty of this as well - using the same color for links and visited links. Well not anymore, especially on large sites. Keep your non-visited links blue and visited links purple ... if you can. If you can't use blue and purple at least use different colours.

4. Use form labels
This is the <label> tag. as in:
<label for="name">Name</label> <input type="text" id="name" name="name" value="" />. This allows for 2 things. First I can now clik on the text 'Name' and the focus will be place on the corresponding text field (or radio button, or checkbox etc...). The second thing is that the screen reader will read the labe with your form field making it easier to fill your form.

4. Use <abbr> for abbreviations
There is some talk about when to use <abbr> vs <acronym>. Don't bother. Use <abbr> all the time because accronyms are abbreviations. That will save you some time trying to figure out if radar and CSS are the same type of word. YES they are. They're abbreviation.

5. Use alt="" attribute
Do you think your visitors care about the corners, arrows, bullet, or any other left horizontal bar? Well they don't, so use the alt="" if you have them as images on your site. Personally I would use them as background in CSS so that when the stylesheet is turned off, you don't even see them :)

6. Use meaningful anchor text
Banish the click here and other read more from your site. When I tab through your links with my eyes closed using my keyboard and screen reader, I don't know what these relate to. So use meaningful words or phrases. Disclaimer: You'll notice that your search engine rankings will probably improve as a result, and I can't be held responsible for the extra sales or leads generated.

7. Use logical document strucure
Use one h1 and one h1 only. use as many h2's as you want. Use bloquote for quotes and <strong>,<em> to add emphasis to a word or phrase. The guys that developed HTML (or XHTML) have thought a lot about which tag to keep and which to drop. The ones that are in the current definition can help structure your page properly - so use them correctly :)

8. Use skip links
To skip to the important sections of your site. I usually have: skip to search, skip to nav, skip to content. That's it you don't need 50 skip links otherwise it defeats the purpose of skip links.

9. Design your sites using the Strict document model
This will stop the browser going into quirks mode and mess up your design - which is what heppens with the transitional document object model.

10. Don't open new windows
Don't use target="_blank" it's deprecated in the strict document model anyway (see point 9). But if you can't help yourself (or you are under contraint from a client), here is how I would do it:

<a href="http://www.mylinkedsite.com" onclick="window.open(this.href);return false;">this is a link that opens a new window without relying on javascript.</a>

That way people with js disabled will still be able to follow the link (in the same window) and people with js enabled will have it open in a new window. Note that search engine will also follow this link.

An even better way of doing this would be to use a rel="external" and have JS apply the window.open to all links with rel="external". I am afraid I don't have time to give you the code just yet.

Well that's all folks, please feel free to add you comments or your own tips and tricks.

4:26 pm on Dec 7, 2006 (gmt 0)

WebmasterWorld Administrator travelin_cat is a WebmasterWorld Top Contributor of All Time 10+ Year Member

FYI, for Mac users, built in to OSX is VoiceOver which, among many other things, is the ability to read web pages.

More on Apple's site here:

4:58 pm on Dec 7, 2006 (gmt 0)

5+ Year Member

fantastic post, really useful. added to favourites :)
5:01 pm on Dec 7, 2006 (gmt 0)

5+ Year Member

Talking of Tabbing through things
Lists of links can be a pain in text browsers
Use Named anchors to skip over them.

<a href="#skipmenu">Skip Navigation</a>
<li><a href="http :www.example.com"></a></li>
<li><a href="http :www.example2.com"></a></li>
<a name="skipmenu"></a>

5:02 pm on Dec 7, 2006 (gmt 0)

10+ Year Member

Great Post - le_gber!

Saved in my reference archive. Already making adjustments to my sites.


5:48 pm on Dec 7, 2006 (gmt 0)

5+ Year Member

Great info - I'd also add (more from the usability side than accessibility) that when you're forced to open a new window tell the user this will happen. I can't believe more sites don't use something like an image or notification text that tells us "new window" when clicking a link.
4:36 am on Dec 8, 2006 (gmt 0)

5+ Year Member

Thank you for all this. As I am new with web sites, it will help a lot. We need more guys like you.
Thanx again.
9:37 am on Dec 8, 2006 (gmt 0)

10+ Year Member

I had always assumed that the difference between ABBR and ACRONYM was clear (with respect to accessibility at least)

Am I right in thinking that screen readers will uses these tags to determing how to pronounce their content?

For example:
[abbr]CSS[/abbr] would be pronounced by a screen reader as 'initials' ie. "cee-ess-ess"

[acronym]RADAR[/acronym] would be pronounced normally, as a 'word'.

Clearly, there is a problem when using [abbr] for everything.

Consider the frustration of listenting to a document about RADAR, where every occurence of the word is marked up as [abbr]RADAR[/abbr].

[edited by: Panic_Man at 9:41 am (utc) on Dec. 8, 2006]

10:15 am on Dec 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

it shall be great if we just widen the scope of discussion a bit

Can someone of you just give brief idea of about various gadgets and how they are used by people with disability to read websites so that we know how things work and would be sorting our webpages giving best environment for them

i read this article and found it very informative

please excuse me if you feel am taking this discussion offtopic

[edited by: encyclo at 1:25 pm (utc) on Dec. 8, 2006]
[edit reason] fixed link [/edit]

10:18 am on Dec 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I believe panicman is right, abbr would be read as a word, acronyms are read letter by letter.

Examples of each would be:

ABBR: Contains 100 <abbr>Approx</abbr>. Would be read as a word - abreviation is using a shortened word for a longer word or phrase.

ACRONYM: This document is <acronym>HTML</acronym>. Would be read out letter by letter as each letter stands for a word (Hyper Text Markup Language).

They are not quite the same.

10:40 am on Dec 8, 2006 (gmt 0)

10+ Year Member

Wikipedia's definition of Acronym appears to support my theory:

Initialism originally referred to abbreviations formed from initials, without reference to pronunciation, but during the middle portion of the twentieth century, when they saw more use than ever before, the word acronym was coined for abbreviations which are pronounced as a word, like NATO or AIDS.


Initialisms (DVD, CSS, W3C, ATM etc.) are clearly distinct from Acronyms (RADAR, NATO, AIDS, LASER etc.)

10:51 am on Dec 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Panic_Man and PCInk,

actually no, both would be read the same - in Jaws they are anyway.

PCInk, you got the acronym vs abbr the wrong way round.

from the oxford dictionary:
acronym: a word formed from the initial letters of other words (e.g. laser, Aids).
abbreviation: a shortened form of a word or phrase.

Have a look on google [google.co.uk...]

That's why I said the differenciation isn't clear. You have over 1 million pages discussing the differences between the two and which should be used over the other.

Until all the browsers and screen reader support the aural styling speak:, I guess we are 'stuck' with the default setting in screen readers and testing our pages to see how it's pronounced.

11:11 am on Dec 8, 2006 (gmt 0)

10+ Year Member

Surely, the logical conclusion to all this should then be:

Long words that are shortened by simply removing letters eg. approx. should be marked up with [abbr] (with the title attribute defining the word in full)

Initialisms (BBC etc.) AND acronyms (RADAR etc.) should be marked up with [acronym] (with the title attribute defining the term in complete words)

CSS should then be used to distinguish the pronunciation of each occurence of the acronym tag for screen readers.

12:00 pm on Dec 8, 2006 (gmt 0)

5+ Year Member

Just some random bits

Using tab to navigate through the links on a site.
In IE7 FF2 this works ok without having to set tabindex on any links.
Opera9 this fails, you would have to set tabindex on links for it to work. Don't know if there's a work around in the config or another setting or button!
shift-tab goes to the previous link.

Drop down menus
These fail, or at least I cant get the damn thing to drop down when using the tab/keyboard only.
The only bit of reprieve is at least the url is displayed in the status bar.
So don't overwrite the statusbar message.

If anyone knows how to get dropdowns eg suckerfish working by tabbing through, would love to know.

Screen reader things.
The default one on XP "Narrator" doesn't read any text in a browser window - how dim is that. You can however copy all the text and put it into notepad and it happily reads it!

Opera9 has a voice feature, if you want it to read all the page just enable the voice and press CTRL-A then v. It also reads any alt text. Or for that matter any css hidden keywords!

Disable right click scripts.
You should be shot in the head for using these.
If you want to stop the non-web savvy in pointless ways do the transparent gif over background image trick.
Or even better understand the concept of if its on the web it can be copied.

Alternative style sheets, you could offer one with the same styling but with all color set to black and background to white for those a bit deaf in the eyes.

12:29 pm on Dec 8, 2006 (gmt 0)

5+ Year Member

me agian groan ;)

Nice little excel check list on the Royal National Institute of the Blind Web access page
See it Right checklist [rnib.org]

6:02 pm on Dec 8, 2006 (gmt 0)

10+ Year Member

Here's another tip.

If using a link to a PDF file make it known it is a PDF file. I get so angry clicking links to find out I have to wait.


Installation Information [team-mp3.com](PDF)

12:20 am on Dec 9, 2006 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member


Installation Information [webmasterworld.com] (PDF)

One minor issue with your excellent tip - screenreaders often offer a function to read out just a list of links on the page rather than the whole page text. This provides a useful shortcut for users trying to navigate through the site quickly. It is good practice therefore to specify that the link is to a PDF file within the anchor text itself, not just beside the link.


Installation Information (PDF) [webmasterworld.com]

1:20 am on Dec 9, 2006 (gmt 0)

WebmasterWorld Senior Member hobbs is a WebmasterWorld Top Contributor of All Time 10+ Year Member

3.Do not hide visited links

But pages become really ugly with blue and purple links.

[edited by: Hobbs at 1:21 am (utc) on Dec. 9, 2006]

4:04 pm on Dec 10, 2006 (gmt 0)

5+ Year Member

Don't open new windows?

Sure... I really want to:

a) confuse people who don't understand websites in to thinking that the page they are now looking at is part of my site after using a link to an external site (*even when* I have put a title value or note in the text to that effect), or

b) let people navigate away from my site, and loose their way back after following a few more links...

Whilst the suggestions are fine, remember, (most current version) browsers do have compatibility features that can override the HTML and CSS of the original page, so there is no reason to have to include every possible accessibiity trick and workaround. I have looked in to it, if you follow all the accessibility guides you almost totally loose the ability of original design and layout and have to revert to basic building block type page layout.

I'm not anti-accessibility (I have been a trained equality professional for years) as near as possible my sites will work and still have some originality and style. Even people with no disability have difficulty managing to use some web sites... and some web designers have not managed to write web sites that work for totally able people either!

7:22 pm on Dec 10, 2006 (gmt 0)

5+ Year Member

But pages become really ugly with blue and purple links.

c'mon, you know the answer. Set the pretty colour you want.

Although ... looked into colour blindness issues, you try getting some colour combinations to work, not going to happen. eg #808000 background, no foreground colour would get past all colour blindness issues.

My answer, well if I had colour blindness, i'd run the broswer with its own stylesheet.
So keep your styling in the stylesheets.

Don't open new windows?

Personally I think this is on its way out. Any links I click on these days is with the middle mouse button (new tab). Sure keyboard users could enable the same.

ACCESSIBILITY can be a pain in the.. but, it's not so much as your site can't have this or that. It's just your site has to be "ACCESSIBILE", so as long as it downgrades you should be ok.

Looking at a site I have with the skiplink I mention above, I use it with display:none works fine in text readers, opera voice reads it, Jaws ignores it!
Also use a dropdown like sukerfish menus, Tabbing won't drop the menu down.

My answer, sorry not changing it, turn the style sheet off, the site is accessible with stylesheets on or off and the order pages work. No it's not as pretty with stylesheets off, BUT ITS STILL ACCESSIBILE.

So with a dip into the accessibility basics, the site and order pages work with javascript on/off stylesheets on/off images on/off (although who in their right mind...) and due to dropping a few design tables and using css, you can browse the site at a screen width of 350px, the largest image. Pointless but true :p

And it looks exactly the same as it did before.
All that work and it looks the same. Why don't I feel good!

My dim brain even thought this: "I don't sell products suitable for the disabled."

Hmm, wonder if the disabled ever buy gifts for able bodied friends ;)

It's all about more customers/visitors.

11:56 pm on Dec 10, 2006 (gmt 0)

5+ Year Member

The same people who don't realise they have clicked a link to a different web site (if it's not in a new window) wouldn't know what to do with the middle mouse button - or how to enable it... let alone get used to opening new tabs.

Try and remember the 80/20 rule; 80% of people only ever use 20% of the functionality of any device.

(typo edit)

[edited by: RedTCat at 11:57 pm (utc) on Dec. 10, 2006]

4:30 pm on Dec 21, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Excellent post!

Allow me to make just one tiny correction ...

1. Use CSS import for the screen stylesheet

<style type="text/css" media="screen">
@import url(my-stylesheet.css);

That way older browser (4th gen and prior - Netscape 4 + IE4) that would end up messing up your site layout don't use the stylesheet as they don't understand the import command.

While that statement is true for NN4, it does not hold true for IE4. IE4 understands this:

@import [color=FF0000]url([/color]style.css[color=FF0000])[/color];

IE4 does not understand this:
@import [color=FF0000]"[/color]style.css[color=FF0000]"[/color];

Notice the difference? So, while you should still use

, define the file to be imported using double quotes and ditch the
type definition. It is valid CSS, and now IE4 ignores the imported stylesheet as well. :)

Featured Threads

Hot Threads This Week

Hot Threads This Month