Website Design Resources Pg10 » Accessible Web Design

HyperText Markup Language / eXtensible Markup Language ( HTML/XML )
Cascading Style Sheets ( CSS )
Javascript / DHTML
Really Simple Syndication ( RSS )
Weblog
Google Sitemaps
Common Gateway Interface ( CGI )
Active Server Pages ( ASP )
Multiple IE Versions
Accessible Web Design

How can It Benefit You?

Web accessibility doesn't only help disabled users, but it can also provide a number of benefits e.g. improve your search engine rankings, web page download speeds, simplify site maintenance and future proof your site.

What Does Building an Accessible Website Entail?

Ensuring your website is accessible isn't as hard as you would imagine. There are a number of steps that can be taken to make a website accessible.

Modifying Your Exisiting Code

Start with these 5 steps to modify your exisiting code and you will already have taken taken a huge step towards making your site accessible.

Text Equivalent: Always provide a text equivalent to any information you present with graphics, videos, applets, etc. Use the text to describe the content don't just describe the graphic e.g. if you include a graphic which shows your location on a map use an ALT tag to give specific information about your location instead of labelling it as 'our location'.
Make Text Scalable: Internet Explorer doesn't allow the resizing of text if font-size is set in pixels (px) or (pt) instead use relative length units such as percent or (em) or use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within your web pages.
Colour: Don't rely on color alone as a primary means to impart information and always try to use dark text on light backgrounds - for most people, this increases site readability. Also, consider that 10% of men are colour blind so red/green or blue/yellow combinations can potentially cause a problem.
Links: Ensure links make sense out of context. 'Click here for more information on our latest holiday offers' is a lot more useful than 'Click here' or 'Find out more'.
Forms: Make forms accessible. All form fields should have 'prompt' text associated explicitly with them. These are called label tags. A web user can then click their mouse or pointing device on this prompt text to move the cursor into that form field.

Taking Accessibility Further

Listed below are a few of the many available on-line tools which can help you to identify and improve website accessibility issues. This list is far from extensive, there are many more tools which could be added but the selection below is an excellent starting point on the path to an accessible web site.

It is also a good idea to involve users with disabilities in testing your web site. This can give you some unique insights into how people with disabilities interact with the web and with assistive technologies.

If you wish to carry out a comprehensive accessibility evaluation of your website then you should use the W3C's conformance evaluation method that combines automatic, semi-automatic, and manual testing. It can be used when developing a new site, or to evaluate an existing site.

Accessibility Documents / Guidance

Key guidance on how to develop a website which is user-friendly for disabled people can be found in the document, Publicly Available Specification (PAS) 78, developed by the British Standards Institution (BSI) and sponsored by the Disability Rights Commission.
The U.S. government's Federal IT Accessibility Page provides accessibility links and information about how to comply with section 508 guidelines.
The World Wide Web Consortium's Web Accessibility Initiative ( W3C WAI ) has prepared the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) which is an excellent reference tool.

XHTML / CSS Validators

WAI Checkpoint

Accessibility Wizard. A tool for web developers and project teams. It breaks down the WAI Checkpoints into individual tasks for each job role in a development team. Every member of a development team is directed to implement the WAI Checkpoints at a specified conformance level (A,AA or AAA).
Hera. Performs some automated WCAG 1.0 testing, then guides a user through tests which need to be done or confirmed manually.
Cynthia. Identifies errors in your content related to Section 508 standards and/or the WCAG guidelines.
TAW. Tool for the analysis of Web sites, based on the W3C Web Content Accessibility Guidelines 1.0 (WCAG 1.0).

Simulators

Download a free copy of Lynx or try an online Lynx Simulator to see how your site displays in a text-only format.
Easy Web Browsing allows people with limited vision to access website content more easily. You can download an evaluation copy to test your site.
aDesigner. A disability simulator that helps web designers ensure that their pages are accessible and usable by the visually impaired.
Vischeck. Color blindness simulator.
Opera Mini™ Simulator. Testing on mobile devices.

Colour Contrast

Accessibility Colour Wheel. A tool that helps in the choice of a color pair (text/background) to use in a web page.
Graybit. Accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.
Colour Contrast Evaluator. AccessColor is a free online tool which analyses the internal and external CSS of a web page to test the colour contrast and colour brightness between the text and background colours.
Colour Contrast Analyser Firefox Extension. Lists colour combinations used in the document in a table that summarises the foreground colour, background colour, luminosity contrast ratio, and the colour difference and brightness differences.

Multi-Media Captioning Software

The National Center for Accessible Media ( NCAM ) offers the Media Access Generator ( MAGpie ), a free tool that lets authors add captions to three multimedia formats: QuickTime, SMIL, and SAMI. MAGpie can also integrate audio descriptions into SMIL presentations.

Forms / Tables

Accessible Form Builder.
Accessible Table Builder.
Com Tab. A FireFox toolbar which can be used to automatically generate complex data table mark up.
Tablin. Filter program that can linearize HTML tables and render them accordingly to preferences set by the presentation layer (e.g. the screen reader end-user).

Readability / Style / Dication

Readability Test. The Readability Test uses the Gunning Fog, Flesch Reading Ease, and Flesch-Kincaid reading level algorithms to help you determine how readable your content is.
Style & Dication. Identifies wordy and commonly misused phrases. Style analyses surface characteristics of a document, including sentence length and other readability measures.