Are you accessible

665 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
665
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Are you accessible

    1. 1. Why Does it matter?
    2. 2. Why Does it matter?Humanitarian Legal Market Technical
    3. 3. Why does it matter? Humanitarian• 34 year old, aspiring journalist, American Sign is native language• Captioned videos• Transcripts for audio content• Alternatives for sound cues
    4. 4. Why does it matter? HumanitarianPaul wounded while in Iraq,spinal injury resulted in lack ofability to walk, partial use ofarms and hands • Keyboard access • Visible focus • Live regions receive focus when active • Drag and drop
    5. 5. Why does it matter? HumanitarianDesiree Sturdevant, Knowbilityblogger • Uses screen reader • Alternatives to image content • Search and other forms, interactive elements • Spreadsheets, data tables • Tab logic, navigation • Color cues
    6. 6. Why does it matter? Market• Number of people with disabilities is growing• 55 million Americans / 1 billion worldwide• $200 billion in discretionary spending• More as population ages
    7. 7. Why does it matter? Legal• International – UN Convention on Rights of People with Disabilities, 2006• Global requirements based on WCAG2• US Federal standards, Section 508• Other national laws• State and local laws
    8. 8. Why does it matter? Legal Website Accessibility Under Title II of the ADA“The Americans with Disabilities Act (ADA) and, if thegovernment entities receive federal funding, the RehabilitationAct of 1973 generally require that state and local governmentsprovide qualified individuals with disabilities equal access to theirprograms, services, or activities...”
    9. 9. Why does it matter? Legal Website Accessibility Under Title II of the ADA“One way to help meet these requirements is to ensure thatgovernment websites have accessible features for people withdisabilities...”
    10. 10. Why does it matter? Technical
    11. 11. Why does it matter? Technical
    12. 12. Why does it matter? Technical
    13. 13. The principles POUR Perceivable OperableUnderstandable Robust
    14. 14. Page StructureStructure pages semantically, don’t use mark-up for visual effect
    15. 15. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1>
    16. 16. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1> <h2>...</h2> <h2>...</h2>
    17. 17. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1> <h2>...</h2> <h2>...</h2> <h3>...</h3> <h3>...</h3> <h3>...</h3> <h3>...</h3>
    18. 18. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1> <h2>...</h2> <h2>...</h2> <h3>...</h3> <h3>...</h3> <h3>...</h3> <h3>...</h3> <h4>...</h4> <h4>...</h4> <h4>...</h4>
    19. 19. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1> <h2>...</h2> <h2>...</h2> <h3>...</h3> <h3>...</h3> <h3>...</h3> <h3>...</h3> <h4>...</h4> <h4>...</h4> <h4>...</h4> <p> <ul> <li> </li> <li> </li> </ul> </p>
    20. 20. Images
    21. 21. Images• Active (linked) image alt-text is the function of the image, what the image does, where the link goes.• If image is text, then the alt-text must contain the same information as the text in the image.• If image conveys information (ie graph, chart) alt- text must convey the same information.• If image is decorative, redundant or generally conveys no information, then use alt=”” also known as empty alt text• Use alt=”” on a linked image ONLY when text information is included within the anchor.
    22. 22. Images
    23. 23. Images<img src=… alt=“The Kentucky Center" ... >
    24. 24. Images<img src=… alt=“The Kentucky Center" ... ><img src=… alt=“Register Now" … >
    25. 25. Images <img src=… alt=“The Kentucky Center" ... > <img src=… alt=“Register Now" … ><img src="decor.gif" alt="" width="1" height="1">
    26. 26. Images ???
    27. 27. Keyboard
    28. 28. Keyboard• Many assistive technologies are mapped to the keyboard, not just for screen readers• Logical tab order• Visible focus• Tab order is organized and in sequence with the visual order• Don’t forget drop-down menus, radio buttons, check boxes and media controls
    29. 29. Links
    30. 30. Links
    31. 31. What Links???
    32. 32. Links
    33. 33. Links• Assistive technologies use links to navigate• Must indicate link target within the text• Make sense out of context• Use unique text for specific target• NOT depend on color alone• Provide contrast of 4.5 to 1 or higher• Some designers don’t like underlines – OK as long as visual ID is clear
    34. 34. Tables
    35. 35. Tables Why HTML Tables?• Best way to present data• No longer needed for layout• Present data in machine readable formats, suitable for assistive technologies• Defined by semantic mark up• Can be styled to specification with CSS
    36. 36. Tables Rules of thumb for data tables• Use <summary> attribute – only read by screen readers – to define table structure• Use <caption> element for onscreen title.• Keep structure as simple as possible.• Use <th> element for header cells.• Use <scope> attribute to distinguish column/row
    37. 37. Tables fo’ shizzle...<table summary=“table has 3 columns and 12 rows"> <caption> On screen text styled as you like </caption> <tr> <td ></td> <th scope="col"> Column 1 </th> <th scope="col"> Column 2 </th> <th scope="col"> Column 3 </th> </tr><tr> <th scope="row"> Row 1 </th> <td> data </td> <td> data </td> <td>data</td></tr>...<tr> <th scope="row"> Row 12 </th> <td> data </td> <td> data </td> <td>data</td></tr></table>
    38. 38. Tables
    39. 39. Forms
    40. 40. Forms Rules of thumb• Tell users what the form is for• Keep form design as simple as possible• Place labels adjacent to input fields (just above or just to the left)• A common way of going through a form is using the tab key – make sure your tab order follows the form• Position label close to the field in visual display as well as code
    41. 41. Forms pooped...• Don’t use color as only method to indicate required fields.• Automatic form focus may hinder users who expect predictable behavior. Forms Mode in screen reader has that function.• Default values in text fields. Most users will skip over a field that has text already in it.• Auto-tab If the user isnt watching the screen, they will tab ahead and skip the second field
    42. 42. FormsWhere is Waldo?
    43. 43. Forms• Create labels for form elements using the <label> element• Use the for/id matchup, as in <label for="name">Name</label> <input name="name" id="name" type="text">
    44. 44. FormsTitle attribute may be used when you dont have a good wayto use repeated labels<label for="zip">Zip Code:</label> <input name="textfield" size="5" id="zip" title="zip 5 digits" type="text" /> - <input name="textfield2" size="4" title="zip plus 4" type="text" />
    45. 45. Forms “strawberry FIELDS forever...”Inform the user first: put required message before the formcontrols 1. use word (required) in the <label> or 2. use an "asterisk" (or image of your choice) with alt="required", image with alt must be within the <label> 3. use ARIA "aria-required" attribute
    46. 46. Forms
    47. 47. Forms The beez neez <label for="namereq">Name <img src="asterisk.gif" … alt="Required!"> </label>: <input id="namereq" name="namereq" type="text" >1.<label for="namereq2">Name (required):</label> <input id="namereq2" name="namereq2" type="text">2.<label for="namereq3">Name *:</label> <input id="namereq3" name="namereq3" type="text" aria- required="true">
    48. 48. Testing
    49. 49. Testing With toolbars• Deque FireEyes (for FireBug)• Web Accessibility Toolbar for IE• Accessibility Extension for Firefox• Jim Thatcher’s Favelets• FANGS
    50. 50. Testing With screen-readers• JAWS demo is free• NVDA free open source for Windows• SystemAccess from Serotek• FireVox is Firefox extension*• FANGS is screen reader emulator * Not available for FireFox 7 and up
    51. 51. Testing Automated one-page testers• Wave - http://wave.webaim.org/• WorldSpace - http://worldspace.dequecloud.com/ worldspace/wsservice/eval/checkCompliance.jsp
    52. 52. TestingColor Contrast Analysis
    53. 53. More? “Please Sir, can I have some more?”• Drupal Accessibility Statement: http://drupal.org/about/accessibility• Accessibility and Drupal: http://drupal.org/node/394094• Accessibility (for Drupal theming) http://drupal.org/node/464472• Drupal Accessibility group http://groups.drupal.org/accessibility
    54. 54. Thank You!Stalk me on twitter @gdruckman or Just google me!

    ×