Web Site Accessibility

Document Sample
Web Site Accessibility Powered By Docstoc
					Web Site Accessibility

              Ian Senior
               November 2003
Aim of talk

To give an overview of the problem
To describe the legal situation
To show some good and bad practice
To point to some help
What is Accessibility?
 Web content can be obtained and understood by
  as many potential viewers as possible,
  regardless of the user agent they employ or the
  constraints under which they operate.
                       University of Buffalo NY State.
The problem

    1 in 10 visitors is disabled in some way.
     Access is impeded by not allowing for
    with forms of colour-impaired vision
    slow modems and lines
    turning off graphics
    who find it hard to read long sentences
The problem
 who only have a 640 x 480 monochrome screen
 unable to read small fonts
 who prefer to use Linux
 who cannot use a mouse
 who cannot hear properly
 oh, yes, and people who cannot see!
Ways to use the web

  Remember that viewing sites with IE is not
   the only way to use the web. Think of
   technologies like:
   Synthetic speech (screen reader)
   Paper printout
   Dynamic braille
   Keyboard only
   Text-mode browsers
   Web-enabled cars
   Mobile phones and PDAs
The legal situation

  The 1995 Disability Discrimination Act
   (DDA) is relevant.

   Since 1st September 2002, the Special
    Educational Needs and Disability Act (SENDA)
    has been in force. This act became part IV of the
    DDA and bring higher and further education under
    the protection of this legislation.
What does SENDA say?

SENDA makes it unlawful to:

  Treat disabled people less favourably than their
   non-disabled peers, for a reason relating to their
  Fail to provide reasonable adjustments for
   disabled students.

SENDA seeks to provide disabled students with access
to all the facilities and services of FE/HE organisation.

SENDA is an anticipatory Act, meaning organisations
have to adjust their working practices for disabled
people regardless of whether they are presently at the
organisation or not.

This means web sites have to be accessible to all
visitors and not just registered users.
Australian legal case
Maguire vs Sydney Olympic Games
  Failed to provide accessible site
  Defence of ‘unjustifiable hardship’ rejected
  $20,000 fine
Case could be used in UK
There have been no legal test cases in the
 UK so far.
Poor excuses for non-compliance

 Sorry, I am not interested
 We don't have any disabled people
 We don't have the time or expertise
 It's not my problem, I'll wait until everyone else
  does something
 My system won't let me
 No-one else is fixing their sites
 I don't know what to fix
How not to help your visitors…
Who’s page is that?
Web Standards

World Wide Web Consortium (W3C).
 They develop interoperable technologies

  ‘Lead the web to its full potential as a
  forum for commerce, information,
  communication and collective
Web Accessibility Initiative (WAI)

  W3C programme to:
    Ensure web technologies support accessibility
    Developing guidelines for accessibility
    Developing tools to evaluate and facilitate
    Conduct education and outreach
    Co-ordinating web design with R & D
WAI checkpoints

 WAI have produced a list of checkpoints
 for web content accessibility guidelines
 (WCAG) 1.0
 This is a hierarchical structure consisting
 of three priority levels
Priority 1 (level A)
Priority 2 (level AA)
Priority 3 (level AAA)
Priority 1

This is the minimum level of accessibility
 web developers should be working
 towards. While this removes some
 accessibility barriers, many disabled
 students would still be excluded from
 using a site.

 e.g Use Alt tags on images
Priority 2

Achieving this level will remove more
 barriers to accessibility although some
 students will still be excluded.

  e.g. Link form elements with their labels
Priority 3

Satisfying this highest level will provide
 access for the vast majority of disabled

  e.g. separate adjacent links with more than
   white space
Aim high

What priority level should we achieve?
FE/HE institutions should regard priority 1
 as the starting point for a web site.
Priority 2 is the standard level expected
Priority 3 is the ideal level
Basic web design issues
  It is not hard to get the simple things right:
    1. Be realistic: don't make technology assumptions
    2. Don't be lazy and do it all with images
    3. Don't use non-intuitive navigation aids
    4. Make your site consistent
    5. Use simple language
    6. Provide text versions
    7. Leave control of appearance to CSS
    8. Structure your web pages correctly (H1 tags etc.)
Make consistency rules
Make house rules and stick to them. Keep
 your pages consistent.
Create a visual identity that holds all your
 pages together. This will help everyone.
Decide on a technology and make
 everyone use it. Don't mix Flash and XML
 and PDF in the same small site.
Dyslexia and cognitive disabilities

Write short sentences
Use consistent layout
Don't flash at people or use multi-coloured
Keep sentences below 20 words
Use white space
Say one thing at a time
HTML 4.01
 Current standard for HTML
 Comes in 3 versions:
   Strict document type definition (DTD)
   Transitional DTD
   Frameset DTD
 The strict DTD will produce a web site that
  complies to all three priority levels, the other two
  make compliance very difficult above level 1
Tools to aid compliance
Evaluation tools
  analyse pages and produce a report
Repair tools
  Identify and help to fix page problems
Filter and transformation tools
  Assist web users by modifying a page or
   supplement assistive technology or browser
Opera browser features
When developing a site it is helpful to
see how accessible your new site is.
A very quick way is to use Opera. This
has accessibility options:
  • Linearize tables
  • Turn on/off graphics
  • Turn on/off CSS author & user versions
  • Zoom in on text
  • Turn on/off JavaScript
WAVE software

Allows you to add a button to the links bar
 of your browser.
Clicking the button opens up WAVE which
 examines the page for accessibility.
WAVE home page
WAVE in action – good site
WAVE in action – poor site
HTML – Standard page

State document language
If table used in page design use the
 summary tag & ‘layout table’ text
Include ‘skip navigation’ link
Use headers for structure only – style
 through CSS if necessary
Consider a CSS approach to page layout

 TITLE attribute
  describe a link
 Acronym element
 Abbreviation element
 TABINDEX attribute
  cycle logically through links
Use ‘alt’ attribute on all images
Spacer image used in design only alt=“”
Graphics used as bullets alt=“*”
Information graphics should have sensible
 alt text
Use longdesc attribute for complex images
 e.g. graphs, detailed images. Alternatively
 link image via ‘D’ text
HTML - Tables
 Make your table as simple as possible
 Add summary of information for data tables
 Associate table column & row headings with
  Attributes include: TH, ID, headers, scope
  THEAD, TBODY, TFOOT also available
 Give your table a caption
 Check readability when linearized using Lynx or
HTML Forms

 Use clear language
 Use form accessibility tags:
  For, ID, name, label,
 Group related items together
  fieldset, optgroup and legend
 Add hints to text boxes
 Make PDF documents more accessible using
  Acrobat 6+
Cascading style sheets
   Allow for
    - font family: serif, sans-serif, cursive
    - font size: tiny or huge
    - colour, background and foreground
    - white space around objects
    - what links look like
    - borders around things
    - to be controlled in one place
    - allow the user to override it.
   Not all browsers implement CSS
    properly (Netscape 4).
With CSS
Without CSS
What are we doing?

 We use XML to mark up our pages
 We can deliver pages in different forms: PDF,
  print ready, XML, HTML
 We are developing a method to allow users
  to select their own colour schemes
 We provide a text only selection
 We are developing an automatic accessibility
  XSLT style sheet.
What are we going to do?

 Make our tables more accessible
 Make our forms more accessible
 Try to future proof our site as much as

  Accessibility is all about people being
   able to obtain information from the web.
  Legal requirement through SENDA
   Write W3C compliant code
   Use HTML 4.01 strict DTD as your starting level
   Aim for at least priority 2 standard
   Use CSS for site styles
  Use the validation tools from W3C and
   others to check site compliance.
Useful sites

   Web Accessibility Initiative

   W3 Consortium

   TechDis (JISC Funded)
More sites

   The RNIB's practical take on web access
   Industry commentary on useability of web
   Check your understanding of colour
Validators & other tools

Site Viewing Tool
HTML Tidy Tool
HTML Validator
CSS Validator
Checking tools

  Wave
  Bobby
  Aprompt
  Vischeck
  Lift
Talk found at

This talk is downloadable from:

PDF and PowerPoint versions available

Shared By: