A Rough Guide to Accessible Web Design

1
digital media access group

• A Rough Guide to Accessible Web Design
• David Sloan

2
Overview

• What is Web Accessibility?
• Why Web Accessibility? (Myths exploded)
• The Principles of Accessible Design
• More Information

3
What is Accessibility?

• Degree to which web information is accessible to
  all human beings and automatic tools
• So thats you, me, disabled, able bodied, old,
  young, site indexing tools, robots

4
Why Accessibility?

• Legal Reasons
• Browsing Environments are more diverse than ever
• Promote Good Design
• It makes commercial sense!

5
Accessibility and the Law

• UK Disability Discrimination Act
• Human Rights Legislation
• Legislation in other countries

6
People with disabilities

• Blind and visually impaired
• Dyslexia
• Physical disability
• Cognitively impaired
• Could be any one of us at any time

7
Changing Browsing Technology

• Hand Held devices, WAP phones, in-car Internet,
  Web TV etc
• Ordinary users in Extraordinary situations
• People disabled by their browsing environment or
  device

8
Disabled people and the Web

• Assistive technologies already exist
• so you dont have to do reinvent the wheel
• just implement good design!
• Browser features
• accessibility options

9
Commercial Sense

• Widen Potential Market Base
• Disabled Community
• Elderly
• Rich (?) users of new internet devices
• Stand out from your competitors

10
Commercial Sense (2)

• Improving accessibility can encourage better use
  of your site
• More successful customer transactions
• Information accessed quicker and more
  successfully
• Dont end up like boo.com

11
Examples

• What are accessibility problems?

12
Reliance on Colour

• Select a product
• (NB items shown in red are sold out)
• Item 1
• Item 2
• Item 3

13
Which would you choose?

• Use the buttons below to select a credit card to
  pay withcard12.jpg card13.jpg

14
Easy Navigation?

• Choose a link
• Here
• Follow
• This link
• Click here

15
Accessible Design Myths Exploded

• Accessible sites are boring
• Accessible sites have no colour or pictures
  multimedia is not allowed
• Accessible sites must be text-only
• Accessible sites must be separate versions of
  the main site

16
Web Content Accessibility Guidelines (WCAG)

• Developed by the W3Cs Web Accessibility
  Initiative
• 14 Prioritised guidelines
• subdivided into 65 checkpoints, based on
  significance of accessibility
• Allows a means by which developers can assess
  accessibility levels of resources

17
WCAG - Drawbacks

• Following the guidelines can be difficult
• Very technical
• So can be difficult to follow
• Guidelines can be vague
• or overly prescriptive
• Often recommend use of technologies not yet fully
  supported

18
Accessible Design Philosophy

• Make sure all information is provided in an
  accessible form
• providing accessible alternatives when necessary
• Design for Device Independence
• Give users the ability to adjust appearance of
  pages to suit their needs
• Observe Usable Design principles

19
Key aspects of an Accessible Site

• Content
• Navigation
• Appearance
• Home Page
• Technical issues

20
Accessible Content (1)

• Accessible Alternatives
• Equivalent text alternatives to graphics/images
  (meaningful ALT text)
• Text equivalents to multimedia applications
• Alternatives to information only available
  through client-side scripts, Java applets etc
• As a last resort, an accessible, alternative site

21
Accessible Content (2)

• Write content in the clearest and simplest
  language appropriate
• Expand acronyms where first used
• Graphics and multi-media can illustrate
  understanding of the page
• Use metadata to provide top level information
  about the site/pages

22
Accessible Navigation (1)

• Make hyperlink text meaningful
• No Click Here
• Title frames appropriately (if you must use
  them!)
• Make consistent use of navigation bars and site
  maps
• Include a link to the Home page

23
Accessible Navigation (2)

• Provide a means to bypass groups of links
• Provide an accessible search facility to allow
  information location
• Make sure the search form is accessible
• Make sure results are ordered appropriately
• Allow easy refining of searches

24
Device Independence

• Make sure all information is accessible via the
  keyboard
• Avoid reliance on input device-specific actions
  (e.g. onmouseover)
• Make keyboard use as easy as possible
• Access keys
• Logical tab order

25
Appearance (1)

• Dont impose a specific style without allowing
  users to change it
• Dont use colour alone to distinguish information

26
Appearance (2)

• Use style sheets keep appearance instructions
  separate from the actual web page
• Aim for a consistent look and feel throughout
  your site
• Try to use the same layout for each page
  (navigation bars, organisation logo etc)

27
Appearance (3)

• Use structural HTML elements to represent
  document structure
• Ensure that tabular or columnar information on
  the site linearises appropriately
• Important or distinguishing information should be
  easy to find

28
Home Page

• The first page most people will see so make a
  good impression!
• Clear and concise navigation system
• Links to Contact details, and a site search
  facility
• Provide an accessibility statement or indicator
• Only show important information

29
Technical Issues (1)

• Use Valid HTML or XHTML
• Use Cascading Style Sheets
• Use tables with care
• Specify data table headings
• Associate headings with table cells
• Provide summaries for data tables

30
Technical Issues (2)

• Try to avoid opening new browser windows without
  warning
• Avoid automatically refreshing pages
• Dont break the Back button
• Avoid flickering and flashing animations
• Make sure dynamically updated content is
  accessible

31
Technical Issues (3)

• Dont tell the user they need to install the
  latest version of . to view your site
• They may not want to
• They may not be able to
• But investigate content negotiation
• Check www.w3.org for W3C approved web
  technologies XML, XSL, SVG, SMIL.
• Use Flash with extreme care!

32
Assessing Accessibility (1)

• How do you assess a web resources accessibility
  level?
• Automatic Accessibility Checkers
• Bobby
• The WAVE
• HTML Validator/ HTML Tidy

33
Assessing Accessibility (2)

• But manual checks are required!
• View in different browsers view with images,
  scripts etc turned off
• Unplug the mouse!
• Get disabled users to check your site
• and able bodied users as well

34
Where do you start?

• 5 Things to do when you get home - check
• all images have appropriate alternative text
• you dont use colour alone to highlight
  information
• hyperlinks are appropriate no click here
• all your pages have appropriate titles
• you provide contact details on every page

35
Digital Media Access Group

• Consultancy and research into accessibility of
  digital resources
• Digital Media Access Group
• Department of Applied Computing
• University of Dundee, DUNDEE, Scotland
• DD1 4HN
• tel [phone] email enquiries_at_dmag.org.uk