Introduction to Accessibility

1. Introduction to Accessibility

2. Learning objectives By the end of this lecture, you should be able to: • Define accessibility and explain why accessibility is important • Describe accessibility regulations • Define assistive technology • Identify different disability types • Explain checklist items from accessibility guidelines • Locate accessibility resources

3. What is accessibility and why is it important?

4. What is accessibility? • Accessibility is successful access to information and use of information technology by people who have disabilities or varying levels of physical ability. • Accessibility involves designing or modifying equipment, hardware, or software to allow access by people with disabilities.

5. Accessibility is about all of us. World population: 6+ Billion Worldwide number disabled: ~1 Billion (16%) United States population: 281 Million United States number disabled: 54 Million (19%) Source: Population Reference Bureau, United Nations and. Forrester Study Commissioned by Microsoft Physical Disabilities Other conditions that inhibit I T use Disabled population Aging Nonnative speakers Temporary disabilities In the US, 17.9M people speak a language other than English at home 16% of world population is disabled Everyday situations disable certain senses temporarily By 2010, 60% of US population will be over the age of 35 Noisy environments (hearing) Driving (sight) Poor hearing Mobility Deaf Failing vision Color blind Blind Accessibility affects many people, especially with the growing need to embrace aging workforces, customers, and citizens.

6. Serving end users better Technologies developed for disabled people are useful to the aging and multicultural populations. • Nonnative speakers with partial fluency can benefit from seeing captions in real time, as a person speaks. • Speech-to-text technology can give a competitive advantage to organizations with audiences whose preferred language differs from the spoken language. • Serving people who are not native speakers can open new markets or expand existing market share. • As people age, hearing and eyesight often diminish. • Technologies designed to assist low vision and hard of hearing people can give a competitive advantage to organizations with older customers or an aging workforce. • As an aging population, the “baby boomers” in particular have significant disposable income, retirement investments, and insurance needs.

7. Example of user experience with slight visual impairment Example of 20-year-old user who has 20/20 vision. Example of 50-year-old user who has 80% of original vision and slight colorblindness.

8. Standards and legislation appearing worldwide Europe • Many countries have enacted legislation or national standards: • UK – Web accessibility, 2002 • Germany – Barrier Free Decree, 2002 • Italy – ICT accessibility & government procurement, 2004 • Switzerland – Public sector Web accessibility, 2004 • European Union – Procurement of accessible I T, 2004 • Spain – Accessibility for computer platforms, 1998 • Ireland – I T accessibility guidelines, 2002 • Netherlands – Web accessibility, 2003 • Sweden – Guidelines for computer accessibility, 1998 Canada • Canadian Human Rights Act • Ontarians with Disabilities Act – 2001 • Common Look & Feel Web guidelines – 2001 • United States • Section 508 of Rehabilitation Act requires federal agencies to purchase electronic and information technology that is accessible to people with disabilities. • States are enacting similar legislation. • China • Law of the PRC on the Protection of Disabled Persons – Provisions on employment, public services, transportation, and legal sanctions, 1991 • Japan • JIS standards • Litigation and legal inquiries triggered by legislation in the United States • State of Arkansas: New state accounting system built on SAP technology is inaccessible to blind employees. • Commonwealth of Pennsylvania: Web portal inaccessible to blind. SAP software is the source of the problem; IBM is providing integration services. • Metro Atlanta Mass Transit: Web site schedule and services inaccessible. • Southwest Airline: Reservations and ticketing are inaccessible. • Connecticut: Attorney General’s office investigates Web-based tax filing services. • Bank of America: inaccessible Web sites and A TMs. • America Online: Software incompatible with screen readers. • Australia / New Zealand • Disability Discrimination Act passed – 1996 • Australian Bankers’ Association endorsed e-commerce standards – 2000 • Australian Communications Industry Forum's (ACIF) Guidelines – 2001

9. Accessibility laws and regulations: Impact on designers

10. Accessibility laws and regulations: Impact on designers.

11. Accessibility laws and regulations: Impact on designers

12. Assistive technologies

13. Assistive technologies • Assistive technology (A T) is hardware or software that is used to increase, maintain, or assist the functional capabilities of people with disabilities. In short, it can be any device or technique that assists people in removing or reducing barriers and enhancing their everyday life activities. Examples of assistive technology include: • Screen readers, which are applications that speak screen information to people who are blind • Screen magnifiers, which are are software that enlarges information on the screen for people with low vision • Closed captioning, which displays the text version of the audio for people who are deaf or hard of hearing • Special keyboards and input devices that assist people with limited hand use or mobility impairments

14. Accessibility and assistive technology • Accessibility: Attribute of information technology that allows it to be used by people with varying abilities • Assistive Technology: Specialized I T that allows a user with a disability to access information technology

15. Understanding the impact of disabilities on an I T user

16. Vision Issues: Cannot use the mouse for input, cannot see the screen, or might need magnification and color contrast Assistive Technology: • Screen readers • Braille displays • Screen magnifiers

17. Blind users must use a screen reader and the keyboard. User presses Alt key to access menu. User presses right arrow key. The menu must be coded in a standard way so that the screen reader understands and can convey the information to the user.

18. Users with low vision need enlargeable fonts and high-contrast settings. Font Size Larger font size Even larger font size Low Contrast High Contrast Large fonts and high contrast A screen magnifier is needed when user needs go beyond operating system capabilities.

19. Color deficiency Color-deficient users need more than color differences. Greensignals a server is online. Redsignals a server is offline. The color blind user sees one color.

20. Color deficiency (continued) It is okay to use color, as long as color is not the only way to convey information.

21. Four score and seven years ago, our fathers… Hearing Issues: Cannot hear audio, video, system alerts, or alarms Assistive Technology: • Closed captioning • Transcripts • ShowSounds

22. Mobility Issues: Limited or no use of hands, limited range, speed, and strength Assistive Technology: • Alternate input (for example, voice) • Access keys • Latches that are easy to reach and manipulate

23. Cognitive Issues: Difficulty reading and comprehending information, difficulty writing Assistive Technology: • Spell checkers • Word prediction aids • Reading and writing comprehension aids

24. Accessibility checklists

25. Text equivalents for images, audio, and multimedia are key for Web checklist.

26. Software requirements drive the way that code is implemented.

27. Documentation and support services are also covered; testing is required.

28. A closer look at some Web coding techniques

29. Common Web accessibility issues

30. Provide a text equivalent for every non-text element. • Alternate text (alt text) • Use alt=“text description” to provide text equivalents for images, graphs, charts. • Use null alt text (alt=“”) if images are unimportant or redundant. • Do not use alt=“” for image links unless the links are redundant. • Do not use alt=“ ” to implement null alt text. • Accessibility checkers check for the presence of alt=“text” or alt=“”. • Add alt text for all image links (input type=“image”). Correct alt text: <input type=“image” name=“Go” src=go.gif alt=“Go”> Incorrect use of null alt text: <input ytpe=“image” Name=“Go” src=“go.gif alt=“”> Correct alt text for spacer images: <img src= “spacer.gif” alt=“”> Incorrect alt text: <img src=“spacer.gif” alt=“spacer.gif”> <img src=“sam.gif” alt=“Sam”>

31. Provide a method to skip repetitive navigation links. • Provide a way to skip over navigation links to quickly get to main content. • Screen readers read Web pages sequentially, so users have to listen to all navigation links on the page before they hear the main content. • A “skip to main” link enables screen reader users to skip navigation links on every page. • Correct coding for skip link using an image link: <a href="#navskip"> <img src="http://spacer.gif.gif" alt="skip to main content" width="10" height="33" border="0"> </a> … <a name="navskip"></a> <p>This is the main content on the page.</p> • Skip navigation links cannot be tested using checking tools. You must listen to the Web page with assistive technology to hear the link and verify that it works.

32. Give frames names that facilitate frame identification and navigation. • Provide a meaningful title attribute for each FRAME element. • Meaningful titles (for example, “Main Content”, “Navigation”, or ”Logo”) aid navigation of the Web site. • Accessibility checkers check for the existence of the Frame title attribute; they do not check whether the title is meaningful. • Correct coding for FRAME elements: <frame title=“Navigation” src=“bp_left.html"> <frame title=“Logo”name=“top” src=“bp_header.html"> <frame title=“Main Content” src=“maincontent.html"> • Incorrect coding for FRAME elements: <frame src=“bp_left.html"> <frame name="top" src=“bp_header.html“> <frame title="body_center" src=“maincontent.html">

33. Screen readers read frame titles. • Use the screen reader command to list the frames on the page. • Select the frame you want to read. • Accessible frame titles: • Inaccessible frame titles:

34. Use forms to allow people using A T to access the functionality required to complete and submit the form. • Most form elements (for example, text fields, checkboxes, and radio buttons) require explicit labels so the elements can be read by assistive technology. • Associate text labels using the LABEL element and the for attribute. • Proximity is not sufficient to help assistive technology “see” field labels. • Accessibility checkers check for the presence of the LABEL element. • Correct coding of a text field for accessibility: • <label for=“search”> Search</label><br> <input name=“yourname” id=“search”> • Incorrect coding of a text field for accessibility: • Missing LABEL element: Search<br> <input name=“yourname”> • Missing id tag: <label for=“search”> Search</label> <br> <input name=“yourname”> • Incorrect id tag: <label for=“search”>Search</label> <br> <input name=“yourname” id=“mine”> • Implicit LABEL: <label>Search</label><br> <input name=“yourname”>

35. Screen readers read form labels. • Locator feature – tells where am I? Text entry Labeled Search for Form 1 At 28% of page • List of links • Controls reading with arrow keys Search for [Text] • Read title attribute

36. Define row and column headers for data tables. • Row and column headers must be defined so they can be spoken. • Use the TH element to mark up heading cells. • Use the scope attribute to identify row or column headings. • Use the headers and id attribute to identify row or column headings on complex tables that use rowspan or colspan. • Accessibility checkers identify “possible” errors for tables because distinguishing between data and layout tables is difficult. • The CAPTION element associates a title with the table.* • <caption>Computer Science Job Openings - November 2005</caption> • The summary attribute provides additional information about the table.* • <table summary="Table that summarizes federal job openings by date"> *Recommended technique, not required by Section 508 guidelines.

37. Identify row and column headers using the scope attribute. Accessible table headers using scope <tr> <td>&nbsp;</td> <th scope=“col”>Percentage with any disability</th> <th scope=“col”>Number with any disability</th></tr> <tr> <th scope=“row”>Population 5-15 years</th> <td>5.8</td> <td>2,614,919</td> <tr> <th scope=“row”>Population 16-64 years</th> <td>18.6</td> <td>13,978,118</td></tr> …… Inaccessible table headers <tr> <td>&nbsp;</td> <td>Percentage with any disability</td> <td>Number with any disability<td></tr> <tr> <td>Population 5-15 years</td> <td>5.8</td> <td>2,614,919</td></tr> <tr> <td>Population 16-64 years</td> <td>18.6</td> <td>33,153,211</td></tr> ……

38. Identify row and column headers using headers / id attributes. Accessible table headers using headers tag <table summary=“Job openings by position> <caption=“Technical Job Openings as of Nov 1, 2003” <tr> <th id=“col1”>Job Position</th> <th id=“col2”>Level</th> <th id=“col3”>Location</th> <th id=“col4”>Agency</th></tr> ….. <tr> <th headers=“col1” id=“compsci”>Computer Scientist</th> <th headers=“col2” id=“gs17” >GS-17</th> <td headers=“compsci gs17 col3”>US-MS-VicksBurg</td> <td headers=“compsci gs17 col4”>Army Research Lab</td></tr> <tr> <td headers=“compsci gs17 col4”>Army Corps of Engineers</td></tr> …… Inaccessible table headers: <table summary=“Job openings by position> <caption=“Technical Job Openings as of Nov 1, 2003” <tr> <td>Job Position</td> <td> Level</td> <td>Location</td> <td>Agency</td></tr> ……. <tr> <td>Computer Scientist</td> <td>GS-17</td> <td>US-MS-Vicksburg</td> <td>Army Research Lab</tr> <tr><td>Army Corps of Engineers</td></tr> <tr> <td>US-MD-Prince George County</td> <td>Army Research Lab</td></tr> ……

39. Screen readers read table headers. • Table Jump reading • Reads the CAPTION element, which gives your table a title. • Reads the summary attribute of the TABLE element, which describes the overall structure of a table. • Table Navigation reading • Reads table headers. • Use TH to identify row and column headers for simple data tables. Use the scope attribute on TH cells, if needed, to further clarify header and data cell relationships. • Use the headers attribute on data cells and the id attribute on header cells to identify headers for complex data tables.

40. Listening to table headers with a screen reader • Listening to the table without headers – response varies based on A T used Matriculated Students. College of Education. 523 or Matriculated Students. Undergraduate. 523 or Matriculated Students. College of Education. Undergraduate. 523 • Listening to the table with headers – consistent and correct results Matriculated Students. In state. College of Education. Undergraduate. 523

41. Summary of Web accessibility techniques

42. Additional resources for learning about accessibility • IBM Human Ability and Accessibility Center • http://www.ibm.com/able • IBM Human Ability and Accessibility Checklists and Techniques • http://www.ibm.com/able/guidelines • IBM Home Page Reader • Test instructions: http://www.ibm.com/able/guidelines/web/webhprtest.html • Trial Download: http://www.ibm.com/able/solution_offerings/hpr.html • Guide to Section 508 Standards for Electronic and Information Technology • http://www.access-board.gov/sec508/guide/ • Web accessibility tutorials • http://www.jimthatcher.com/webcourse1.htm • http://www.webaim.org • http://www.section508.gov