Web accessiblity standards guidelines


Published on

A presentation I made at web standards new york meetup. Enjoy

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web accessiblity standards guidelines

  1. 1. WEB ACCESSIBILITY STANDARDS By Mayank JainFriday, January 27, 12
  2. 2. FOR WHOM? People with following disabilities: • Visual (blind, color blind) • Auditory (deaf) • Physical (unable to use mouse) • Speech  • Cognitive • Neurological (epilepsia)Friday, January 27, 12
  3. 3. VISUAL ELEMENTS Provide a text equivalent for every non-text element Why? • Images cant be seen • Audio cant be heard How? "alt" and "longdesc" for every non-text element. Test Firefox Web Developers Toolbar (plugin): • Go to Images > Outline images without "alt" attribute  • Go to Images > Replace images with "alt"Friday, January 27, 12
  4. 4. VISUAL ELEMENTS Color alone should not convey information Why? • One in twelve people suffers from some sort of color deficiency. Some cannot distinguish red, green or blue. Others have difficulties distinguishing foreground from background, if the contrast is insufficient. How? Give other visual or textual clues. Test Firefox Web Developers Toolbar (plugin): • Go to Disable > Disable page color • Go to Images > Disable all imagesFriday, January 27, 12
  5. 5. VISUAL ELEMENTS Foreground and Background contrast Why? • For partially blinded or color blind How? • Use color validation tools Test • Juicy studio color contrast analyser (Firefox add-on) • www.vischeck.comFriday, January 27, 12
  6. 6. VISUAL ELEMENTS Use markup rather than images Why? Visually impaired  • Cannot see images • Cannot increase font size • Cannot modify level of contrast • Images dont convey structure of information How? • Use CSS Test Firefox Web Developers Toolbar (plugin): • Go to Images > Disable Images > All imagesFriday, January 27, 12
  7. 7. VISUAL ELEMENTS No flickering, moving or blinking (unless user allows) Why?  • Trigger epileptic seizures • Older screen readers  How? • Use CSS Test Firefox Web Developers Toolbar (plugin): • Go to Images > Disable Images > All imagesFriday, January 27, 12
  8. 8. CODING Organize HTML so that it is possible to read without style sheets Why? • Users can override style sheets with their own or disable them How? Use • Heading tags  in order <h1>, <h2> etc • List tags in order <li> • Quotations in <blockquote> Test Using the Firefox Web Developers Toolbar (plugin): • Go to CSS > Disable styles> All styleFriday, January 27, 12
  9. 9. CODING Create documents that validate to published formal grammars. Why? •  Consistent interpretation of pages by different browsers and devices. How? HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">XHTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> Test Using the Firefox Web Developers Toolbar (plugin): • Validate the HTML: Go to Tools > Validate HTML. • Validate the CSS: Go to Tools > Validate CSS.Friday, January 27, 12
  10. 10. CODING Use style sheets to control layout and presentation Why? •  Webpage can get bulky • Content is separate from presentation. Good for manageability, portability and accessibility • Facilitates device independence • Users can impose their own CSS How? • Use CSS for presentation of content Test Using the Firefox Web Developers Toolbar (plugin): • Go to Outline > Outline deprecated elements.Friday, January 27, 12
  11. 11. CODING Do not use tables for layouts, if you do so, do not use the "summary" attribute, the <caption> tag or the <th> tags in the table. Why? • The screen reader linearizes the content, which means that it reads it row by row. Sometimes, content loses its coherence when read in this manner, especially when there are a lot of nested tables on a page. How? • Use CSS to position elements on your pages. Test Using the Firefox Web Developers Toolbar (plugin): • Go to Miscellaneous > Linearize page.Friday, January 27, 12
  12. 12. CODING Use relative rather than absolute units Why? • User cant scale the text in order to facilitate legibility How? • Use CSS to format elements with relative units (em / %). Test Using the Firefox Web Developers Toolbar (plugin): • Go to CSS > View CSS. Success criteria: All sizes are set in "%" or "em"Friday, January 27, 12
  13. 13. CODING Identify primary language of the document Why? • Screen readers need to know the natural language of a document in order for the words on the page to be pronounced correctly. How? The natural language should be identified in the <html> tag with: • HTML 4.0: the "lang" attribute • XHTML 1.0: "lang" and "xml:lang" attributes. • XHTML 1.1: "xml:lang" attribute Test Check the source codeFriday, January 27, 12
  14. 14. TEXTUAL CONTENT Clearly identify changes in the natural language of a documents text Why? • Screen readers and Braille devices need to identify changes in the natural language so they can present it with the correct pronunciation. How? • Use the "lang" attribute in the relevant tag to identify text in another language Test • Check page manuallyFriday, January 27, 12
  15. 15. TEXTUAL CONTENT Simple and clear language • Sentences are short. • The text is broken down into short paragraphs. • Favour the active voice. • Do not use jargon, slang or idiomatic phrases. • There are links to definitions of technical terms.Friday, January 27, 12
  16. 16. TEXTUAL CONTENT Data tables • Identify row and column headers. • Tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. • Provide summaries for tables. Why? • Complex environment for blind or visually-impaired users because they cannot visualize it globally, • Will guide screen-reader users in the navigation of the tableFriday, January 27, 12
  17. 17. TEXTUAL CONTENT Data tables e.g. #1 "summary" attribute used within the <table> tag to describe the elements and structure of the table.  1. If the table has one logical level <table summary="List of staff members with Department, extension and room number">   <tr>     <th>Name</th>     <th>Department</th>     <th>Extension</th>     <th>Room</th>   </tr>   <tr> Name Department Extension Room     <td>Peter Johnson</td> Peter Johnson DPI 7.1234 S-1001     <td>DPI</td>     <td>7.1234</td> Wei Zhang DPKO 3.9876 DC2-534     <td>S-1001</td>   </tr>   <tr>     <td>Wei Zhang</td>     <td>DPKO</td>     <td>3.9876</td>     <td>DC2-534</td>   </tr> </table>Friday, January 27, 12
  18. 18. TEXTUAL CONTENT Data tables e.g. #2 1. If the table has more than one logical levelFriday, January 27, 12
  19. 19. TEXTUAL CONTENT <table summary="This table presents the costs of meals, hotels and transports for two trips in San Jose and Seattle">   <tr>     <td>&nbsp;</td>     <th id="meals">Meals</th>     <th id="hotels">Hotels</th>     <th id="transport">Transport</th>     <th id="triptotals">Trip Totals</th>   </tr>   <tr>     <th colspan="5" id="san_jose">San Jose</th>   </tr>   <tr>     <td id="aug-25-07" headers="san_jose">25-Aug-07</td>     <td headers="san_jose aug-25-07 meals">37.74</td>     <td headers="san_jose aug-25-07 hotels">112.00</td>     <td headers="san_jose aug-25-07 transport">45.00</td>     <td>&nbsp;</td>   </tr>   <tr>     <td id="aug-26-07" headers="san_jose">26-Aug-07</td>     <td headers="san_jose aug-26-07 meals">27.28</td>     <td headers="san_jose aug-26-07 hotels">112.00</td>     <td headers="san_jose aug-26-07 transport">45.00 </td>     <td>&nbsp;</td>   </tr>   <tr>     <th id="sub" headers="san_jose">Subtotals </th>     <td headers="san_jose sub meals">65.02</td>     <td headers="san_jose sub hotels">224.00</td>     <td headers="san_jose sub transport">90.00</td>     <td headers="san_jose triptotals">379.02</td>   </tr>  Friday, January 27, 12
  20. 20. TEXTUAL CONTENT  <tr>     <th colspan="5" id="Seattle">Seattle</th>   </tr>   <tr>     <td id="aug-27-07" headers="Seattle">27-Aug-07</td>     <td headers="Seattle aug-27-07 meals">96.25</td>     <td headers="Seattle aug-27-07 hotels">109.00</td>     <td headers="Seattle aug-27-07 transport">36.00</td>     <td>&nbsp;</td>   </tr>   <tr>     <td id="aug-28-07" headers="Seattle">28-Aug-07</td>     <td headers="Seattle aug-28-07 meals">35.00</td>     <td headers="Seattle aug-28-07 hotels">109.00</td>     <td headers="Seattle aug-28-07 transport">36.00 </td>     <td>&nbsp;</td>   </tr>   <tr>     <th id="sub2" headers="Seattle">subtotals</th>     <td headers="Seattle sub meals">131.25</td>     <td headers="Seattle sub hotels">218.00</td>     <td headers="Seattle sub transport">72.00</td>     <td headers="Seattle triptotals">421.25</td>   </tr>   <tr>     <th id="grandtotals">Totals</th>     <td headers="grandtotals meals">196.27</td>     <td headers="grandtotals hotels">442.00</td>     <td headers="grandtotals transport">162.00</td>     <td headers="grandtotals triptotals">800.27</td>   </tr>Friday, January 27, 12
  21. 21. TEXTUAL CONTENT Mark up quotations. Do not use quotation markup for formatting effects such as indentation. Why? • screen readers identify text that has been correctly marked as a quotation differently • gives people who use these technologies important information about the context of the text How? Short quotations of 10 words or less should use the <q> tag for markup. Long quotations of 11 words or more should use the <blockquote> tag. Test Using the Firefox Web Developers Toolbar (plugin):  Go to Outline > Outline block elements.Friday, January 27, 12
  22. 22. TEXTUAL CONTENT Use header elements to convey document structure Why? • Categorizing the information makes it easier to scan content • Breaking up the text into smaller sections and sub-sections allows screen-reader users to scan the page • Screen readers can bounce from title to title, enabling the user to skim through the information rather than having to go through all of the content word by word Example <body> <div class="section2">   <h1>Welcome to the United Nations!</h1>   … some text here ... </div> <div class="section2">   <h2>sub topic 1</h2>   ... text of the section ... </div> <div class="section3">   <h2>sub topic 2</h2>   ... text of the section ... </div> </body>Friday, January 27, 12
  23. 23. TEXTUAL CONTENT Mark up lists and list items properly. • Should be used only to create lists not indentation • If not, information can be lost on non-visual user agents particularly in nested lists Example <ul>   <li>Our mandate</li>   <li>Documents </li>   <li>News     <ul>       <li>News Centre</li>       <li>Press Releases</li>       <li>Radio</li>     </ul>   </li>   <li>Links</li>   <li>UN Home</li> </ul>Friday, January 27, 12
  24. 24. TEXTUAL CONTENT Specify the expansion of each abbreviation or acronym in a document where it first occurs. Why? • Aids understanding by novice users and facilitates reading by screen readers How? HTML <p>The Intergovernmental Panel on Climate Change has been established by <acronym title="the World Meteorological Organization">WMO</acronym>.</p> <p><abbr title="Mister">Mr.</abbr> Ban Ki-moon, <acronym title="United Nations">UN</acronym> Secretary-General</p> Test Using the Firefox Web Developers Toolbar (plugin): Go to Information > Display abbreviation. Friday, January 27, 12
  25. 25. NAVIGATION Clearly identify the target of each link. Why? • Screen-reader users will often review the list of links • Helps to optimize the content for search engines How? • Use the title of the target page as link text instead of using generic wording such as "read more" or "click here". • Where possible, do not place the link only on a document symbol, but include the document title too. Test Using the Firefox Web Developers Toolbar (plugin): Go to Information > View Page Information and click on the link tab.Friday, January 27, 12
  26. 26. NAVIGATION Provide a Sitemap Why? • Makes navigation easier • Helpful for people using assistive technologies, such as a screen reader.  How? Have a sitemap if pages cannot be accessed from the navigation bars default state or the homepage.Friday, January 27, 12
  27. 27. NAVIGATION Do not generate Pop-Ups Why? • Can be annoying • Problems for screen-reader users because they change the focus without warning • Screen reader begins reading the content of the new window, usually without warning the user that a new window has opened How? If you open a link a new window, add a warning in the link title, e.g.HTML <a href="un.org" target="_blank">United Nations homepage (this link will open in a new window)</a> Test Using the Firefox Web Developers Toolbar (plugin): Go to Information > View Link Information.Friday, January 27, 12
  28. 28. NAVIGATION Use consistent navigation mechanisms Why? • Avoid confusion or disorientation How? • Consistent visual presentation • Constant sequential order • Consistency in language and terminology • Consistency in location of navigation controls • BreadcrumbsFriday, January 27, 12
  29. 29. NAVIGATION Logical tab order Why? • Many users are unable to use mouse • Ease of navigating the website with a keyboard How? Example <form action="submit" method="post">   <label for="field1">Field1:</label>   <input tabindex="2" type="text" name="field1" id="field1">   <label for="field2">Field2:</label2>   <input tabindex="1" type="text" name="field2">   <input tabindex="3" type="submit" name="submit"> </form> Test Use the "tab" key to navigate the site.Friday, January 27, 12
  30. 30. NAVIGATION Provide information about documents Why? • User should be able to know the size and type of document they are downloading How? • Specify file type • Provide alternative links • Record user preferences and configure the server to choose document preferences automatically Friday, January 27, 12
  31. 31. SCRIPTS Page are usable when programmatic elements are not supported Why? • Some browsers and organisation turn off client-side scripting • Dynamic drop downs cause problems for people with motor and visual impairments How? • Avoid Javascript for link target • Use <noscript> tag • Use server-side scripts instead of client-side  • Provide up to date text equivalent on an alternative page Test Using the Firefox Web Developers Toolbar (plugin):  Go to Disable > Disable JavaScript > All JavaScript; then select Disable JavaFriday, January 27, 12
  32. 32. SCRIPTS Accessible Dynamic Content Why? • Not all can view rapidly moving content due to visual impairments How? • Write scripts that transforms gracefully even when scripts are turned off • Should provide and alternate page where users can get information in accessible format Test Using the Firefox Web Developers Toolbar (plugin):  Go to Disable > Disable JavaScript > All JavaScript; then select Disable JavaFriday, January 27, 12
  33. 33. SCRIPTS No auto-refresh Why? • Not all users are comfortable with computers and wouldnt know what is happening • People read at varying speeds and may not have finished before auto-refresh • Particularly for screen-readers that may re-read beginning even when it is somewhere half way during auto-refresh • Some screen readers cannot handle auto-refresh and may not read the page at all How? • Do not use <meta> element to auto refresh Test check the page codeFriday, January 27, 12
  34. 34. SCRIPTS No client-side redirects Why? • Confusing for users not familiar with internet • Disorienting for screen readers • If browser does not support client-side redirects, user cannot access new content How? • Configure web server to redirect • Configure redirects with server-side scripts • Replace redirecting page with static page that has link to new page Test Check the page codeFriday, January 27, 12
  35. 35. FORMS Associate Labels explicitly with their controls Why? • So that visual relationship with corresponding form is clear • Older browsers may not understand the form and purpose of each field Does not apply on hidden fields How? e.g. XHTML <label for="fname">Name</label> <input type="text" name="name" id="fname" tabindex="1" />Friday, January 27, 12
  36. 36. FORMS Ensure user interfaces are device-independent and use logical event handlers Why? • Screen readers rely entirely on keyboard How? The following example illustrates how to provide a redundant input mechanism in JavaScript. HTML <form>   <p>You will you go <label>back to the previous page <input name="Back to Previous Page" type="button" id="Back to Previous Page" onClick="JavaScript:history.go(-1)" onKeypress="JavaScript:history.go(-1)" value="Back to Previous Page"></label> if you PRESS (keyboard) or CLICK (mouse) on the button.</p>   <noscript>     <p><a href="index.html">Go back to previous page</a></p>   </noscript> </form>Friday, January 27, 12
  37. 37. TOOLS Validator • http://validator.w3.org/ Web Accessibility Tools • Web Developer toolbar (Firefox Add-on) • Web Accessibility toolbar for Opera (The Paciello group) • Web Accessibility toolbar for IE (The Paciello group) Color Contrast Analysers • Juicy Studio color contract analyser (Firefox Add-on) • www.vischeck.com • Contrast analyser (The Paciello group) • Color Contrast Analyser (Vision Australia: in different languages) List of all accessibility tools maintained by WAI - http://www.w3.org/WAI/RC/tools/completeFriday, January 27, 12
  38. 38. RESOURCES Web Accessibility Guidelines (http://www.w3.org/TR/WAI-WEBCONTENT/) Paciaellogroup.com Web accessibility tools consortium (www.wat-c.org)Friday, January 27, 12
  39. 39. THANK YOU! Mayank JainFriday, January 27, 12