Understanding web accessibility

1
Understanding web accessibility

• Dey Alexander
• ITS Web Group
• Dey.Alexander_at_its.monash.edu.au

2
Overview

• What is web accessibility?
• Accessibility as a social and legal issue
• How disabilities affect use of the web
• Accessibility standards
• (WCAG 1.0)
• Accessibility tools

3
What is web accessibility?

• "The power of the Web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect."
• Tim Berners-LeeW3C Director Inventor of the
  World Wide Web

4
What is web accessibility?

• Two main strands
• Technical strand
• Interoperability or access by various user
  agents
• Human strand
• Usable access for people with disabilities
• Access for the technically/geographically/socially
  disadvantaged

5

• What is web accessibility?
• Accessibility as a social and legal issue
• How disabilities affect use of the web
• Accessibility standards
• (WCAG 1.0)
• Accessibility tools

6
Accessibility as a social issue

• 10 to 20 of the population in most countries
  have a disability
• Not all of those disabilities affect access to
  the Web
• Vision, hearing, mobility and cognitive problems
  do affect access
• Average age of population in many countries is
  increasing
• Vision hearing degrades, changes in dexterity
  memory
• Some of us become temporarily disabled due to
  accident or illness

7
Accessibility as a social issue

• Low end computers
• May not be able to run latest browsers/plug-ins
• Slow modems
• Large pages/images/animations take a long time to
  download
• Downloading plug-ins and new browsers is
  problematic
• Poor bandwidth due to geographical location
• Rural locations, some countries with limited
  bandwidth
• Limited computer literacy
• Not confident about installing plug-ins, new
  browsers

8
Accessibility as a legal issue

• Many countries have legislation or policy
  relating to web accessibility
• Australia Disability Discrimination Act 1992
• United States amendment to the Rehabilitation
  Act (Section 508)
• For details of legislation effective elsewhere
  see http//www.w3.org/WAI/Policy/
• Australia was the first country to have its laws
  tested
• Maguire v SOCOG

9
Accessibility as a legal issue

• Section 24 of the Disability Discrimination Act
  1992 makes it unlawful for web sites to be
  inaccessible to the disabled
• Legislation relates to
• Profit and non-profit sites
• Hobbyist sites
• Only defense is the imposition of unjustifiable
  hardship

10
Accessibility as a legal issue

• DDA is a complaints-based law
• Accessibility standards are not specified in the
  DDA
• HREOC have power to make Advisory Notes
• HREOC advisory notes specify WCAG 1.0 as the
  required standard
• WCAG 1.0 standards were referred to in Maguire v
  SOCOG

11

• What is web accessibility?
• Accessibility as a social and legal issue
• How disabilities affect use of the web
• Accessibility standards
• (WCAG 1.0)
• Accessibility tools

12
How disabilities affect use of the web

• Visual impairments
• Three main groups
• Blind
• Low vision (poor visual acuity, tunnel vision,
  etc.)
• Colour blind ( 8 of male population)
• Red/green
• Blue/yellow
• No colour perception

13
Technologies used

• Screen readers (JAWS, WindowEyes, Home Page
  Reader)
• Braille readers
• Text browsers directing content to speech
  synthesizers
• Screen magnifiers (ZoomText and others)
• Large monitors, low resolution (lt 640x480)
• Personal style sheets (font sizes colour
  combinations)

14
Assistive technologies

• Braille readershttp//www.humanware.com/
• JAWShttp//www.freedomscientific.com/
• Home Page Readerhttp//www-3.ibm.com/able/hpr.htm
  l
• Zoomtexthttp//www.zoomtext.com/

15
Barriers for blind people

• Images that do not have alt text
• Complex images (e.g. graphs or charts) that are
  not adequately described
• Video that is not described in text or audio
• Tables that do not make sense when read serially
  (in a cell-by-cell or "linearised" mode)
• Frames that do not have "NOFRAME" alternatives,
  or that do not have meaningful names
• Forms that cannot be tabbed through in a logical
  sequence or that are poorly labelled
• Document formats that may be difficult for screen
  readers to interpret

16
Barriers for people with low vision

• Web pages with absolute font sizes that do not
  change (enlarge or reduce) easily
• Web pages that, because of inconsistent layout,
  are difficult to navigate when enlarged due to
  loss of surrounding context
• Web pages or images, that have poor contrast, and
  whose contrast cannot be easily changed through
  user override of author style sheets
• Also some of the barriers listed for blindness

17
Barriers for people with colour blindness

• Meaning that is conveyed by colour alone
• Colour that is used as a unique marker to
  emphasise text on a Web site
• Text that inadequately contrasts with background
  colour or patterns
• Browsers that do not support user override of
  authors' style sheets

18
How disabilities affect use of the web

• Motor impairments
• Weakness
• Limited muscle control
• Involuntary movements and tremor
• Lack of co-ordination
• Paralysis
• Joint problems that restrict movements
• Loss of sensation of hands and arms

19
Aids for people with motor impairments

• Specialised mouse
• Special keyboard layouts to match range of
  movement
• Pointing devices
• Head, mouth or wrist stick
• Head-mouse
• Voice recognition software

20
Barriers for people with motor impairments

• Time-limited response options on Web pages
• Navigation that cannot be jumped over
• Forms that cannot be tabbed through in a logical
  order
• Browsers that do not support keyboard
  alternatives for mouse commands

21
How disabilities affect use of the web

• Hearing impairments
• Deafness
• Hard of hearing
• Deaf community is a linguistic community
• First language is sign language
• Problems with education

22
Barriers for people with hearing impairments

• Use of long sentences, uncommon or sophisticated
  vocabulary
• Lack of captions or transcripts of audio on the
  Web
• Lack of content-related images in pages full of
  text, which can slow comprehension for people
  whose first language may be a sign language
  instead of a written/spoken language

23
How disabilities affect use of the web

• Cognitive impairments
• Dyslexia
• Discalculia
• Learning difficulties
• Difficulty processing written or spoken language,
  or numbers when read visually or heard
• May rely on getting information through several
  modalities at the same time

24
Barriers for people with cognitive impairments

• Lack of alternative modalities for information on
  Web sites
• Lack of alternative text that can be converted to
  audio to supplement visuals
• Lack of captions for audio
• Use of unnecessarily complex language
• Complex sentence structures
• Use of long words or sophisticated language

25
How disabilities affect use of the web

• Seizure disorders
• Triggered by visual flickering or audio signals
  at a certain frequency
• To use the Web, people with seizure disorders may
  need to turn off animations, blinking text, or
  certain frequencies of audio

26
Barriers for people with seizure disorders

• Use of blinking text
• Use of flickering animations
• Use of audio frequencies that can trigger seizures

27

• What is web accessibility?
• Accessibility as a social and legal issue
• How disabilities affect use of the web
• Accessibility standards
• (WCAG 1.0)
• Accessibility tools

28
WCAG 1.0 14 broad guidelines

• 1. Provide equivalent alternatives to auditory
  and visual content.
• 2. Don't rely on colour alone.
• 3. Use markup and style sheets and do so
  properly.
• 4. Clarify natural language usage.
• 5. Create tables that transform gracefully.
• 6. Ensure that pages featuring new technologies
  transform gracefully.
• 7. Ensure user control of time-sensitive content
  changes. (blinking, moving content, page
  refreshing/redirecting)

29
WCAG 1.0 14 broad guidelines

• 8. Ensure direct accessibility of embedded user
  interfaces.
• 9. Design for device-independence.
• 10. Use interim solutions. (old browsers).
• 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.

30
WCAG 1.0 65 checkpoints

• Each guideline has accompanying checkpoints
• Checkpoints are given 3 levels of priority
• Priority 1 - must do requirements (Level A
  compliance)
• Priority 2 should do requirements (Level AA)
• Priority 3 may do requirements (Level AAA)
• The greater the level of checkpoint compliance,
  the more users/user agents can access your
  content

31
Checkpoint 1.1

• Provide a text equivalent for every non-text
  element (e.g., via "alt", "longdesc", or in
  element content)
• This includes images, graphical
  representations of text (including symbols),
  image map regions, animations (e.g., animated
  GIFs), applets and programmatic objects, ascii
  art, frames, scripts, images used as list
  bullets, spacers, graphical buttons, sounds
  (played with or without user interaction),
  stand-alone audio files, audio tracks of video,
  and video

32
Examples of text equivalents
The text is not an equivalent of the graphical
information An equivalent might be Map showing
the location of Monash campuses together with a
long description indicating distance from and
relative location to the city
33
Examples of text equivalents
Look at your page in a text browser to get an
idea of how to write text equivalents
34
Checkpoint 1.1 how to comply

• Text equiv for graphicshttp//www.w3.org/WAI/wcag
  -curric/sam2-0.htm
• Text equiv for graphical representation of
  texthttp//www.w3.org/WAI/wcag-curric/sam5-0.htm
• Text equiv for animationshttp//www.w3.org/WAI/wc
  ag-curric/sam7-0.htm
• Text equiv for frameshttp//www.w3.org/WAI/wcag-c
  urric/sam92-0.htm
• Text equiv for images used as bulletshttp//www.w
  3.org/WAI/wcag-curric/sam13-0.htm
• Text equiv for images used as spacershttp//www.w
  3.org/WAI/wcag-curric/sam14-0.htm
• Text equiv for soundshttp//www.w3.org/WAI/wcag-c
  urric/sam15-0.htm

35
Checkpoint 2.1

• Ensure that all information conveyed with colour
  is also available without colour, for example
  from context or markup
• Checkpoint 2.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam25-0.htm

36
Example of use of colour alone
37
Examples of use of colour alone
38
Checkpoint 4.1

• Clearly identify changes in the natural language
  of a document's text and any text equivalents
  (e.g., captions)
• Checkpoint 4.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam40-0.htm

39
Example of change in natural language

• The rules governing ex parte presentations in
  Commission proceedings
• ltpgtThe rules governing ltspan langlagtex
  partelt/spangt presentations in Commission
  hearingslt/pgt
• The government was toppled in a coup d'état
• ltpgtThe government was toppled in a ltspan
  langfrgtcoup d'étatlt/spangtlt/pgt

40
Checkpoint 6.1

• Organise documents so they may be read without
  style sheets. For example, when an HTML document
  is rendered without associated style sheets, it
  must still be possible to read the document
• Checkpoint 6.1 how to complyhttp//www.w3.org/
  WAI/wcag-curric/sam52-0.htm

41
Example of style sheet problems
Designer delivered markup that had table
background colour in hardcoded in and white text
specified in CSS only lttd bgcolor3366ccgt Blue
text/links on blue background were unreadable
42
Checkpoint 6.2

• Ensure that equivalents for dynamic content are
  updated when the dynamic content changes
• Checkpoint 6.2 how to comply
• http//www.w3.org/WAI/wcag-curric/sam54-0.htm

43
Example of dynamic content update
Text alternative in both cases is discussions
44
Checkpoint 7.1

• Until user agents allow users to control
  flickering, avoid causing the screen to flicker.
• Checkpoint 7.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam60-0.htm

45
Checkpoint 14.1

• Use the clearest and simplest language
  appropriate for a site's content
• Checkpoint 14.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam113-0.htm

46
Example of use of language
Writing in a University context often results in
use of language that is not clear or simple,
e.g. pertains to.. is cognisant
of enculturation into
47
Checkpoint 1.2 (images/imagemaps)

• Provide redundant text links for each active
  region of a server-side image map
• Checkpoint 1.2 how to comply
• http//www.w3.org/WAI/wcag-curric/sam19-0.htm

48
Example of server side image map

• Server side image maps (those using the ISMAP
  attribute in the IMG element) usually cant
  provide any textual information about the links
  that are coded into them

Europe Africa Middle East Asia Australasia
Pacific Americas
49
Checkpoint 9.1 (Images/imagemaps)

• Provide client-side image maps instead of
  server-side image maps except where the regions
  cannot be defined with an available geometric
  shape
• Checkpoint 9.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam66-0.htm

50
Checkpoint 5.1 (tables)

• For data tables, identify row and column headers
• Checkpoint 5.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam43-0.htm

51
Example of showing table headers
ltTABLE border1gt ltCAPTIONgtExample of a simple
data table created using HTML markup.lt/CAPTIONgt ltT
Rgt ltTDgtlt/TDgt ltTHgtColumn 1 headerlt/THgt ltTHgtColumn
2 headerlt/THgt lt/TRgt ltTRgt ltTHgtRow 1
headerlt/THgt ltTDgtColumn 1 Row 1lt/TDgt ltTDgtColumn 1
Row 2lt/TDgt lt/TRgt ltTRgt ltTHgtRow 2
headerlt/THgt ltTDgtColumn 2Row 1lt/TDgt ltTDgtColumn
2Row 2lt/TDgt lt/TRgt lt/TABLEgt
52
Checkpoint 5.2 (tables)

• For data tables that have two or more logical
  levels of row or column headers, use markup to
  associate data cells and header cells.
• Checkpoint 5.2 how to complyhttp//www.w3.org/
  WAI/wcag-curric/sam45-0.htm

53
Example data table
Need to use markup to associate the table headers
with their cells See markup for this table at
http//www.w3.org/WAI/wcag-curric/sam47-0.htm
54
Checkpoint 12.1

• Title each frame to facilitate frame
  identification and navigation
• Checkpoint 12.1 how to comply
• http//www.w3.org/WAI/wcag-curric/sam91.0/htm

55
Example frame titles
Navigation
We are a great company and this is Our terrific
web site where youll Find lots of exciting
products and info
SITE LOGO
Content
About us Products Services Order online
56
Checkpoint 6.3 (applets and scripts)

• Ensure that pages are usable when scripts,
  applets, or other programmatic objects are turned
  off or not supported. If this is not possible,
  provide equivalent information on an alternative
  accessible page
• Checkpoint 6.3 how to complyhttp//www.w3.org/
  WAI/wcag-curric/sam56.0/htm

57
Example of applets
Applet content (buttons with white text) not
accessible to text browser/speech reader
58
Example of applets
Applet navigation not accessible
59
Checkpoint 1.3 (multimedia)

• Until user agents can automatically read aloud
  the text equivalent of a visual track, provide an
  auditory description of the important information
  of the visual track of a multimedia presentation
• Checkpoint 1.3 how to complyhttp//www.w3.org/
  WAI/wcag-curric/sam20.0/htm

60
Checkpoint 1.4 (multimedia)

• For any time-based multimedia presentation (e.g.,
  a movie or animation), synchronize equivalent
  alternatives (e.g., captions or auditory
  descriptions of the visual track) with the
  presentation
• Checkpoint 1.4 how to comply
  http//www.w3.org/WAI/wcag-curric/sam22.0/htm

61
Checkpoint 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

62

• What is web accessibility?
• Accessibility as a social and legal issue
• How disabilities affect use of the web
• Accessibility standards
• (WCAG 1.0)
• Accessibility tools

63
Evaluation tools

• Bobby http//www.cast.org/bobby/
• The Wave http//www.temple.edu/inst_disabilities/
  piat/wave/
• Lynx Viewer
• http//www.delorie.com/web/lynxview.html
• Vizcheck http//www.vischeck.com/

64
Validation tools

• W3C HTML Validation Service
• http//validator.w3.org/
• CSS Validation Tool
• http// jigsaw.w3.org/css-validator/

65
Repair tools

• A-Prompt http//aprompt.snow.utoronto.ca/
• HTML Tidy http//www.w3.org/People/Raggett/tidy/

66
Resources

• W3C Web Accessibility Initiative
  (WAI)http//www.w3.org/WAI/
• WCAG 1.0http//www.w3.org/TR/WCAG10/
• WCAG 2.0http//www.w3.org/TR/WCAG20/
• HREOC Web Accessibilityhttp//www.hreoc.gov.au/di
  sability_rights/webaccess/
• Techniques for WCAG 1.0http//www.w3.org/TR/WCAG1
  0-TECHS/
• Accessibility features of CSShttp//www.w3.org/TR
  /CSS-access
• Curriculum for WCAG 1.0http//www.w3.org/WAI/wcag
  -curric/