For word
Besides reading though the WCAG, this section aims to give you some easily implemented tips on improving the accessibility of your existing website without having to re-build and design from the ground up.
These guidelines are based uppon information from the See It Right publication from the RNIB.
Alternatives to images and sound
Deaf users can't hear audio files and blind users can't see the graphics used on websites, however specific tools used by these people can convey the images or sounds using alternative text, were provided. Text can be read out by screen readers or printed to braille, so by providing this alternative you can provide access to all users, regardless of any disabilities they may possess.
Using ALT text: The alternative text attribute of image tags should provide a textual representation of the image, conveying the importance or relevance of the image.
If the relevance of the image is the content it's self the alt text should reflect this, for example " A photo of my house".
If the image represents functionality the alt text should reflect this, for example "Search now".
If images are used as dividers or bullets the alt text should reflect the same thing, for example "-" or "#" for bullets or "---" for a divider.
If the image is eye candy and serves no purpose other than to be visually appealing, or the image is used as a spacer, the alt text should display "*".
For instances were an image is worth a thousand words and the alt attribute is clearly not an ideal replacement, the LONGDESC attribute or a "d" may be placed next to the image, linking to a page containing a detailed description.
Image maps can be made accessible by providing alt text for client side image map hotspots.
Video should be captioned, or an alternative provided, such as a transcript for the visual and audio content.
Be careful with colour
The use of color only to convey information is not ideal, there are a huge number of people using the internet who are color blind in addition to the partially sighted or blind users. Using a different color for links may not be as useful as underlining for example.
Make sure there is a good contrast between the background color and the text. A good way to text for this is to take a screen shot of your page and turn it into a grayscale version using an application like Photoshop. If you find it hard to distinguish between the background and foreground try different colours until a solution is reached.
Use valid HTML and CSS
It is important to separate your content structure from how it is visually represented. Some tools used by disabled users can give an overview of the page based on the underlying structure, i.e. headings, lists and quotations.
Ideally HTML should be used to structure the page and CSS to format it visually.
Headings: Use HTML heading tags to display headings, doing so will allow a screen reader to identify text as a heading, CSS can be used to modify these headings into the desired font and size. Using heading tags to increase text size can be misleading and is invalid in the HTML standards produced by the W3C.
Lists: Use lists to display listed data, not to provide a left margin. CSS can be used to provide margins to text.
Block quotes: Again the blockquote tag should be used for its desired effect and not to provide formatting of text where CSS could be used more effectively.
Identify your language
Identifying your language may not seem necessary to most people, but to users reading your website via a screen reader it is. You English website may be very hard to interpret by screen reader set to read Spanish. The LANG tag can also be used around phrases or words that require different pronunciation.
The ABBR tag for abbreviations and the ACRONYM tag for acronyms should be used where appropriate, this will allow screen readers and braille software display the correct information. This feature will also most likely help your sighted users too.
Table manners
The over use of tables being used to position pages can lead to problems with screen readers which read across the rows, this should be taken into account if tables are being used for structural reasons. It is a sensible idea to look into using CSS instead of tables, allowing the user to disable the CSS and access the page content in a single column layout.
When using tables, aim to make them as accessible as possible, aim to structure them in a way that, when read out cell by cell the content makes sense. If using tables for tabular data make sure to use the available HTML attributes to give them as much meaning as possible, the SUMMARY attribute can also be used to provide a brief explanation of what is being displayed.
Don't get over flashy
Not everyone has the latest technologies, some choose not to install them, others have not choice. Technologies such as Flash, Videos and Java applets can be a great way at conveying information, however they are pointless unless you audience has the correct program or plug-in installed.
Flash: In the same way that alternatives can be offered to images the same can be done for new technologies. Websites like ALA have great articles on providing an image alternative to flash. Flash navigation should be supplemented by a textual version of the navigation.
CSS positioning: The HTML of your website should be structured so it makes sense without the CSS, the navigation should come first or a link to skip navigation should be provided.
Java Script: Java Script should not be relied upon for essential page functions, server side scripts should be used when possible. If java scrip is used for link a non java script version should be provided as an alternative.
Frames: Some browsers cannot handle frames, and screen readers can struggle to get the best of them. If they are used make sure they have relevant titles and the NOFRAMES section has the navigation it needs.
Moving content:
Scrolling text can often move too fast for those with bad eye sight and is imposable to access for screen readers and braille users, therefore it is bets to keep these features to a minimum and use them in addition to other information.
Refreshing content may refresh before users have read it, especially in the case of braille print outs. Blinking and moving content should be reduced to a minimum and may be very distracting to some users.
Be device-independent
Not all users are able to or choose to use a mouse, not all of them can view the content on a monitor. Designers should therefore not assume every user will be in the same situation as them.
Mice and keyboards: Make sure that every link can be accessible using a mouse as well as a keyboard. Make links large enough so it's not taxing positioning the mouse over it.
TAB order: A TABINDEX can be used if necessary to structure the order the user moves through elements using the tab button. Otherwise they are moved though as they appear in the HTML.
Image maps: Try to use client side image maps so that users can tab though the hotspots. If server side versions must be used provide the same links as text.
Provide for old browsers
At the moment there are still a lot of users out there using dated technology, they should be catered for just as those with the latest browsers are. Therefore some techniques that are commonplace today should be treated with care.
Opening link in new windows: Blind users may not be able to tell if a link has been opened in a new window and therefore it may be best to avoid opening links in new windows or notifying them it is going to happen.
Adjacent links: Links which are not separated by a character may not be recognized by some browsers, especially image links. It therefore may be an idea to pub a breaking space in-between them or use a | character.
Forms: Some browsers can not use the form label elements, so when designing the layout try to make sure they will be easily read and usable. Putting the label in front of the element allowing for more than one element per line, or putting the label and element on separate lines. Try not to put three labels on one line and then their elements on the following as it may be confusing.
Use W3C technologies and their guidelines
Although it will not guarantee that you site is accessible it will help you avoid some problems such as using browser specific tags.Validate your code: Make sure you declare your document type and use a W3C validator, also aim to use HTML to structure your page contents and CSS to format and present it. This will provide an uncluttered version of your page to screen readers.
Let the user choose: Don't use JavaScript to detect a users settings and send them to another page. Present them with an choice, this is especially important when using non-standard technologies.
Clear and simple navigation
Providing a simple and consistent navigation will help users who are not relying on visual aids to navigate your page.
Site map: A site map is a great way at providing accessibility to all users, especially those with visual impairments. It is also useful for search engineering.
Link text: Provide a short meaningful description of where the link will take a user. This will be useful when links are taken out of context by some browsers. The TITLE attribute on links can be used to provide additional information when the main text may read, "more info", out of context this is meaningless but by adding, "more info about x", in the TITLE attribute users will know where the link is taking them.
Related links: Group related links together so they are easily distinguishable from others. It may also be an option to provide a skip navigation link, so a user doesn't need to read though them every time.
Consistency: If links appear on every page, try to make them appear in the same area and order. This will make it easer for all users to familiarize them selves with your site.