homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 64 message thread spans 3 pages: 64 ( [1] 2 3 > >     
Making your Site Accessibile
10 Tips to improve your sites accessibility
BlobFisk




msg:593227
 1:49 pm on Jun 12, 2003 (gmt 0)

10 tips and techniques for making your site accessible

Requirements of the accessibility needs of disabled (be it visually or physically or otherwise) and older users has long been neglected in web site design communities, although with the increased exposure of Section 508 of the Rehabilitation Act Amendments of 1998 (the recent penalty imposed on the 2006 Olympics website, for example) requirements and heightened awareness of the needs of disadvantaged users, accessibility is coming more to the fore.

However, much of the time it is treated as an afterthought, rather than being approached in a proactive fashion from the onset of the design and development lifecycle. I am currently writing a paper for a conference on this very topic, which is why I decided to post some simple tips and techniques that are easy to implement and will move your site closer to being truly accessible.

I've outlined 10 tips and techniques here that I feel are a good place to start on making your site accessibible. This information is out there and freely available but I thought it might be an idea to collate some of the more important ones and post them in one place.

Why should I make my site accessible?
Itís basic good manners! You donít put white text on a white background, as people wonít see it, so you should avoid using colours that are indistinguishable to people with colour deficiencies. About 8% of adult males suffer from one type of colour deficiency of some form Ė if your site uses a colour scheme that is not compatible with their colour deficiencies, theyíll leave. We do our utmost to support browser versions used by 2 Ė 4% of people! So we should be catering for this significant user group.

Itís also becoming the law Ė while Section 508 is primarily for governmental and state sites, I believe that soon enough we will see more formal moves that will mean all new sites should comply to some basic accessibility rules.

There is a large group of people with disabilities surfing the web. They may be interested in the content of your site, they might like to buy the product that you are selling - however, if your site isn't accessible you're loosing users and you're loosing sales... it's as simple as that.

So, what can I do? The 10 Tips..

1. Specify the language used on your page.
Very, very often overlooked! If you donít specify the language that the content of your page is written in, screen readers will make a stab at guessing it Ė and may well get it wrong. This is especially true of technical pages, or pages where the content is based on a topic that uses a lot of terminology or topic specific vernacular.

Tip: Simply using <html lang="en"> will do the trick!

2. Use descriptive page titles
Many screen readers have keyboard shortcuts that allows the user to toggle through the currently open windows by reading out the title of the window.

Tip: <title>My Site Name: Products and Services Page</title>

3. Additional Navigation
Papabaer [webmasterworld.com] recently flagged the use of the
<link> tag as an extra navigation for Opera and many will know it from using it to call in external CSS files. However, the link tag has a very important use in making your site accessible for people using screen readers, as these will be displayed (for want of a better word) at the top of the page. Try it! Put in some <link>ís and view the page in Lynx Ė it behaves similarly to a screen reader.

Tip: <link rel="Home" title="Home" herf=http://www.mySite.com/index.html>

4. Content on top
Many will know that using CSS to position your content at the top of the html code has may advantages in SEO, however, this is also a very important technique in accessibility. This means that people using screen readers do not have to scroll through the entire navigation of the site before getting to the content. This does lead us into the next point..

5. Skip Navigation Link
If the content on top option is not viable for you, then it is important to use a "Skip Navigation" link. Just add an anchor before your main navigation
<a href="#mainContent" title="Skip Navigation">Skip Navigation</a>, and have a named anchor at the start of your content <a name="mainContent"></a>. This allows users to skip the navigation and start chewing through your copy.

Tip: Obviously you donít want this on your visually rich page, so some simple CSS will sort this out:

.skipNavigation {
display: none;
}

This will hide it from the visual browsers, but it will display perfectly in text and speech browsers.

6. Colour
As mentioned above, cater for the ~8% of people with colour deficiencies. Flag your links clearly, for example green text and red links will be identical to deuteranopic (red/green colour deficiency) users. I always underline my links, but bolding and a good colour variation will do too!

Tip: Use the VisCheck [vischeck.com] online page checker to see how your page looks to people with colour deficiencies.

6. JavaScript Links
Again, SEO people will tell you not to do this as spiders canít/wonít follow JavaScript links. Similarly for accessibility reasons. Stats say that 11% of users browse without JavaScript, which includes disabled users whose browsers just donít support it.

Tip: Put the link in as normal in the href and run your script onClick, overriding the default action with a return false;
<a href="some/link.html" title="Link Title" onClick="runScript(); return false">The Link</a>

7. Link Titles
Needs no explaination really Ė does it!

7. Accesskeys
These are basically keyboard shortcuts to various pages on your site. Fully supported in screen readers and somewhat supported in visual browsers, by using ALT+ a number, followed by Enter, users can navigate directly to the page.
<a href="home.html" title="Home" accesskey="1">Home</a>. You can use it for your skip navigation too! There are some unwritten conventions for accesskey assignment: 1 is generally for the home page, 2 is generally for the Skip Navigation and 9 is generally for the Contact Page.

Tip: Many sites have accessibility statements that outline the accesskey values and functions. Have a look at the diveintomark dot org accessibility statement, as a good example of this.

8. Table Elements
Use table headers to specify the legend on data tables:

<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
</tr>

One of most omitted accessibility element is the summary on tables. This acts as a summary of the contents of a table. This summary is never displayed in visual browsers, but a screen-reader user will get a summary of the table before being read itís contents. Think of it as an ALT tag for tables! <table summary="A summary of the table">

9. Images
The alt tag goes without saying, but donít forget the
longdesc attribute. This is a link to a file (generally text, or text only html) that gives a more comprehensive description of the image that the alt text.

Tip: Image maps should always have an associated longdesc, to explain the contents and areas of the image map. Also, donít forget the title attribute on your <area> calls.

9. Fonts
Here I will emphatically say: Use Relative Font Units. This is an accessibility issue for users whose eyesight is impaired, but are not totally blind. IE will not increase the size of a fixed font unit (View > Text Size)

Tip: I've found that 80% is a good size to use for your body text!

10. Forms
Use labels! This allows visually impaired users to know what each form input element is for!

Tip: <label for="workPhone">Work Phone Number (Optional)</label>
<input type="text" id="workPhone">

HTH!

Anyone else got any tips and techniques that I'd missed?

<edit>Added call for other tips and fixed typos. And DaveN - in Cork, we always drink Murphys!</edit>

[edited by: BlobFisk at 3:45 pm (utc) on June 12, 2003]

 

creative craig




msg:593228
 2:07 pm on Jun 12, 2003 (gmt 0)

Tip: Use the VisCheck online page checker to see how your page look to people with colour deficiencies.

Never heard of that checker before, but sounds like a good thing to do!

Craig

BlobFisk




msg:593229
 2:59 pm on Jun 12, 2003 (gmt 0)


would you pls use ascii single/double-quotes?

Hi Xuefer - I'm afraid I'm not sure what you mean...!

Xuefer




msg:593230
 3:27 pm on Jun 12, 2003 (gmt 0)

hrm...
anyway, thx for your great post

seems u used locale IME that isn't English
" ' is ascii quotes
i don't know if they're the same in your system language as what u post
but it's indeed different in my browser
and i don't know how to help u type ascii symbols(punctuations)

limbo




msg:593231
 3:42 pm on Jun 12, 2003 (gmt 0)

Blobfisk

As one of my roles within our Intranet team I have to gauge the websites for use with accessibility software. This post will be taken to my next meeting!

This is why WW is so bloody unbelievably helpful.

niceone!

karmov




msg:593232
 5:30 pm on Jun 12, 2003 (gmt 0)

This is a fantastic summary of the bits and pieces of information I've been able to find scattered here and there. Thank you for taking the time to write that up! :)

g1smd




msg:593233
 9:57 pm on Jun 12, 2003 (gmt 0)

>> alt tags <<

cough*attributes*cough

>> <html lang="en"> will do the trick! <<

Is this equivalent or not? <meta http-equiv="Content-Language" content="en">

BlobFisk




msg:593234
 10:08 pm on Jun 12, 2003 (gmt 0)

Spot on g1smd - that should indeed read the alt attribute!

As for the Content-Language meta tag, I'm not 100% sure whether that's works as completely as the lang="en" on the html tag. In all my readings it's the lang attribute that is mentioned, so I'd be inclined to stick with that.

TheWhippinpost




msg:593235
 10:42 pm on Jun 12, 2003 (gmt 0)

Excellent post Blobfisk - I only today had a rant about relative font sizes.

I'd like to bring up table linearality. As we in the West read left-to-right, top-to-bottom, there is a danger, especially where tables have been employed for inappropriate use, ie...not tabular data, that screenreaders will not read out text as intended, and *visually* presented by the author.

It's similar to search bots (and if anyone starts yawning at accessibility issues thinking it doesn't concern them or isn't a commercial consideration to their clients, tell them that accessible websites means just that...accessible to SE bots and a wider platform of internet devices - Where was I!), it will enter the furthest left hand table column, read that column left-to-right and down, *before* moving over to the next column and so on.

1122
1122
1122
1122
1122

Visually, the text might read across cols 1 & 2 or you might have a header in col 1 that relates to col 2 but when read by the screenreader, the user does not percieve the connection.

There are several mechanisms that one can employ such as the use of Scope, axis, colgroup and id="" attributes.

The use of tables can become very tricky and need to be thought out more on a lot of sites out there.

[edited by: TheWhippinpost at 11:25 pm (utc) on June 12, 2003]

grahamstewart




msg:593236
 10:44 pm on Jun 12, 2003 (gmt 0)

Excellent post BlobFisk.

Sometimes proper accessibility is about knowing what NOT to put in the html as well.

For instance an alt attribute that says "spacer", "red ball" or "company logo" doesn't help at all and it just adds to the clutter of things to be read out. Instead if a graphic is purely for decoration then consider using the blank alt=""

Using 'clean' html always helps as well. In other words always try to use the correct tags for the job, don't get caught in the rut of always using <span> or <div> - remember there are other useful tags like <em>, <string>, <cite>, <address>, <ul>, <ol>

I find using a Strict DTD helps because it makes you focus on the document structure. Your page should always make sense and be readable even without a stylesheet applied. (Operas styles are usful for the - try the Emulate Text Browser one! Also see [favelets.com...] for a favelet to turn of all css styles on a page).

BTW you can use <label>s without havinf to explicitly specify the element they are for. e.g.

<label for="workPhone">Work Phone Number (Optional)</label>
<input type="text" id="workPhone">

could be written as..

<label>Work Phone Number (Optional)<input type="text" name="workPhone"></label>

Also note that you can use the lang attribute anywhere not just on the <html> tag.

<span lang="fr">c'est la vie</span>

grahamstewart




msg:593237
 10:48 pm on Jun 12, 2003 (gmt 0)

Oh.. almost forgot the <acronym> and <abbr> tags are also useful for all users (especially on technical sites) and using them will also help screen readers pronounce the word/letters correctly.

<acronym title="Laughs Out Loud">LoL</acronym>

yosmc




msg:593238
 12:55 am on Jun 13, 2003 (gmt 0)

Sorry for the dumb questions, but what on earth is a screen reader? What is it for? Who uses it? How many are there out there? 500? 500,000?

Thanks!

grahamstewart




msg:593239
 1:12 am on Jun 13, 2003 (gmt 0)

A screen reader is a software tool used by blind or partially sited users to read aloud information that appears on-screen.

There are two basic forms - 1) an OS application that reads out everything on the desktop and windows (including the browser windows) and 2) a "aural browser" which is specifically written to read out the content of websites.

Screen readers are also useful in other circumstances. For instance an in-car browser might go to a website and read out the news to you on your way to work.

See [w3.org...] for more information on alternative browsers.

papabaer




msg:593240
 1:54 am on Jun 13, 2003 (gmt 0)

I've been using "skip menu", and access keys along with fluid design for quite sometime now. I feel very strongly about Accessibility issues and quite frankly I have little patience for "designers" who are so incredibly "anal-retentive" about "positioning" as the end-all, absolute goal and sign of "coding supremacy" and yet cannot offer accessible content.

Positioning menus to display at the top of a page while placing the actual code at end of the HTML document is crap. I know, I was doing this over three years ago and use to think myself oh-so-clever! Accessiblity compliant? Hardly!

I won't even begin to explain the "philosophical shift" but perhaps reading one too many pleading posts where a webmaster just has to have his "page" display at 100% height, or he(or she!) has to have a table pefectly centered, or even the desperate cry for a footer that will ALWAYS be perfectly aligned to the bottom of the screen.... And yet, still, validation, good document structure, and accessibility issues are ignored.

Priorities. Paradigm shift.

Yes, I'm a bit of a hard-core evangelist. I keep my "skip menus" link visible in hopes that some will begin to consider accessibility concerns.

I even keep two forms of <link rel> navigation. One, the real one, is present in the HEAD element as should be, the second is offered "on-page" for those with "less enabled" browsers. Priorities...

Access keys are tremendously useful! But do remember to include a page that explains the accesskey assignments.

As an Opera user, accesskeys are not as crucial since Opera's own keyboard shortcuts are extensive, but for IE and Mozilla/Netscape users, access keys can be very useful.

Definitely avoid tables except for tabular data... and even then, lists might offer the better option.

For example, I have two pages in particular, one is an HTML character entity reference, the other a reference for HTML Named Colors. Both pages have many variants elsewhere on the Web, all (that I have ever seen) are presented in TABLE format. I use DEFINITION LIST elements for my presentations.

If you don't think there is much difference, try viewing comparable pages using the Opera 7's SMALL SCREEN RENDERING option (Shift + F11) or, simply with TABLES DISABLED. So much for maintaining important content associations!

I also believe accessibility and usability go "hand-in-hand." I don't even want to get started on DHTML MENUS and FLASH sites.... I'm outta here!

Peace!
- papabaer

grahamstewart




msg:593241
 2:09 am on Jun 13, 2003 (gmt 0)

Good point papabaer but..

Positioning menus to display at the top of a page while placing the actual code at end of the HTML document is crap. I know, I was doing this over three years ago and use to think myself oh-so-clever! Accessiblity compliant? Hardly!

I'm surprised at this.. I'm working on a hospital website at the moment and accessibility is one of the goals that I set myself.

I went for a 'content first' html markup, with the navigation appearing after the main text and then handled the positioning in CSS as you describe.

I was under the impression that this was the 'right thing' to do - let them get to the content first and then worry about where to go next. I feel that this best parallels how I read a webpage.

I supply both a 'skip to navigation' link (at the start of the content) and a 'skip to content' link (at the start of the navigation). And the document still makes sense when viewed without a stylesheet (all navigation link are in <ul> lists).

So why is that bad? *concerned*

papabaer




msg:593242
 2:24 am on Jun 13, 2003 (gmt 0)

G, I know you are doing some heavy reading at the W3/WAI - look for the section that recommends link "grouping."

I am referring to the practise of using position:absolute for SEO priorities over accessibility.

Menus SHOULD be offered first, as well as the option to bypass them. Hence the 'skip menu' link.

This provides options to "navigate/read" page/site menus immediately or, if desired, 'skip' directly to the content.

Using ACCESSKEY assignments can provide a means for any user to quickly RETURN to the main menu at anytime. The most accessible implementation would have the primary navigation menus appearing FIRST in the page code. Consistancy is key...

I prefer to have to menu tiers: one, the site-wide menu appearing first, the second, chapter/page/contextual menu second. SKIP MENU will bypass both, bring the user directly to actual page content. ACCESS KEYS can bring the user back to the menu as required.

Using SKIP MENU will allow users to both options, to browse the menu or the go directly to content, quickly... and consistantly. Win, win...

I understand your method... Skip, Skip. You are providing accessibility options, just adding an extra 'skip to' step.

papabaer




msg:593243
 2:39 am on Jun 13, 2003 (gmt 0)

One more point.. by adhering to "skip-nav/nav-first" construction, you eliminate the need for TABINDEX assignments. The 'natural' tab order will be maintained. Don't forget that for many, TABBING is a very important function. You CAN implement TAB ORDER, but if document/code follow parallel consruction, this is not required.

Remember, there are users who find even ACCESS KEYS physically challenging. TABBING may be their primary method of navigation.

grahamstewart




msg:593244
 2:54 am on Jun 13, 2003 (gmt 0)

Had a quick look at the url=http://www.w3.org/TR/WCAG10]WCAG[/url] pages.

Can't find any mention of requiring nav menu to be first. Only..

13.5 Provide navigation bars to highlight and give access to the navigation mechanism. [Priority 3]

13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. [Priority 3]

Which I do (my links are grouped in a ul list).
So I think I'm officially in the clear.

note: I do use access keys as well so the user can jump to the nav menu or start of content at any time.

Good point about the tab order tho, might have to have a careful look at that.

papabaer




msg:593245
 3:12 am on Jun 13, 2003 (gmt 0)

Graham, the method you use does provide accessibility 'options' -- you added the steps that might otherwise be overlooked.

The key benefits from "skip-nav/menu[block]first/normal tab-order" is simplicity and consistancy.

Navigating TO menus AND keeping track of TAB-ORDER can become rather complex in some presentations. Following parallel page/code construction is simpler and less prone to mistakes arising from needlessly complex schemes.

I have no doubt that your design addresses these issues meticuously. I know that is your 'style.' ...Sounds like a very thorough approach. :)

I just prefer the 'less-is-more,' K.I.S.S. approach. Both methods accomplish the goal of making CONTENT readily available, while providing quick access to navigation menus.

grahamstewart




msg:593246
 3:24 am on Jun 13, 2003 (gmt 0)

I know that is your 'style.'

Yup, anally retentive nerd.. thats me alright ;)

gilli




msg:593247
 3:36 am on Jun 13, 2003 (gmt 0)

Very nice post!

9. Fonts
Here I will emphatically say: Use Relative Font Units. This is an accessibility issue for users whose eyesight is impaired, but are not totally blind. IE will not increase the size of a fixed font unit (View > Text Size)

IE will scale pixel based fonts, but its kind of hidden away. Tools/Internet Options/Accessibility/Ignore font sizes - check the option and you should be able to resize anything.

papabaer




msg:593248
 3:37 am on Jun 13, 2003 (gmt 0)

LOL!
I suppose having T-Shirts made is out of the question.

But then, I bet the would sell like crazy!

At least within the <acronym title="anal-retentive nerd">ARN</acronym> community! ;)

jaski




msg:593249
 4:41 am on Jun 13, 2003 (gmt 0)

A gem of a post Sir. Although I must admit that I was not even aware of many of the problems for which you have given some excellent remedies.

Nick_W




msg:593250
 7:09 am on Jun 13, 2003 (gmt 0)

What a wonderful post, thanks blobfisk, you are a star! ;)

I have a question about the <link> tip if I may: When I tried your example in Lynx it worked fine, but when I changed rel="Home" to rel="Home!" (no reason ohter than to test it) it only worked on your example?

So, what 'rel's can we use and why? If i just put a row of navigation at the top of the page surely it would acheive the same thing?

Not being picky, just interested in how and why it works ;)

Nick

Chris_D




msg:593251
 7:12 am on Jun 13, 2003 (gmt 0)

Excellent post and a great thread.

Section 508 of the Rehabilitation Act Amendments of 1998 (the recent penalty imposed on the 2006 Olympics website, for example) requirements

I didn't see that? I know that the Sydney Olympics 2000 website (SOCOG) was successfully prosecuted under the Australian Disability Discrimination Act (DDA) (our 1993 forerunner to the Section 508 US Legislation) - but has there been another more recent case?

Anyone have a link?

Chris_D
Sydney Australia

ukgimp




msg:593252
 7:17 am on Jun 13, 2003 (gmt 0)

I find using UL's for menus as you get around the need for having a separating charactar ( [link] [link] or similar) then using css to get it looking like anice little button.

I may have missed it in the post but relative width tables when using them both for formatting and for the menu. Also relative widths lead to that nice fluid flow in both menues and content.

When you do have to use tables take everything out to go for strict doc type, colours, widths, borders etc.

Dont forget to have you accesibility statement, withouth one people may be at a loss not knowing what you have in place.

Use numbers instead of letters for your access keys as some of the letter have already been asigned.

Use opera to see how your page looks with an without styles quickly and easily. If you are doing it right you should get a nice vanilla page witouth and your rinky dinky one with.

There are a few more I will have to try an order them.

Good post Blibfisk, accessibilty is abig issue that some simply dont care about. Roll on law suits that make the suits sit up and say "Nice flash intro, is it accessible I dont want to be sued dont you know"

Cheers

ukgimp




msg:593253
 7:31 am on Jun 13, 2003 (gmt 0)

Chris_D

www.tomw.net.au/2001/bat2001.html

www.oten.edu.au/optionkeys/accessible/example.htm

There is quite a bit out there if you do some digging.
I read that they refused to put alt tags in claiming it was too difficult and expensive (remember A$700K being touted?). They basically said, we cant be bothered and it was that that got them a seeing to.

It does not take much to get to WAI A, or at least try and get get there. Trying to get there will get you out of a lot of trouble.

"It's a difficult job your honour, but we are trying"

will stand you in better stead than

"We have got a nice flash page but we cant be arsed with accessibility"

These sorts of issues are more important to the public sector (UK) right now as they are the ones who have a budget and will get a bashing. SENDA is the big one in the UK for accessibility in academia.
[hmso.gov.uk...]

I think people are hoping it will go away, it wont and to be honest I like that.

Cheers

jon80




msg:593254
 8:32 am on Jun 13, 2003 (gmt 0)

LOL

Look at the semi hidden keywords at the bottom of the Vischeck page

[vischeck.com...]

That's got to be in bad taste.

Hester




msg:593255
 8:46 am on Jun 13, 2003 (gmt 0)

BlobFisk - there were more than 10 points in your first post. Some numbers appeared twice!

Don't forget to use the map tag as well to group navigation menus.

Nick_W




msg:593256
 8:50 am on Jun 13, 2003 (gmt 0)


Don't forget to use the map tag as well to group navigation menus.

Please explain! ;)

Nick

This 64 message thread spans 3 pages: 64 ( [1] 2 3 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved