Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Lecture 9 Accessibility Original

1 522 vues

Publié le

Publié dans : Design, Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Lecture 9 Accessibility Original

  1. 1. Introduction to Accessibility
  2. 2. Learning objectives <ul><li>By the end of this training session, you should be able to: </li></ul><ul><li>Define accessibility and explain why accessibility is important </li></ul><ul><li>Describe accessibility regulations </li></ul><ul><li>Define assistive technology </li></ul><ul><li>Identify different disability types </li></ul><ul><li>Explain checklist items from accessibility guidelines </li></ul><ul><li>Locate accessibility resources </li></ul>
  3. 3. What is accessibility and why is it important?
  4. 4. What is accessibility? <ul><li>Accessibility is successful access to information and use of information technology by people who have disabilities or varying levels of physical ability. </li></ul><ul><li>Accessibility involves designing or modifying equipment, hardware, or software to allow access by people with disabilities. </li></ul>
  5. 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 Disabled population 16% of world population is disabled Mobility Deaf Blind Other conditions that inhibit I T use Aging By 2010, 60% of US population will be over the age of 35 Poor hearing Failing vision Color blind Nonnative speakers In the US, 17.9M people speak a language other than English at home Temporary disabilities Everyday situations disable certain senses temporarily Noisy environments (hearing) Driving (sight) Accessibility affects many people, especially with the growing need to embrace aging workforces, customers, and citizens.
  6. 6. Serving end users better <ul><li>Nonnative speakers with partial fluency can benefit from seeing captions in real time, as a person speaks. </li></ul><ul><ul><li>Speech-to-text technology can give a competitive advantage to organizations with audiences whose preferred language differs from the spoken language. </li></ul></ul><ul><ul><li>Serving people who are not native speakers can open new markets or expand existing market share. </li></ul></ul><ul><li>As people age, hearing and eyesight often diminish. </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>As an aging population, the “baby boomers” in particular have significant disposable income, retirement investments, and insurance needs. </li></ul></ul>Technologies developed for disabled people are useful to the aging and multicultural populations.
  7. 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. 8. Standards and legislation appearing worldwide <ul><li>United States </li></ul><ul><li>Section 508 of Rehabilitation Act requires federal agencies to purchase electronic and information technology that is accessible to people with disabilities. </li></ul><ul><li>States are enacting similar legislation. </li></ul><ul><li>Litigation and legal inquiries triggered by legislation in the United States </li></ul><ul><li>State of Arkansas: N ew state accounting system built on SAP technology is inaccessible to blind employees. </li></ul><ul><li>Commonwealth of Pennsylvania: Web portal inaccessible to blind. SAP software is the source of the problem; IBM is providing integration services. </li></ul><ul><li>Metro Atlanta Mass Transit: Web site schedule and services inaccessible. </li></ul><ul><li>Southwest Airline: Reservations and ticketing are inaccessible. </li></ul><ul><li>Connecticut: Attorney General’s office investigates Web-based tax filing services. </li></ul><ul><li>Bank of America: inaccessible Web sites and A TMs. </li></ul><ul><li>America Online: Software incompatible with screen readers. </li></ul><ul><li>Canada </li></ul><ul><li>Canadian Human Rights Act </li></ul><ul><li>Ontarians with Disabilities Act – 2001 </li></ul><ul><li>Common Look & Feel Web guidelines – 2001 </li></ul><ul><li>Europe </li></ul><ul><li>Many countries have enacted legislation or national standards: </li></ul><ul><ul><li>UK – Web accessibility, 2002 </li></ul></ul><ul><ul><li>Germany – Barrier Free Decree, 2002 </li></ul></ul><ul><ul><li>Italy – ICT accessibility & government procurement, 2004 </li></ul></ul><ul><ul><li>Switzerland – Public sector Web accessibility, 2004 </li></ul></ul><ul><ul><li>European Union – Procurement of accessible I T, 2004 </li></ul></ul><ul><ul><li>Spain – Accessibility for computer platforms, 1998 </li></ul></ul><ul><ul><li>Ireland – I T accessibility guidelines, 2002 </li></ul></ul><ul><ul><li>Netherlands – Web accessibility, 2003 </li></ul></ul><ul><ul><li>Sweden – Guidelines for computer accessibility, 1998 </li></ul></ul><ul><li>China </li></ul><ul><li>Law of the PRC on the Protection of Disabled Persons – Provisions on employment, public services, transportation, and legal sanctions, 1991 </li></ul><ul><li>Japan </li></ul><ul><li>JIS standards </li></ul><ul><li>Australia / New Zealand </li></ul><ul><li>Disability Discrimination Act passed – 1996 </li></ul><ul><li>Australian Bankers’ Association endorsed e-commerce standards – 2000 </li></ul><ul><li>Australian Communications Industry Forum's (ACIF) Guidelines – 2001 </li></ul>
  9. 9. Accessibility laws and regulations
  10. 10. Accessibility standards are not all the same. US Section 508 W3C/Web Accessibility Initiative (WAI) Accessibility Guidelines
  11. 11. W3C/WAI is for the Web only; Section 508 covers all electronic and information technology. <ul><li>1194.24 Video and multimedia products </li></ul>Video & Multimedia Products <ul><li>1194.31 Functional performance criteria </li></ul>Functional Performance Criteria <ul><li>WCAG: Web content </li></ul><ul><li>1194.22 Internet and intranet content and applications </li></ul>Web Content <ul><li>1194.23 Telecommunications products </li></ul>Telecommunications Products <ul><li>1194.41 Information, documentation, and support </li></ul>Documentation <ul><li>1194.26 Desktop and portable computers </li></ul>Computer systems <ul><li>1194.25 Self-contained closed products </li></ul>Printers, Copiers, Kiosks, etc. <ul><li>ATAG: Authoring tools </li></ul><ul><li>UAAG: User agent </li></ul><ul><li>1194.21 Software applications and operating systems </li></ul>Software W3C Web Accessibility Initiative Section 508
  12. 12. 508 Web guidelines are different from W3C WCAG priority 1s. 4.1 p1 Identify changes in language (rare access issue) 14.1 p1 Clearest and simplest language appropriate for site (subjective) and an additional 28 priority 2s Additional W3C Priority 1s and 2s 6.3 p1 Turning off scripts required (p2 otherwise) 6.3 p1 Turning off applets/plug-ins required (p2 otherwise) 10.2 p2 Position labels on forms 12.4 p2 Explicitly label form controls 13.6 p3 Group and provide method to skip l. Accessible JavaScript OK m. Applets, plug-ins, and other OK if 508 software compliant n. Electronic forms o. Skip navigation links p. Timed responses Different 1.1 p1 Alternatives for non-text elements 1.4 p1 Synchronized captions and descriptions 1.3 p1 Provide auditory description of video 2.1 p1 Color independent 6.1 p1 Style sheets not required 1.2 p1 Server-side image map 9.1 p1 Client-side image map 5.1 p1 Column and row headings 5.2 p1 Complex tables 12.1 p1 Titles for frame 7.1 p1 Avoid flicker 11.4 p1 Text-only if necessary 6.2 p1 Update dynamic content equivalents a. Alternatives for non-text b. Multimedia c. Color independent d. Style sheets not required e. Server-side image map f. Client-side image map g. Column and row headings h. Complex tables i. Titles for frames j. Avoid flicker k. Text-only if necessary Identical (Declared in 508 preamble) Web Content Accessibility Guidelines (WCAG 1.0) Priority 1 & 2s 508 Web Accessibility part Section 1194.22 Paragraphs
  13. 13. Most additional WCAG priority 2 requirements increase usability; many are solved by browser + assistive technology. There are 23 additional priority 2 requirements shown on the next two charts. Section 508 Web Accessibility Section 1194.22. Paragraphs a through p do NOT map to any of these W3C WCAG priority 2s. Yes M 7.5 Don't auto redirect Yes M 7.4 Don't auto refresh Yes M 7.3 Avoid moving content Yes M 7.2 Avoid blinking L 5.4 Don't use table markup in layout tables Yes H 5.3 Don't use layout tables that don't linearize L 3.7 Use quotation correctly M 3.6 Use list markup correctly Yes M 3.5 Use heading levels in document structure Yes H 3.4 Use relative sizes Yes H 3.3 Use style sheets to control layout/presentation Yes L 3.2 Validate markup H 3.1 Use markup when appropriate (i.e., SMIL) Yes M 2.2 Background and foreground contrast Workaround supported in A T or browsers Impact to developer Web Content Accessibility Guidelines (WCAG 1.0) Priority 2's
  14. 14. Most additional WCAG priority 2 requirements increase usability; many are solved by browser + assistive technology. M 13.4 Use consistent navigation L 13.3 Add site map and TOC L 13.2 Add metadata M 13.1 Clearly identify target of link Yes H 12.3 Divide information into groups M 12.2 Describe purpose of frames Yes M 11.2 Avoid deprecated W3C features Yes H 11.1 Use W3C technologies Yes M 10.1 Don't spawn windows without notifying user Workaround supported in A T or browsers Impact to developer Web Content Accessibility Guidelines (WCAG 1.0) Priority 2's
  15. 15. Assistive technologies
  16. 16. Assistive technologies <ul><li>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: </li></ul><ul><ul><li>Screen readers, which are applications that speak screen information to people who are blind </li></ul></ul><ul><ul><li>Screen magnifiers, which are are software that enlarges information on the screen for people with low vision </li></ul></ul><ul><ul><li>Closed captioning, which displays the text version of the audio for people who are deaf or hard of hearing </li></ul></ul><ul><ul><li>Special keyboards and input devices that assist people with limited hand use or mobility impairments </li></ul></ul>
  17. 17. Accessibility and assistive technology <ul><li>Accessibility: Attribute of information technology that allows it to be used by people with varying abilities </li></ul><ul><li>Assistive Technology: Specialized I T that allows a user with a disability to access information technology </li></ul>
  18. 18. Understanding the impact of disabilities on an I T user
  19. 19. Vision <ul><li>Issues: Cannot use the mouse for input, cannot see the screen, or might need magnification and color contrast </li></ul><ul><li>Assistive Technology: </li></ul><ul><ul><li>Screen readers </li></ul></ul><ul><ul><li>Braille displays </li></ul></ul><ul><ul><li>Screen magnifiers </li></ul></ul>
  20. 20. 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.
  21. 21. 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.
  22. 22. Color deficiency <ul><li>Green signals a server is online. </li></ul><ul><li>Red signals a server is offline. </li></ul>Color-deficient users need more than color differences. The color blind user sees one color.
  23. 23. Color deficiency (continued) It is okay to use color, as long as color is not the only way to convey information.
  24. 24. Hearing <ul><li>Issues: Cannot hear audio, video, system alerts , or alarms </li></ul><ul><li>Assistive Technology: </li></ul><ul><ul><li>Closed captioning </li></ul></ul><ul><ul><li>Transcripts </li></ul></ul><ul><ul><li>ShowSounds </li></ul></ul>Four score and seven years ago, our fathers…
  25. 25. Mobility Issues: Limited or no use of hands, limited range, speed, and strength <ul><li>Assistive Technology: </li></ul><ul><ul><li>Alternate input (for example, voice) </li></ul></ul><ul><ul><li>Access keys </li></ul></ul><ul><ul><li>Latches that are easy to reach and manipulate </li></ul></ul>
  26. 26. Cognitive Issues: Difficulty reading and comprehending information, difficulty writing <ul><li>Assistive Technology: </li></ul><ul><ul><li>Spell checkers </li></ul></ul><ul><ul><li>Word prediction aids </li></ul></ul><ul><ul><li>Reading and writing comprehension aids </li></ul></ul>
  27. 27. Accessibility checklists
  28. 28. Text equivalents for images, audio, and multimedia are key for Web checklist. IBM Web Accessibility Checklist: http://www-306.ibm.com/able/guidelines/web/accessweb.html <ul><li>If accessibility cannot be achieved any other way, provide a text-only version of the page. </li></ul>Text-only Page <ul><li>Functions that have a time limit on the user's response must provide a way for the user to ask for more time. </li></ul>Timed Responses <ul><li>Avoid causing content to blink, move, or flicker. </li></ul>Blinking, Flickering <ul><li>Ensure all information conveyed with color is also conveyed in the absence of color. </li></ul>Color and Contrast <ul><li>Pages should be readable without requiring associated style sheets. </li></ul>CSS (Cascading Style Sheets) <ul><li>Use TH to mark up row and column header in data tables. Associate data cells with header cells in complex data tables. </li></ul>Tables <ul><li>Provide a title for each frame element and frame page. Provide accessible source for each frame. </li></ul>Frames <ul><li>Provide a method for allowing the user to skip over navigation links to the main content. </li></ul>Skip navigation <ul><li>Scripts must be keyboard accessible. </li></ul><ul><li>Applets and plug-ins must meet software (or Java TM ) accessibility checklist. </li></ul><ul><li>Forms must be usable with assistive technology. </li></ul>Accessible interfaces <ul><li>Images and animations </li></ul><ul><li>Image maps </li></ul><ul><li>Graphs and charts </li></ul><ul><li>Audio and multimedia </li></ul>Text equivalents
  29. 29. Software requirements drive the way that code is implemented. IBM Software Checklist: www.ibm.com/able/softwarecheck.html <ul><li>Provide an option to adjust the response times on timed instructions or allow the instructions to persist. </li></ul><ul><li>Avoid the use of blinking text, objects, or other elements. </li></ul>Timing <ul><li>Provide text through standard system function calls or through an API that supports interaction with assistive technology. </li></ul><ul><li>Use color as an enhancement, not as the only way to convey information. </li></ul><ul><li>Support system settings for high contrast for all user interface controls and client area content. </li></ul><ul><li>When color customization is supported, provide a variety of color selections capable of producing a range of contrast levels. </li></ul><ul><li>Inherit system settings for font, font size, and color for all user interface controls. </li></ul><ul><li>Provide an option to display animation in a non-animated presentation mode. </li></ul>Display <ul><li>Provide an option to display a visual cue for all audio alerts. </li></ul><ul><li>Provide accessible alternatives to significant audio and video. </li></ul><ul><li>Provide an option to adjust the volume. </li></ul>Sounds and Multimedia <ul><li>Provide visual keyboard focus programmatically exposed to assistive technology. </li></ul><ul><li>Provide semantic information about user interface objects, including text for images. </li></ul><ul><li>Associate labels with controls, objects, icons, and images. Use images consistently. </li></ul><ul><li>Electronic forms must be usable with assistive technology. </li></ul>Object Information <ul><li>Provide keyboard equivalents for all actions. </li></ul><ul><li>Do not interfere with keyboard accessibility features built into the operating systems. </li></ul>Keyboard Access
  30. 30. Documentation and support services are also covered; testing is required. <ul><li>Verify accessibility using available tools: </li></ul><ul><li>- Assessment tools </li></ul><ul><li>- Assistive technology </li></ul><ul><li>- Manual verification for some items </li></ul>Test <ul><li>Support services must accommodate the communication needs of end users with disabilities. </li></ul>Support <ul><li>Provide documentation in an accessible format. </li></ul><ul><li>Provide documentation on all accessibility features, including keyboard access. </li></ul>Documentation
  31. 31. A closer look at some Web coding techniques
  32. 32. Common Web accessibility issues <ul><li>Screen readers read Web pages sequentially. </li></ul><ul><li>If Web sites that use frames do not have meaningful frame titles, users cannot easily move to the content they want to read. </li></ul><ul><li>If Web sites do not use frames, users must listen to all navigation links unless a “skip to main” link has been added. </li></ul>Navigation <ul><li>Screen readers cannot read text labels on form elements if the labels have not been coded properly by the Web developer. </li></ul>Forms <ul><li>Screen readers cannot read row and column headings if the headings have not been coded properly by the Web developer. </li></ul><ul><li>Missing header labels make the table impossible to understand. </li></ul>Data tables <ul><li>Screen readers cannot read images without text equivalents. </li></ul><ul><li>If null alt text is used for important links, the links are skipped and the site is not accessible – even though it might pass an accessibility checker. </li></ul>Images Accessibility issue Web feature
  33. 33. Provide a text equivalent for every non-text element. <ul><li>Alternate text (alt text) </li></ul><ul><ul><li>Use alt=“ text description ” to provide text equivalents for images, graphs, charts. </li></ul></ul><ul><ul><li>Use null alt text (alt=“”) if images are unimportant or redundant. </li></ul></ul><ul><ul><li>Do not use alt=“” for image links unless the links are redundant. </li></ul></ul><ul><ul><li>Do not use alt=“ ” to implement null alt text. </li></ul></ul><ul><ul><li>Accessibility checkers check for the presence of alt=“text” or alt=“”. </li></ul></ul><ul><li>Add alt text for all image links (input type=“image”). </li></ul><img src=“sam.gif” alt=“Sam” > Correct alt text for spacer images: <img src= “spacer.gif” alt=“” > Incorrect alt text: <img src=“spacer.gif” alt=“spacer.gif” > 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=“” >
  34. 34. Provide a method to skip repetitive navigation links. <ul><li>Provide a way to skip over navigation links to quickly get to main content. </li></ul><ul><ul><li>Screen readers read Web pages sequentially, so users have to listen to all navigation links on the page before they hear the main content. </li></ul></ul><ul><ul><li>A “skip to main” link enables screen reader users to skip navigation links on every page. </li></ul></ul><ul><li>Correct coding for skip link using an image link: </li></ul><ul><ul><li><a href=&quot;#navskip&quot;> </li></ul></ul><ul><ul><li><img src=&quot;http://spacer.gif.gif&quot; alt=&quot;skip to main content&quot; width=&quot;10&quot; height=&quot;33&quot; border=&quot;0&quot;> </li></ul></ul><ul><ul><li></a> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li><a name=&quot;navskip&quot;></a> </li></ul></ul><ul><ul><li><p>This is the main content on the page.</p> </li></ul></ul><ul><li>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. </li></ul>
  35. 35. Give frames names that facilitate frame identification and navigation. <ul><li>Provide a meaningful title attribute for each FRAME element. </li></ul><ul><ul><li>Meaningful titles (for example, “Main Content”, “Navigation”, or ”Logo”) aid navigation of the Web site. </li></ul></ul><ul><ul><li>Accessibility checkers check for the existence of the Frame title attribute; they do not check whether the title is meaningful. </li></ul></ul><ul><li>Correct coding for FRAME elements: </li></ul><ul><ul><li><frame title=“Navigation” src=“bp_left.html&quot;> </li></ul></ul><ul><ul><li><frame title=“Logo” name=“top” src=“bp_header.html&quot;> </li></ul></ul><ul><ul><li><frame title=“Main Content” src=“maincontent.html&quot;> </li></ul></ul><ul><li>Incorrect coding for FRAME elements: </li></ul><ul><ul><li><frame src=“bp_left.html&quot;> </li></ul></ul><ul><ul><li><frame name=&quot;top&quot; src=“bp_header.html“> </li></ul></ul><ul><ul><li><frame title=&quot;body_center&quot; src=“maincontent.html&quot;> </li></ul></ul>
  36. 36. Screen readers read frame titles. <ul><li>Use the screen reader command to list the frames on the page. </li></ul><ul><li>Select the frame you want to read. </li></ul><ul><li>Accessible frame titles: </li></ul><ul><li>Inaccessible frame titles: </li></ul>
  37. 37. Use forms to allow people using A T to access the functionality required to complete and submit the form. <ul><li>Most form elements (for example, text fields, checkboxes, and radio buttons) require explicit labels so the elements can be read by assistive technology. </li></ul><ul><ul><li>Associate text labels using the LABEL element and the for attribute. </li></ul></ul><ul><ul><li>Proximity is not sufficient to help assistive technology “see” field labels. </li></ul></ul><ul><ul><li>Accessibility checkers check for the presence of the LABEL element. </li></ul></ul><ul><li>Correct coding of a text field for accessibility: </li></ul><ul><ul><li>< label for=“search” > Search </label> <br> <input name=“yourname” id=“search” > </li></ul></ul><ul><li>Incorrect coding of a text field for accessibility: </li></ul><ul><ul><li>Missing LABEL element: Search<br> <input name=“yourname”> </li></ul></ul><ul><ul><li>Missing id tag: <label for=“search”> Search</label> <br> <input name=“yourname”> </li></ul></ul><ul><ul><li>Incorrect id tag: <label for=“search”>Search</label> <br> <input name=“yourname” id=“mine”> </li></ul></ul><ul><ul><li>Implicit LABEL: <label>Search</label><br> <input name=“yourname”> </li></ul></ul>
  38. 38. Screen readers read form labels. <ul><li>Locator feature – tells where am I? </li></ul><ul><ul><li>Text entry </li></ul></ul><ul><ul><li>Labeled Search for </li></ul></ul><ul><ul><li>Form 1 </li></ul></ul><ul><ul><li>At 28% of page </li></ul></ul><ul><li>List of links </li></ul><ul><li>Controls reading with arrow keys </li></ul><ul><ul><li>Search for [Text] </li></ul></ul><ul><li>Read title attribute </li></ul>
  39. 39. Define row and column headers for data tables. <ul><li>Row and column headers must be defined so they can be spoken. </li></ul><ul><ul><li>Use the TH element to mark up heading cells. </li></ul></ul><ul><ul><li>Use the scope attribute to identify row or column headings. </li></ul></ul><ul><ul><li>Use the headers and id attribute to identify row or column headings on complex tables that use rowspan or colspan. </li></ul></ul><ul><ul><li>Accessibility checkers identify “possible” errors for tables because distinguishing between data and layout tables is difficult. </li></ul></ul><ul><li>The CAPTION element associates a title with the table.* </li></ul><ul><ul><li><caption> Computer Science Job Openings - November 2005 </caption> </li></ul></ul><ul><li>The summary attribute provides additional information about the table.* </li></ul><ul><ul><li><table summary= &quot;Table that summarizes federal job openings by date&quot;> </li></ul></ul><ul><ul><li>*Recommended technique, not required by Section 508 guidelines. </li></ul></ul>
  40. 40. Identify row and column headers using the scope attribute. 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> …… 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> ……
  41. 41. Identify row and column headers using headers / id attributes. 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> …… 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> ……
  42. 42. Screen readers read table headers. <ul><li>Table Jump reading </li></ul><ul><ul><li>Reads the CAPTION element, which gives your table a title. </li></ul></ul><ul><ul><li>Reads the summary attribute of the TABLE element, which describes the overall structure of a table. </li></ul></ul><ul><li>Table Navigation reading </li></ul><ul><ul><li>Reads table headers. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Use the headers attribute on data cells and the id attribute on header cells to identify headers for complex data tables. </li></ul></ul>
  43. 43. Listening to table headers with a screen reader <ul><li>Listening to the table without headers – response varies based on A T used </li></ul><ul><ul><li>Matriculated Students. College of Education. 523 </li></ul></ul><ul><ul><li>or </li></ul></ul><ul><ul><li>Matriculated Students. Undergraduate. 523 </li></ul></ul><ul><ul><li>or </li></ul></ul><ul><ul><li>Matriculated Students. College of Education. Undergraduate. 523 </li></ul></ul><ul><li>Listening to the table with headers – consistent and correct results </li></ul><ul><ul><li>Matriculated Students. In state. College of Education. Undergraduate. 523 </li></ul></ul>
  44. 44. Summary of Web accessibility techniques <ul><li>Use a visible or invisible link to skip to main content. </li></ul><ul><li>Use the frame title attribute to add a meaningful name to your frame. </li></ul>Navigation <ul><li>Use the LABEL element to associate text labels with form elements. </li></ul>Forms <ul><li>Use the TH element to identify row and column headers. </li></ul><ul><li>Use headers and id attributes to identify row and column headers in complex tables. </li></ul><ul><li>Use the scope attribute on tables that don’t use rowspan or colspan. </li></ul>Data tables <ul><li>Use alt text for important images (alt=“your text”). </li></ul><ul><li>Use null alt text for unimportant or redundant images (alt=“”). </li></ul>Images Accessibility technique Web feature
  45. 45. Additional resources for learning about accessibility <ul><li>IBM Human Ability and Accessibility Center </li></ul><ul><ul><li>http://www.ibm.com/able </li></ul></ul><ul><li>IBM Human Ability and Accessibility Checklists and Techniques </li></ul><ul><ul><li>http://www.ibm.com/able/guidelines </li></ul></ul><ul><li>IBM Home Page Reader </li></ul><ul><ul><li>Test instructions: http://www.ibm.com/able/guidelines/web/webhprtest.html </li></ul></ul><ul><ul><li>Trial Download: http://www.ibm.com/able/solution_offerings/hpr.html </li></ul></ul><ul><li>Guide to Section 508 Standards for Electronic and Information Technology </li></ul><ul><ul><li>http://www.access-board.gov/sec508/guide/ </li></ul></ul><ul><li>Web accessibility tutorials </li></ul><ul><ul><li>http://www.jimthatcher.com/webcourse1.htm </li></ul></ul><ul><ul><li>http://www.webaim.org </li></ul></ul><ul><ul><li>http://www.section508.gov </li></ul></ul>

×