Designing Web Pages for Accessibility

1
Designing Web Pages for Accessibility

• Mary Henthorn
• Technology Investigation Center

2
AccessibleMeans the ability to receive, use,
and manipulate data and operate controls included
in information technology Convey
Information Provide Functionality By
Nonvisual Means
3
Why Build Accessible Websites?

• Reach a Wider Audience
• Clearer Information and Functionality
• Its the Law

4
The Essence of the Internet

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

5
How are Computers Made Accessible?

• Hardware or operating systems
• Features in software
• Assistive technology
• Specialized software

6
Assistive Technology

• Software program reads text on the screen using
  speech synthesizer.
• Identifies graphics like buttons or icons
• Control computer using keyboard instead of mouse
• Refreshable Braille display

Braille display
7
How Browsers Work

• Hypertext Markup Language (HTML)
• NOT a programming language
• Markup instructions for print/display
• Tags are standard HTML markup messages
• IE/Netscape/Opera interpret HTML
• Linear language

8
How Screenreaders Work

• Finds text content within HTML tags
• Ignores HTML tags for appearance
• Reads content
• Reads HTML tag messages
• Cant read pictures
• Linear language!

9
JAWS Example
10
Information Technology Access for the Blind
Law(Act 1227 of 1999)
11
Arkansas Standards

• Effective, interactive control and use readily
  achievable by nonvisual means.
• Compatible with information technology used by
  other individuals with whom the blind or visually
  impaired individual must interact.
• Integrated into networks used to share
  communications

12
IT Access for the Blind Law (Act 1227)

• Equivalent access by nonvisual means.
• Exceptions
• (a) there is no available means by which the
  product can be made accessible and there is no
  alternate product
• (b) its meaning cannot be conveyed nonvisually.

13
Section 508Part 1194 Electronic and
Information Technology Accessibility Standards
14
Who is Covered in Section 508?

• Federal department and agencies including the US
  Postal Service
• Contractors providing services or products to
  Federal agencies must provide Section 508
  compliant deliverables.
• Agencies or business receiving any type of
  federal funds.

15
Types of Impairments

• Visual
• Motor
• Hearing
• Cognitive, Speech, and Neurological

16
Visual Impairments

• Low vision
• Color blindness
• Blindness

Marla Runyan First legally blind person to
compete in the Olympics - 2000 Sydney
Stevie Wonder Singer and song writer
17
Color Blindness

• Imagine if you were colored blind and faced with
  the following
• Click on the Green button to continue, the Yellow
  button if you need help, or the Red button if you
  want to quit.

18
Color Blindness

• But what if you saw

19
Color Contrasts
20
How To Make An Accessible Webpage

• (a) A text equivalent for every graphic
• (b) Equivalent alternatives for any multimedia
  presentation
• (c) information conveyed with color is also
  available without color
• (d) Documents shall be organized so they are
  readable without requiring an associated style
  sheet.

21
Make That Page Accessible

• (e) Redundant text links for server-side image
  map
• (f) Client-side image maps preferred
• (g) Identify row and column headers for data
  tables.
• (h) Use markup to name cells in complex tables

22
How To Make It Accessible

• (i) Title Frames
• (j) Avoid causing the screen to flicker with a
  frequency greater than 2 Hz and lower than 55
  Hz.
• (k) A text-only page, with equivalent information
  or functionality, if needed

23
You Can Do It!

• (l) Provide descriptive text with scripts
• (m) Provide alternatives to applets and other
  imbedded objects

24
Rest of the 508 Standards

• (n) Forms must allow all functionality including
  directions and cues
• (o) Permit users to skip repetitive navigation
  links
• (p) When a timed response is required use alerts
  and given sufficient time to indicate more time
  is required.

25
Checklist for Testing Your Web Pages for
Accessibility

• Turn off graphics, make sure the ALT text
  displayed makes the page usable.
• Turn off sounds, make sure no important
  instructions are lost.
• Use the High Contrast option in the Accessibility
  Options section of Control Panel, restart the
  browser, make sure the page is still readable.

26
Checklist for Testing Your Web Pages for
Accessibility

• Use Custom Font Sizes in the Display section of
  Control Panel.
• Use the largest font size supported by the
  browser (the largest is only available when High
  Contrast mode is turned on).
• Resize the browser window larger and smaller.

27
Checklist for Testing Your Web Pages for
Accessibility

• Navigate using the keyboard, make sure TAB
  traverses all links in reasonable order and that
  CTRLTAB moves between panes or sections.
• Use an analysis tool, to examine your pages.
• If you have access to a screen reader (many can
  be downloaded for free) run your pages through it
  to make sure it reads correctly.

28
Bobby Will Check Your Page

• Center for Applied Special Technology
• http//www.cast.org/bobby/
• http//crowleys.crsc.k12.ar.us

29
Free Web Page Check

• Welcome to Bobby WorldWide
• About Bobby Terms of Use Advanced Options
  FAQ Support Approved Sites Online
  Discussions
• URLhttp//crowleys.crsc.k12.ar.us
• Web Content Accessibility Guidelines 1.0
• U.S. Section 508 Guidelines

30
Results of Bobby Test

• Section 508 Accessibility
• This page does not meet the requirements for
  Section 508 Approved status. Below is a list of 1
  Section 508 accessibility error(s) found
• Provide alternative text for all images. (5
  instances) Lines 19, 23, 31, 65, 68

31
Text Equivalent for Graphics

• A text equivalent for every graphic
• Look at Crowley's Ridge page source
• Look at correct source

32
Alt Tags

• Most authoring tools provide a space for you to
  enter this information
• Or put insert the Alt tag with a text editor
• ltimg border"0" src"main.jpg" altCrowleys
  Ridge Coop graphic width"650" height"65"gt

33
Use Column Headers

• ltTABLE border1gt
• ltTRgt
• ltTDgtlt/TDgt
• ltTHgtCol. 1 headerlt/THgt
• ltTHgtCol. 2 headerlt/THgt
• lt/TRgt

34
Use Row Headers

• ltTRgt
• ltTHgtRow 1 headerlt/THgt
• ltTDgtC1R1lt/TDgt
• ltTDgtC1R2lt/TDgt
• lt/TRgt

35
Specify the Language

• ltHTML lang"it"gt
• ltHEADgtlt/HEADgt
• ltBODYgt
• ltPgtVolete sapere l'origine della parola
  cappuccino, il popolare caffelatte
  all'italiana?lt/Pgt
• lt/BODYgt
• lt/HTMLgt

36
Acronyms

• TIC - read like tic
• CRC - read like CRC
• C R C says each letter

37
Tab Order

• ltFORM METHOD"POST"gtltINPUT TYPE"SUBMIT"
  VALUE"Enter" tabindex2"gtWhat's your favorite
  color?ltBRgtRed ltINPUT TYPE"CHECKBOX"
  NAME"CBVar1" VALUE"CB1" tabindex1"gtltBRgt
• lt/FORMgt

38
Tab Order

• There is a 90 chance of snow later this evening

• Classes at all elementary schools will start 1
  hour late tomorrow

There is a 90 Classes at all chance of snow
elementary schools later this evening will start
1 hour late tomorrow
39
Pop-ups

• Visit The Wonderful World of Sponge (Please note
  this link will open the page in a new browser
  window.)

40
Background Color

• ltBODY BGCOLOR"FFFFFF"gtThe above example
  provides a white background.

41
Portable Document Files (PDF)

• Convert to Adobe 5.0 format
• Save as Accessible PDF

42
Accessible Web Pages

• Convey your website message clearly
• Pave the way for new technologies
• Expand your audience
• Comply with state and federal law

43
Beyond Web Pages

• Laws apply to all Information Technology, not
  just Web pages
• Off-the-shelf and Custom Software
• Applications developed with Visual Basic, Java
  and any other language
• Hardware

44
Prepare for Wireless Application Protocol Devices

• Prepare websites for on-the-fly conversion to WAP
  devices

45
Prepare for Foreign Language Translation

• Tools are available for automatic translation
• Opportunities for foreign language studies
• Reach non-English speaking parents and others
  with interests in your school

46
Improve Organizational Image

• An accessible web site promotes a favorable image
  in the community

47
Reduce Legal Uncertainties

• Federal Section 508 of ADA
• Information Technology Access for the Blind Law
  (Act 1227 of 1999).
• AOL, HR Block, Intuit, Bank of America, and
  Wells Fargo have had legal action brought against
  them because of inaccessible web sites.
• In Arkansas the Directors of DHS, DIS, and DFA
  have been named in a lawsuit over an
  applications accessibility.

48
Section 508

• Federal IT Accessibility Initiative
• http//www.section508.gov

49
W3C

• Web Accessibility Initiative,
• World Wide Web Consortium
• http//www.w3.org/WAI/

50
Tutorials

• Curriculum for Web Content Accessibility
• http//www.w3.org/WAI/wcag-curric/
• Webaim Web Accessibility In Mind
• http//www.webaim.org
• Web Developers Virtual Library
• http//www.wdvl.com/Authoring/HTML/

51
Testers

• Bobby Web page tester
• http//www.cast.org/bobby/
• The Wave page tester
• http//www.temple.edu/inst_disabilities/piat/wave/
  index.html

52
PDFs

• Adobes Accessibility Resource
• http//access.adobe.com/

53
Language Codes

• http//www.oasis-open.org/cover/nisoLang3-1994.htm
  l

54
Beyond HTML

• Java Accessibility and Usability Work
• http//trace.wisc.edu/world/java/java.htm
• Microsoft Accessibility
• http//www.msdn.microsoft.com/library/default.asp?
  url/nhp/Default.asp?contentid28000544

55
HELP!!!

• TIC Standards for Equivalent Access Ongoing
  Project
• http//www.oit.state.ar.us/TIC/SpecTopics/SEA/SEA_
  Home.asp
• David.McMahon_at_mail.state.ar.us