Introduction to Accessibility
What is accessibility?
- Most people think it’s only about people with physical disabilities
and generally blindness.
- Have to consider people that are partially sighted, unable to use a mouse,
colour blind, learning difficulties etc.
- The very old also have poor vision and limited use of a mouse (e.g. arthritic).
- The very young also can have poor hand-eye co-ordination and need to use visual cues instead of written cues.
What is accessibility (cont.)?
- People access the net on a wide range of platforms
- Linux users often use text browsers such as lynx
- Many handheld devices are internet enabled but do not support technologies
like CSS, Javascript and Flash.
- Not all visitors will speak or understand English fluently.
- Many people are forced to connect using old machines with low screen res,
out of date browsers and poor net connections. Especially in developing countries.
Often the most underprivileged in our society.
How do people access the web
- Screen readers (many of which are keyboard only activated).
- Screen magnifiers (software or actual magnifiers).
- Some blind users don’t even bother to hook up their screen.
- Custom style sheets.
- Ability to resize text.
- Brail outputs.
How do people access the web (cont.)
- Keyboard only.
- Track balls.
- Other assisted technology that does not use mouse input.
- PDA’s and mobile phones with small screens, using device keyboards,
styluses, scroll wheels etc.
- All this means we should try to avoid overriding user set preferences, using
mouse only control, fixed layouts and especially fixed widths.
Why should we bother?
Negatives
- It’s the law. It’s illegal to discriminate under the UK
disability discrimination act. No website has been taken to UK court yet, but
it’s only a matter of time. The Sydney Olympic Committee got taken to court
because of their poorly accessible site and this has set a global precedent.
- If your clients are not aware of accessibility issues now they will be in
6-12 months and may end up asking you why you did not make the site accessible.
Why should we bother?
Negatives (cont.)
- Losing out on potential clients. You may think that people with disabilities
are not in your market. However they may be buying gifts or researching services
for friends or family members who are. Not only disabled but people using different
browser technology.
- Bad PR to alienate the disabled, the old and the super techie.
Why should we bother?
Positives
- Shows a level of social maturity to cater for accessibility issues. Good PR
for your site.
- Increasingly companies and organisations are asking for accessibly web sites.
All government websites and most University websites are expected to reach Double-A
compliance. Many charities as well. If you don’t know about these issues
you lose out on prospective clients
- It’s good design practice and promotes good standard compliant coding.
- Another string in your bow.
Why should we bother?
Positives (cont.)
- It’s a big market. There are a large number of people with registered
disabilities in the UK.
- Increasingly aging population with large disposable incomes. Largest growing
sector of net users
- Mobile device users tend to have high incomes and spend more, especially on
tech products. Very likely to use the net to shop.
- It does not cost significantly more to build accessibility in from the start.
Around 2%. However it can be expensive to retrofit.
- Good for search engines
How to design for accessibility
W3C, WAI and the web content guidelines
- The W3C created a group called the Web Accessibility Initiative (WAI) to champion
accessibility issues.
- The WAI has created the “Web Content Accessibility Guidelines 1.0”
(WCAG 1.0)
- http://www.w3.org/TR/WAI-WEBCONTENT/
- It can be a little difficult to interpret. Contains very useful information
and should be read by everybody.
- Currently working on WCAG 2.0
WCAG 1.0 introduction
- The guidelines are a list of 14 concepts. Each concept is broken down into
checkpoints and each checkpoint is given a level.
- There are 3 levels of priority.
The guidelines
- 1. Provide equivalent alternatives to auditory and visual content.
- 2. Don't rely on colour alone.
- 3. Use mark-up and style sheets and do so properly.
- 4. Clarify natural language usage .
- 5. Create tables that transform gracefully.
The guidelines (cont.)
- 6. Ensure that pages featuring new technologies transform gracefully.
- 7. Ensure user control of time-sensitive content changes.
- 8. Ensure direct accessibility of embedded user interfaces.
- 9. Design for device-independence.
- 10. Use interim solutions.
The guidelines (cont.)
- 11. Use W3C technologies and guidelines.
- 12. Provide context and orientation information.
- 13. Provide clear navigation mechanisms.
- 14. Ensure that documents are clear and simple.
Level 1
- A Web content developer must satisfy this checkpoint. Otherwise,
one or more groups will find it impossible to access information in the document.
Satisfying this checkpoint is a basic requirement for some groups to be able to
use Web documents.
Level 2
- A Web content developer should satisfy this checkpoint. Otherwise,
one or more groups will find it difficult to access information in the document.
Satisfying this checkpoint will remove significant barriers to accessing Web documents.
Level 3
- A Web content developer may address this checkpoint. Otherwise,
one or more groups will find it somewhat difficult to access information in the
document. Satisfying this checkpoint will improve access to Web documents.
Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
Priority 1 checkpoints
1.1 Provide a text equivalent for every non-text element
Tips
- Simplest example is providing alt text for images.
- Using alt text is possibly the easiest way of increasing site accessibility.
- Without alt text people using a screen readers or text browsers cannot access
the meaning of an image.
- When a screen reader hits an image that has no alt text it will often read
out the word “image” or sometimes the image name. This can be very
annoying.
Tips
- Use sensible alt text. Alt text should describe the function of a graphic
or a brief description of an image.
- Never use the name of the image.
- If the image is a spacer image or holds no meaning, use
alt =“”
or alt= “ ”.
- If an images is made up of slices, choose just one image for the main alt
text and use
alt=“” for the others.
- Alt text is part of a sites content. It should not be relegated to the designer/developer
coding the page to come up with suitable alt text (although usually it is)
Tips
- Avoid using images as pseudo-bullets. If you do use images, provide meaningful
alt text like
alt=“*”
- For complicated images that convey more info than can be fitted into an alt
attribute, use the longdesc attribute to point to a page with a long description.
- For user agents that don’t support longdesc, provide a description link
(D) next to the graphic.
- Use noscript tag to describe what a script does in case it’s not rendered
by the user agent. e.g. news ticker.
2.1 Ensure that all information conveyed with colour is also available without
colour
Tips
- e.g. Don’t say things like “please press the red button”
- Be careful about removing the underline on links using CSS and relying solely
on colour/font size.
- Check pages on a b/w monitor or print them out in black and white to make
sure there is enough contrast between colours.
6.1 Organize documents so they may be read without style sheets.
Tips
- Often CSS positioning is used to display content in a position that is different
from the document flow. Make sure that the document is understandable when style
sheets are turned off
- Get the toggle stylesheet favelet from http://www.tantek.com/favelets/
- CSS may be used to show hierarchy. e.g. in menu items you may have one style
for the main menu items and another for sub menu items. Without the styles it
may be impossible to tell the difference. One way to get round this is to use
a definition list to show hierarchy.
14.1 Use the clearest and simplest language appropriate for a site's content.
Tips
- Important for site usability as well as accessibility.
- Use clear headings that are understandable out of context. Some screen readers
will provide a summary of page content using page headings.
- Use clear link descriptions. Some users will tab to links only so they must
be understandable out of context. Click here means nothing.
Tips
- Design for skim reading. State the meaning of each para at the start of the
para. This is how journalists write. Many people using screen readers will listen
to just the first few words to get an idea of the content and will skip it if
it does not sound promising.
- Avoid slang or jargon.
- Use simple words instead of complex words.
5.1 For data tables, identify row and column headers.
Tips
- Data tables (e.g. train timetables) can be very difficult to use if you cannot
see the headings.
- Use the table “summary” tag to describe a data table
- Use “headers” attribute or “scope” attribute to link
data with the column headings.
- Do not use any of these accessibility features on tables used for layout.
11.4 If, after best efforts, you cannot create an accessible page, provide
a link to an alternative page that uses W3C technologies, is accessible, has equivalent
information (or functionality), and is updated as often as the inaccessible (original)
page.
Priority 2 checkpoints
2.2 Ensure that foreground and background colour combinations provide sufficient
contrast when viewed by someone having colour deficits or when viewed on a black
and white screen. [Priority 2 for images, Priority 3 for text]
Tips
- Check with a service like http://www.vischeck.com/
to make sure that the page is usable by people with colour blindness.
3.2 Create documents that validate to publish formal grammars.
3.3 Use style sheets to control layout and presentation.
Tips
- Don’t use markup to control presentation. Use
<em>and
<strong> not <i> and <b>.
Don’t use <center> to align text or <blockquote>
to add padding.
- Use style sheets to style text instead of using images of text.
3.4 Use relative rather than absolute units in markup language attribute values
and style sheet property values.
Tips
- If you use px as a unit you will get exact font sizes across both Windows
and Mac platforms. However on Windows machines this stops people from using their
own custom settings and increasing the text size.
- If possible use em’s or keywords such as larger,smaller to set font
sizes.
- Supposed to use relative units such as em or % for everything but this is
not very practical.
3.5 Use header elements to convey document structure and use them according
to specification
Tips
- Do not use heading to create effects.
H2 should follow H1’s, H3 should follow H2’s. Don’t skip
levels.
13.1 Clearly identify the target of each link.
Tips
- Many screenreader users will listen to only the link text on a page to navigate
or get an overview of the page.
- Use meaningful link text that can be understood out of context. No more click
here links.
- Consider using the
title attribute for more information.
13.3 Provide information about the general layout of a site (e.g., a site
map or table of contents)
Tips
- In describing site layout, highlight and explain available accessibility features.
- Good idea to have an accessibility policy outlining what level of compliance
your aiming for.
- As part of your policy, let users know that your happy to repair (within reason)
pages that have accessibility problems.
5.3 Do not use tables for layout unless the table makes sense when linearized
Tips
- Tables used for layout are not necessarily that bad in terms of accessibility.
Most screen readers can understand content in layout tables.
- However make sure the tables make sense when they are read in the flow of
the document (example on next page)
- Avoid overly complicated table structures and complicated table nesting.
- If possible, use style sheets for layout and positioning.
Tips
Bad
<table>
<tr>
<td><h2>Title 1</h2></td>
<td><h2>Title 2</h2></td>
</tr>
<tr>
<td><p>Article 1</p></td>
<td><p>Article 2</p></td>
</tr>
</table>
Tips
Good
<table>
<tr>
<td>
<h2>Title</h2>
<p>Article1</p>
</td>
<td>
<h2>Title</h2>
<p>Article1</p>
</td>
</tr>
</table>
10.2 Until user agents support explicit associations between labels and form
controls, for all form controls with implicitly associated labels, ensure that
the label is properly positioned.
6.4 For scripts and applets, ensure that event handlers are input device-independent
Tips
- This applies event handlers that do more than just change the presentation
of an element.
- Use
onFocus, onBlur and onSelect where possible as these are device independent.
- If you must use
onMouseDown etc, consider also using equivalent keyboard event (onKeyDown)
Exercise
- Hand out quick tip cards
- Get into small groups and select a website that has some meaning to you. Possibly
your company website or a website you were recently involved in designing/building.
- Using the checklist (http://www.w3.org/TR/WCAG10/full-checklist.html),discuss
what ranking the site would get and in what simple ways the accessibility of the
site could be improved.
Priority 3 checkpoint
9.4 Create a logical tab order through links, form controls, and objects
Tips
- Use the
tabindex attribute to specify the tab order of form elements.
- Use tab indexes like 10, 20, 30 or 100, 200, 300 instead of 1, 2, 3 as it
makes it easy to add new fields without having to change all the existing ones.
9.5 Provide keyboard shortcuts to important links (including those in client-side
image maps), form controls, and groups of form controls.
Tips
- You can use the
accesskey attribute to create key board shortcuts.
- On Windows press ALT + an access key; On Macintosh, press Control + an access
key.
- If the access key is defined on a link, your browser will follow the link.
- If the access key is defined on a form field, your browser will set focus
on that field.
- Try to avoid shortcuts like S and Q as some screen readers may have these
reserved to Save or Quit for example.
Here are some of the keyboard shortcut controls from the UK Government website
guidelines
- Use S for a navigational skip link
- Use 1 for home page
- Use 3 for the site map
- Use 4 for search
- Use 8 for t&c's and privacy policy
- Use 9 for a feedback link
- Use 0 to link to the page outlining the accesskey assignment details
10.5 Until user agents (including assistive technologies) render adjacent
links distinctly, include non-link, printable characters (surrounded by spaces)
between adjacent links.
Tips
- Use something like a pipe character (|) to separate adjacent links.
- Better yet, mark list of links up as a list.
13.6 Group related links, identify the group (for user agents), and–until
user agents do so–provide a way to bypass the group
Tips
- It can be really annoying for people using screen readers to have the entire
nav bar read out on each page before getting to the actual content.
- It’s even worse for mobility impaired people being forced to tab through
many links before they can get to the page content.
- Create a link at the start of the navigation bar that jumps to the end of
the navigation bar.
- Use the phrase "Skip to main Content".
Useful Links
Presentations, guidelines and white papers