Are you accessible

  • 426 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
426
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Why Does it matter?
  • 2. Why Does it matter?Humanitarian Legal Market Technical
  • 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. 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. 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. 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. 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. 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. 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. Why does it matter? Technical
  • 11. Why does it matter? Technical
  • 12. Why does it matter? Technical
  • 13. The principles POUR Perceivable OperableUnderstandable Robust
  • 14. Page StructureStructure pages semantically, don’t use mark-up for visual effect
  • 15. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1>
  • 16. Page StructureStructure pages semantically, don’t use mark-up for visual effect <h1>Not more than 1</h1> <h2>...</h2> <h2>...</h2>
  • 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. 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. 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. Images
  • 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. Images
  • 23. Images<img src=… alt=“The Kentucky Center" ... >
  • 24. Images<img src=… alt=“The Kentucky Center" ... ><img src=… alt=“Register Now" … >
  • 25. Images <img src=… alt=“The Kentucky Center" ... > <img src=… alt=“Register Now" … ><img src="decor.gif" alt="" width="1" height="1">
  • 26. Images ???
  • 27. Keyboard
  • 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. Links
  • 30. Links
  • 31. What Links???
  • 32. Links
  • 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. Tables
  • 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. 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. 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. Tables
  • 39. Forms
  • 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. 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. FormsWhere is Waldo?
  • 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. 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. 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. Forms
  • 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. Testing
  • 49. Testing With toolbars• Deque FireEyes (for FireBug)• Web Accessibility Toolbar for IE• Accessibility Extension for Firefox• Jim Thatcher’s Favelets• FANGS
  • 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. Testing Automated one-page testers• Wave - http://wave.webaim.org/• WorldSpace - http://worldspace.dequecloud.com/ worldspace/wsservice/eval/checkCompliance.jsp
  • 52. TestingColor Contrast Analysis
  • 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. Thank You!Stalk me on twitter @gdruckman or Just google me!