All Access Pass – How accessible is your website?

We all hate barriers that prevent us from getting what we need or want. We quickly become frustrated and annoyed when access is denied, especially when it needn’t be. We may try to find ways around the barriers or we may just give up and move on, looking for an easier way to get what we want.

In a competitive marketplace, can you afford to lose the approximately 15% of individuals who have a disability because you didn’t spend time providing access and removing barriers?

What does web accessibility really mean?

There are various types and degrees of disabilities and the approximately 15% of people who have reported having a disability all experience the same frustration at being denied access to websites simply because the site does not comply with w3 accessibility guidelines or follow best practices.

What does disability include?

Disabilities range from mild limitations (like temporary backache) to more severe levels, and types include:

• mobility
• pain
• agility
• hearing
• seeing
• psychological
• learning
• memory
• speech
• developmental

Additional considerations include:

• an aging population
• arthritis sufferers
• visual implications (including colour blindness)
• reading levels and literacy
• temporary loss of mobility
• technical barriers

Remove barriers and provide access

Making your site more accessible will improve your site’s usability overall which will affect not only those that have a disability but everyone else who is trying to get what they want quickly and efficiently. Incorporating as many of the accessibility guidelines below will improve your users’ experience.

Guidelines to improving accessibility

Images

1. Use alternative text (ALT) attributes on all images to describe them, especially if they are also links.
2. Text in graphics may be used (e.g. logos) but if it is informative or directional words within a graphic a text equivalent should be provided.
3. If you are using image maps (images which contain multiple links) provide text links beneath the image.

Multimedia and video

1. Have text equivalents for multimedia, video and any scripting, applets, and plug-ins.
1. Use captioning that is synchronized (video, multimedia, scripting)
2. Have transcripts of audio and video, include description of video
3. Have auditory descriptions (video, multimedia, scripting)
4. If the video or multimedia is embedded, is the control panel accessible? Does it have a text equivalent? Can various devices access the control panel?
5. Take into account various devices:

i. Input devices include pointer devices, keyboards, Braille devices, head wands, microphones, mouse and others.

ii. Output devices may include monitors, printers, speech synthesizers and Braille devices.

1. Programmatic objects, event handlers and triggers should have html equivalents. Use logical event handlers such as “onfocus”, “onblur”, “onselect” since “onmouse” is device specific.

Style, formatting and colour

1. Use cascading style sheets (CSS) to control font sizes, colours and style effects, and if possible, to position items on page. Use relative units such as percentages and "em" font sizes to establish measurements, so that users can change the units easily via their browser. Style sheets enforce consistency and are time savers in maintenance.
2. Use tables minimally, use table headings, make line by line reading easy (table cells will be read by reading devices as paragraphs); summarize your table’s content; never nest tables (use a table within a table).
3. Indenting - Use html list styles for lists only not to indent. Use <BLOCKQUOTE> for verbatim quotes only and not to indent.
4. Have a font toggle option with at least 3 font sizes.
5. Have printable versions especially for detailed content, and no advertising on the print version please.
6. Don’t rely on colour alone to indicate sections or changes. All information should be understandable without colour. Red is the hardest colour to read and should be used sparingly.
7. To aid viewing high contrast between text and background is needed. The best is black text on a white background followed by blue text on white or off-white. Check colour contrast, luminosity, colour difference and brightness.

Written content

1. Write meaningful page titles and headings. Apply CSS styles to headings.
2. Write simple and concisely; Write for the web don’t just put printed content online.
3. Links should promote navigability; hypertext links need to make sense if they are read out of context – no “click here” or “more”.

Content organization and “findability”

1. Keep popular content within 3 clicks; have task specific content in one area to reduce mousing.
2. Navigation should be consistent throughout the site with common menu bars.
3. Have a site map.
4. Have intuitive navigation with alternate search methods (e.g. Alpha lists, site maps, date sorts etc).
5. Have search:
1. Keyword search
2. Forgiving or “best guess” search with misspellings allowed
3. Have query by example or similarity searches

Code

1. Validate your markup code.
2. Test your site in different browsers.
3. Avoid auto refresh as it can disorient users, instead advise them to refresh their page or provide re-directs
4. Offer various language options when possible. If changing language indicate it properly in code so that Braille readers can understand it (e.g. "lang" attribute in HTML; "xml:lang" in XML)
5. Just say no to blinking content; moving content should be minimalized and should offer a way for users to freeze or stop it and a text description should be provided for screen readers. Marques and ticker tapes are considered hard to read and have low usability for the average user.
6. Avoid popup windows (they are not only annoying but also not accessible to non-visual browsers). If you are going to use them then indicate that a new window is going to open.
7. Forms should have labels for all form controls and the labels should be on the same line as the control so they can be read in context.

Accessing

Making your site accessible is not only a best practice and a way to reach people with disabilities, it is also the socially responsible thing to do and will reduce your legal liability for discrimination. If your site follows accessibility guidelines then it will improve your usability, be browser compliant, be easy to maintain, fast to load and be consistent. Improved accessibility and usability increases site use and reduces abandon rates. It just makes sense. So, how accessible is your site?

Resources

• W3 www.w3.org/TR/WCAG and http://www.w3.org/WAI/
• Government of Canada – Common Look and Feel Guide: http://www.tbs-sct.gc.ca/clf-nsi/standards/1-1/w3c/w3c_e.asp
• Citizens With Disabilities Ontario www.cwd-o.org
• CSS validator http://jigsaw.w3.org/css-validator/