Dey Alexander Usability Specialist IT Services Division Dey'Alexanderits'monash'edu'au

1
Dey AlexanderUsability SpecialistIT Services
DivisionDey.Alexander_at_its.monash.edu.au

• Promoting accessibility in the web development
  lifecycle

2
A founding vision for the web

• The concept of the web is of universal
  readership. If you publish a document on the web,
  it is important that anyone who has access to it
  can read it and link to it.
• The power of the web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect.
• Tim Berners-Lee

3
Accessible web design is the right thing to do

• Values in Australian society
• Equal treatment of people
• Participation of people to the best of their
  ability
• Non-discrimination
• Legal requirements
• Disability Discrimination Act (S 24)

4
Website development lifecycle

• Accessible design needs to be advocated for in
  each phase
• Planning phase
• Research/requirements phase
• Design and evaluation phase
• Implementation and maintenance phase

5
Project planning phase (1)

• It is easier and cheaper to plan an accessible
  design than to retrofit for accessibility
• Project stakeholders need to be educated
• Knowledge of disabilities and how they affect use
  of the web is low
• Understanding of accessible design is very poor
• Lack of awareness of the requirements of the DDA

6
Project planning phase (2)

• Sell the benefits of accessible design
• Increase market share and audience reach
• People with disabilities that affect web use make
  up 8-10 of the population
• Improve usability for all by compliance with WCAG
  (device independence, clear navigation, clear
  content, colour contrast, etc.)
• Support for low literacy levels (46 of
  Australians)
• Improve search engine rankings and discovery
  (text alternatives, metadata)
• Improved access for low bandwidth users
• Improve efficiency
• Reduced site maintenance, server loads lower,
  server bandwidth less
• Demonstrate social responsibility
• Reduce legal liability

7
Research/requirements phase (1)

• Identify disabled users in your target audience
• Dont forget older users
• Involve users with disabilities in your research
• Surveys, focus groups, interviews
• Include disabled personas
• Research the design techniques that will make
  your site more accessible
• Educate your internal designers/developers/content
  authors
• Raise expectations
• Lift the bar higher, aim to produce a high
  quality site

8
Research/requirements phase (2)

• Explicitly specify accessibility requirements
• Dont just say compliance with WCAG AA
• Most people dont know what this means
• WCAG is subject to interpretation
• Specify the accessible design features you
  particularly want, e.g.
• Text navigation, resizeable text, visible skip
  links, etc.
• Write these into your requirements document

9
Design and evaluation phase (1)

• Ensure designers are familiar with accessible
  design approaches for a range of disabilities
• Blindness
• Colour blindness
• Low vision
• Deafness
• Motor disabilities
• Cognitive disabilities
• Seizure disorders
• Excellent summary from WebAIM

10
Design and evaluation phase (2)

• Include users with disabilities in prototyping
  and usability testing
• Screen reader user
• Sighted user who navigates with the keyboard only

11
Design and evaluation phase (3)

• Ensure developers use accessible markup
  techniques to get your templates right
• Valid markup
• Structural markup (headings, lists, etc.)
• CSS to separate presentation from structure
  wherever possible
• Validate and evaluate for accessibility as
  development progresses

12
Design and evaluation phase (4)

• Try to lock down accessibility features in
  templates
• CMS presentation templates
• Dreamweaver templates with non-editable regions
• Use server-side includes

13
Design and evaluation phase (5)

• Develop a style guide that includes accessible
  design techniques
• Dont treat them as a separate issue
• Mainstream accessible design

14
Implementation and maintenance (1)

• Develop a quality assurance process that includes
  accessibility evaluation
• Train and support web publishers and content
  authors in the use of these processes
• Dont make accessibility evaluation too
  cumbersome for content authors
• Select a single tool and train people in its use

15
Implementation and maintenance (2)

• The WAVEhttp//www.wave.webaim.org/
• Visual, colour-coded report
• Red icon indicates an error that needs to be
  fixed
• Yellow icon is a warning that something may be
  wrong and needs checking
• Green icons indicate accessible design features
  (they should be checked for accuracy)
• Blue icons indicate structural or semantic markup
  and navigational elements (they should be checked
  for accuracy)
• Checks most WCAG requirements

16
WAVE user interface
17
WAVE toolbar or bookmarklet
18
WAVE check on RMIT home page
19
Key to WAVE icons

• Explanation of icons

20
Implementation and maintenance (3)

• Cynthia Sayshttp//www.cynthiasays.com/
• Text report
• Checks WCAG 1,2,3
• Added option of selecting an Alternative Text
  Quality Report
• You can purchase a desktop license for US99

21
Cynthia Says user interface
22
Cynthia Says report on RMIT home page
23
ALT text quality report on RMIT home page
24
Implementation and maintenance (4)

• Encourage web pros to use browser tools
• More likely to use them if theyre at hand
• Will speed up the QA process

25
Implementation and maintenance (5)

• Accessibility-checking favelets
• Validation bookmarklets
• Web accessibility toolbar (IE)
• Prefbar (Mozilla, Phoenix)
• Accessibility extensions for Mozilla
• Accessibility extensions for IE

26
Implementation and maintenance (6)

• Audit your regular training courses
• Aim to mainstream accessible design practices
  in courses on Word, Powerpoint, PDF creation,
  etc.
• If people are taught to do things the right way,
  then accessibility is no longer an optional
  extra

27
Accessible design for rich media formats

• Accessible Acrobat PDF
• Introduction to captions
• Captioning with MAGpie
• Captioning with HiCaption
• Captioning Quicktime
• Captioning Windows Media
• Captioning RealPlayer
• Media Players an accessibilty comparison
• Flash accessibility techniques
• Word accessibility techniques
• PowerPoint accessibility techniques

28
Questions, comments...
29
References and resources (1)

• Business benefits of accessible web
  designhttp//www.w3.org/WAI/bcase/benefits.html
• OECD (2000) Literacy in the Information
  Agehttp//www.oecd.org/publications/e-book/810005
  1e.pdf
• The WAVEhttp//www.wave.webaim.org/
• Explanation of icons used in The
  WAVEhttp//www.wave.webaim.org8081/wave/explanat
  ion.htm
• Cynthia Sayshttp//www.cynthiasays.com/
• Using free online tools to check web pages for
  accessibilityhttp//deyalexander.com/presentation
  s/accessibility-basictools/

30
References and resources (2)

• Accessible Acrobat PDFhttp//www.webaim.org/techn
  iques/acrobat/
• Introduction to captionshttp//www.webaim.org/tec
  hniques/captions/
• Captioning with MAGpiehttp//www.webaim.org/techn
  iques/captions/magpie/
• Captioning with HiCaptionhttp//www.webaim.org/te
  chniques/captions/hicaption/
• Captioning Quicktimehttp//www.webaim.org/techniq
  ues/captions/quicktime/
• Captioning Windows Media http//www.webaim.org/te
  chniques/captions/windows/
• Captioning RealPlayerhttp//www.webaim.org/techni
  ques/captions/real/
• Media Players- An accessibilty comparison
  http//www.webaim.org/techniques/captions/mediapla
  yers/
• Flash accessibility techniqueshttp//www.webaim.o
  rg/techniques/flash/
• Word accessibility techniqueshttp//www.webaim.or
  g/techniques/word/
• PowerPoint accessibility techniqueshttp//www.web
  aim.org/techniques/powerpoint/

31
References and resources(3)

• Accessibility-checking faveletshttp//www.accessi
  fy.com/tools-and-wizards/accessibility-checking-fa
  velets.asp
• Validation bookmarkletshttp//www.squarefree.com/
  bookmarklets/validation.html
• Web accessibility toolbar (IE)http//www.nils.org
  .au/ais/web/resources/toolbar/
• Prefbar (Mozilla, Phoenix)http//prefbar.mozdev.o
  rg/
• Accessibility extensions for Mozillahttp//cita.r
  ehab.uiuc.edu/software/mozilla/download.html
• Accessibility extensions for IEhttp//cita.rehab.
  uiuc.edu/software/ieaccessible