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

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.

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

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
ex:
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 :)

SOME ACCESSIBILITY TIPS & TRICKS
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.