Legal issues: in today’s internet orientated society care must be taken to ensure websites are not discriminative against impaired users such as the blind or partially sighted. Building websites which may be considered discriminative could lead to law suits which obviously we want to avoid.

Maximizing audience: the more accessible a website is the larger the potential user base, simple as that.

Maximizing potential for profit: the larger the potential user base is, the larger the potential customer base is.

Search engine compatibility: generally speaking a more accessible website is going to be easier for a search engine to index then an inaccessible website.

The 15 first rules for accessibility:

1. Write good source code

This is not necessarily required to build an accessible website but I feel it is a very important element of good site design so I’ve put it at the top of the list. Clean, well formatted code can save hours of headache, make it easier to find problems when something is wrong and provide a much stronger base for implementing accessibility changes and additions.

A good code structure often reduces the number of lines of code, meaning your pages will load quicker and use less bandwidth.

Weather it be XHTML, HTML, PHP , JavaScript or Cling-on, well written code is the foundation of any accessible site.

2. Use comments well

Good use of comments should be used to supplement well written source code. Comments should be concise and well written as they made end up being read by another developer or to an end user by a screen reader.

It is also advisable to remove any silly comments which may have been entered into your source code before release as they may cause confusion down the line.

3. Use a sensible page layout

This is just common sense really, there is no point having your main content in a narrow column along the left with a menu underneath and a bunch of images dotted about the page. Make sure your layout makes logical sense and your visitors can find what they are looking for without trying too hard. If a user can’t quickly discern navigation and main content they will leave.

4. Do not rely on visual elements (colors/images/video) to convey information

This point is obvious; if half your information is presented in images a blind user with a screen reader will miss half your information. Try to use text and CSS styling as much as possible in place of images, video and color information.

General Rule: Use visual content only as long as it does not contain information required to understand the content of the web page.

5. Separate styles and content!!

Separate your websites into styles and content, CSS and (X)HTML. This is important for well formatted code, ease of development and so that users with screen readers don’t have to listen to the styling of each object on a web page.

6. Give links context + titles

When creating a link try to create a meaningful caption for it, further more try to provide a label for the link.

DO:

<a href=”TideChart.php” title=“Tide Chart”>View our tide chart</a>

DON’T:

Tide Chart: <a href=”TideChart.php”>click here</a>

7. Use user-friendly URLs

Try and make your URLs follow a memorable pattern which makes sense to a human user.

DO:

http://www.site.com/en/plaster-board/large/index.html

DON’T:

http://www.site.com/en/pb/l/index.html

8. Use device independent scripts

You should be aware that not all users have a mouse, so if you are using triggers such as onmousedown you may wish to consider an alternative or you could use onmousedown in combination with onkeydown.

9. Use CSS instead of scripts for menus

Whatever you are thinking of using a script for on your menu be sure you can’t do it using CSS. A menu which uses JavaScript will cease to function properly if the visitor doesn’t have JS enabled.

#menu a {
	display:block;
	color:#791E27;
	text-decoration:none;
	font-size:1.1em;
	cursor:pointer;
}
#menu a:hover {
	display:block;
	color:#fff;
	background-color:#D92026;
	text-decoration:none;
	font-size:1.1em;
	font-weight:bold;
	cursor:pointer;
}

Remember you can easily create drop down, pop-up and fly out menus using just CSS and (X)HTML. Just do a good search.

10. Use aural CSS

If you think your site is likely to be read by someone with a screen reader there are some elements you can define in your CSS which effects the screen reader’s settings.
Some of these are voice-family, volume, richness, stress, cue-before, cue-after, pause.

11. Provide a ‘skip to content’ button at the start of the page

It is very common for websites these days to have a header and a menu at the start of every page. This means that users with a screen reader have to listen to your header and menu every time they go to a new page.

The solution to this is a ‘skip to content’ button or link at the start of the page. The link can be hidden using CSS.

<a href=”#main_content” title=”main content” class=”hidden”>Skip to main content</a>

Alternatively you could use an image containing only the background colour in the top left of the page to be your link.

12. Provide main menu access keys and an accessibility page

Access keys allow people to access your menu items using a keyboard short cut, great for people will no mouse.

<a href=”index.html” title=”home” accesskey=”h”><em>H</em>ome</a>

Note: I have surrounded the H in the <em> element which would be styled in CSS to make the H stand out.

em{
font-style:italic;
}

Create a site info page which lists the access keys on your site. This is where I also put my W3C validation badges.

13. Check the finished product with no CSS enabled

Disable your style sheet somehow and make sure your layout and content still makes sense. Get someone who hasn’t seen your styles-enabled site to do this too.

14. Validate HTML + CSS

Use W3C validators for (X)HTML and CSS, valid code ensures compatibility and the validation process will probably help you pick up any silly errors you previously missed.

15. Use relative sizes and positioning

Using relative sizes and positioning allows visitors to see your whole page regardless of their screen size/resolution/browser window size. Use EMs for font sizes, and % for page element sizes.

Things to avoid

1. Frames

Frames and iframes are a bad idea when it comes to accessibility because screen readers can often find it difficult to determine which frame is the main frame and focus can become confused.

Frames can also cause problems with book marking and the accuracy of URLs.

2. Pop-ups

Pop-ups are annoying and most users won’t see them anyway as most modern browsers have pop-up blockers.

3. Automatic refreshes and automatic re-directs

These are no good for accessibility. “this page will be redirected in 5 seconds”, what if the user can’t read that message in 5 seconds?

4. Placing distractions and un-related content on your website

Flashing text, random images and scrolling elements can be annoying as well as distracting for your visitors, meaning they don’t focus on the important content of your site, and probably end up leaving.

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Site Design For Accessibility – 15 Rules