Week 12: Accessibility and Accessible Site Design

1
April 8, 2008

• Week 12 Accessibility and Accessible Site Design

Margaret Kipp margaret.kipp_at_gmail.com http//myweb
.liu.edu/mkipp/
2
Further Readings on Accessibility

• Study of users using screen readers
  http//redish.net/content/papers/interactions.html
  
• Discussion on accessibility by a blind programmer
  http//www.mathreference.com/accessible.html

3
Accessibility Tools

• Opera Browser http//www.opera.com/
• and Opera Voice http//www.opera.com/products/desk
  top/voice/
• Lynx Browser http//home.pacific.net.sg/kennethkw
  ok/lynx/
• W3C List of Accessibility Tools
  http//www.w3.org/WAI/ER/tools/complete.html

4
Best Response to Browser Specific Extensions

• "Anyone who slaps a 'this page is best viewed
  with Browser X' label on a Web page appears to be
  yearning for the bad old days, before the Web,
  when you had very little chance of reading a
  document written on another computer, another
  word processor, or another network."
• Tim Berners-Lee in Technology Review, July 1996

5
CSS for Style and Design Demo

• CSS Zen Garden is a website which demonstrates
  just how much the site style can be controlled
  using CSS
• http//www.csszengarden.com/

6
Accessibility Issues

• two questions
• why?
• how?
• why is an ethical and philosophical question
  (also a legal one since you may be required to
  make your site accessible by the ADA)?
• how is a technical question

7
Why Accessibility is Important

• accessibility benefits everyone, not just the
  disabled
• Americans with Disabilities Act (ADA) compliance
• expand number of people who can use the site
• many different types of disabilities ranging from
  colour blindness to problems using the mouse or
  keyboard to blindness to cognitive disabilities

8
Legal Issues

• ADA - Americans with Disabilities Act
  http//www.usdoj.gov/crt/ada/
• ADA Standards for Accessible Design
  http//www.ada.gov/stdspdf.htm
• Section 508 of the Rehabilitation Act (29 U.S.C.
  794.d) specifies accessibility standards for
  information technology that must be met by
  Federal government sites and organisations that
  work with or receive funding from the government

9
Who Needs Accessibility?

• blind or low vision colour blind or other vision
  impairments
• deaf or hard of hearing
• mobility impaired
• learning disabled/cognitive impairments
• users with old computer equipment
• cell phone and PDA browsers

10
Effects of Design on Accessibility

• poor design can make accessibility very difficult
  or almost impossible
• a page using images for text is completely
  unreadable to someone who is blind or using a
  text based browser (e.g. cell phone browser) and
  no amount of attempting to enlarge the text will
  help

11
"Problems" with Accessibility

• more work
• many web developers believe that accessible
  design will be more work
• compromised design
• many web developers also believe that accessible
  design will lead to an ugly page with no style
• browser specific design is an example of an
  important issue, since it is generally not
  accessible but may look good in that browser

12
Current Solutions

• use a web accessibility checker
• note the web accessibility checker most popular
  with many developers was Cast later Watchfire
  Bobby, since Feb. 1 2008, this product is no
  longer available for free
• try the W3C List of Accessibility Tools
  http//www.w3.org/WAI/ER/tools/complete.html
• follow the Web Content Accessibility Guidelines
  (WCAG)?
• http//www.w3.org/TR/WCAG20/

13
Accessibility Solutions

• make smarter adaptive technologies
• improve standards and best practices
• increase use of CSS for formatting
• especially eliminating frames, use of tables for
  formatting and use of graphics to display text
• create better tools to make accessible design
  easier

14
Steps to Better Accessibility

• Fix usability problems
• If non disabled users find your page confusing
  and difficult to use, disabled users will also
  find it confusing and difficult to use
• Read articles and books on accessibility,
  especially if the authors have spoken to actual
  disabled users
• Use CSS for formatting
• Do simple acccessibility fixes first (e.g. alt
  attributes)?

15
Simple Accessibility Fixes

• Add appropriate alt text to every image/ don't
  use images to display fancy text
• alt attribute, use descriptive text, consider an
  asterisk or number for a graphical bullet
• Make forms work with screen readers
• use the name attribute to provide the name of
  the field so users can tell what should be
  entered
• Create a "Skip to Main Content" link to skip
  navigation

16
Accessibility Fixes 2

• Make content accessible from the keyboard
• Dont use Javascript without a good reason
• Provide descriptions of audio/video content. This
  is also useful for sighted/hearing users who
  prefer to read an item or would like a summary

17
Testing for Accessibility

• the W3C provides suggestions on how to test for
  accessibility
• http//www.w3.org/WAI/eval/preliminary.html
• suggested procedure
• examine a representative set of pages in a
  graphical browser (e.g. Firefox, Opera, IE)?
• examine the same pages using a text or voice
  browser or a screen reader
• compare the results from each test

18
Testing 2

• Examine pages using graphical browsers
• Turn off images and check for alternative text
• Turn off the sound, is audio/video content still
  accessible via a summary or description?
• Adjust font size (or try anyway).
• Test different screen resolutions and browser
  window sizes
• Change the display colours.
• Navigate using the keyboard

19
Testing 3

• Examine pages using specialised browsers (e.g.
  Lynx - text browser)?
• Is available information equivalent?
• Is the information presented in a meaningful
  order?
• Use automated accessibility evaluation tools
• List problems encountered and where/when they
  were identified
• list possible solutions

20
Browser Emulators

• software that will display a website as it would
  appear in another browser
• Opera Mini Emulator
• simulates the Opera Mini browser found in many
  cell phones and PDAs
• http//www.operamini.com/demo/
• Lynx Emulator
• simulates the text mode browser Lynx
• http//www.delorie.com/web/lynxview.html

21
Browser Emulators 2

• DejaVu Browser Emulators
• a set of emulators showing very old browsers
• http//dejavu.org/emulator.htm
• Browser History
• http//www.livinginternet.com/w/wi_browse.htm

22
WCAG 2.0 Guidelines

• covers a wide range of recommendations for making
  Web content more accessible
• following these guidelines will make content
  accessible to a wider range of people with
  disabilities
• Covers statements of what to do to resolve an
  accessibility problem, but not in a technology
  specific way
• e.g. "provide alternative text descriptions for
  images" rather than "use an alt attribute"

23
WCAG 2

• guidelines fall into 5 basic categories
  perceivable, operable, navigable, understandable
  and robust
• perceivable
• information and interfaces must be presented in
  ways that can be perceived by the user
• operable
• user must be able to navigate and interact using
  their own methods (cannot require a mouse, etc)?

24
WCAG 3

• navigable (similar to operable)?
• understandable
• content must be understandable to users
• this means well organised as well as clearly
  written
• robust
• content must be able to be interpreted by a wide
  variety of user agents (web browsers) including
  assistive technologies (e.g. a screen reader for
  the blind)?

25
Enhancing Perception

• Use colour safely
• problem low contrast between text and background
  or use of colours to indicate important
  information is imperceptible to colour blind,
  blind or low vision user
• solution ensure colour contrast is high and use
  other text decorations (underline, bold) along
  with colour
• Try http//www.vischeck.com/vischeck/ or
  http//www.iamcal.com/toys/colors/to check
  colours and colour contrast

26
Perception 2

• Use real captions on tables, not just text
• problem a bit of text above the table is not
  associated with the table by a screen reader
• solution use the tag to add the
  caption and use CSS to format it nicely
• Use real headers on tables
• problem use of tags to mark headers so the
  formatting is the same
• solution use the tag for the headers of the
  table columns and format with CSS

27
Perception 3

• Use of spacer images (invisible images) to format
  a website
• problem spacer images show up as filenames in
  text browsers and screen readers, this is ugly
  and annoying
• solution use alt attribute set to an empty
  string ""
• or use CSS to format not spacer images

28
Perception 4

• Use of images for bullets in lists
• problem image used for a bullet does not display
  for screen readers or text only browsers
• solution use appropriate alt attributes for all
  images or use CSS bullets for list items
• Use of images for horizontal rules
• this also holds true for horizontal rules
  which can be modified to be fancier using CSS

29
Perception 5

• Providing text equivalents for images or
  audio/video material
• problem not accessible to various users
• solution use alt attributes for all images, use
  the longdesc attribute to provide a long
  description of the image (this is usually a link
  to another page containing the description)?
• provide a text summary (at least) of audio/video
  material, use closed captioning in video material

30
Perception 6

• Use relative font sizes
• problem fonts cannot be resized
• solution make fonts relative rather than a
  specific em or, point or pixel size (use 120
  rather than 14 pt)?

31
Enhancing Operability

• Use links not javascript links
• Define keyboard shortcuts
• this is the accesskey attribute for the a(nchor)
  tag,
• this allows users to select a specific link if
  they are visiting a familiar page
• accessed using ALT (IE) or CTRL (Mac) or ALT
  SHIFT (Firefox) followed by the defined accesskey
  (a single letter or number)?

32
Operability 2

• Use labels in forms
• problem difficult to figure out what each field
  in a form is for
• solution use the name attribute to label form
  elements
• Identify the author of the page
• Use the tag
• e.g. This page was written by "http//www.example.org/"Jane Doe
  

33
Enhancing Navigation

• Don't open new windows
• i.e. don't use the target attribute for links
• Provide additional navigation aids
• use the tag to add information about the
  site structure, this can be accessed optionally
  in Firefox and Opera and in some special browsers
  (e.g. Lynx)?
• e.g. href"http//url/of/home/page" /

34
Navigation 2

• Allow users to skip navigation
• problem navigation is often at the top of the
  page or the left side, so it is displayed first
• solution add a link to "skip to main content"
  right before the navigation or rearrange your
  page so the content is displayed first followed
  by the navigation, and use CSS to make the
  navigation display at the top or left side

35
Navigation 3

• Add titles to links
• title attribute allows you to add a title to
  your link, displayed as a tool tip in most
  browsers
• Use header tags to organise contents
• use the , etc tags to organise contents,
  use CSS to format nicely
• Provide a search box
• search is good for everyone

36
Enhancing Understanding

• Identify page language (and language of parts of
  the page)?
• Use the lang attribute for the page xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en"
• Use the lang attribute to identify other
  languages on the page so screen readers will read
  it correctly
• ISO 639 standard has other language codes
  http//www.loc.gov/standards/iso639-2/php/English_
  list.php

37
Understanding 2

• Use meaningful page titles
• all browsers display the title, whether in the
  title bar or at the top of the page, screen
  readers say this first, also Google uses it to
  index your page
• is a required element in XHTML
• Define all acronyms and abbreviations
• use the or tags
• e.g. Language"XHTML

38
Understanding 3

• Provide a summary for tables
• explain what the table is supposed to show the
  user
• use the summary attribute for tables to add a
  summary, this is distinct from the caption which
  is more like a table title

39
Enhancing Robustness

• Use the correct DOCTYPE
• required for XHTML, but useful for HTML since the
  browser will not have to guess what version of
  HTML you are using
• Present the main content first
• Place your main content first in the file, but
  use CSS to locate it after your navigation,
  screen readers and text only browsers will ignore
  this and start with the main content

40
General Accessibility

• Avoid ASCII art and use emoticons judiciously
• Avoid background images, they obscure text (note
  you can use CSS to add plain colour boxes under
  text to make it readable over a background image
• Avoid using XHTML tags for formatting (e.g.
  blockquote to indent or tables to organise non
  tabular data)?
• Avoid timed redirects and page refreshes

41
Create an Accessibility Statement

• useful because otherwise it is impossible to tell
  that your website has these features and users
  may just assume it's not there
• examples
• http//diveintomark.org/about/accessibility
• http//www.ipl.org/div/accessibility/
• http//detroitcenter.umich.edu/accessibility.shtml

42
Example Sites Using Accessibility Options

• Both sites have separate CSS for different
  devices and use accesskeys and other
  accessibility features
• IPL Kidspace
• http//www.ipl.org/youth/
• University of Michigan Detroit Center
• http//detroitcenter.umich.edu/accessibility.shtml