Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Accessibility for Developers

97 views

Published on

Presentation for the Student Affairs Technology Services group at UC San Diego, September 21, 2016

Published in: Internet
  • Be the first to comment

Web Accessibility for Developers

  1. 1. Web Accessibility for Developers Jenn Dandle, Library Web Manager
  2. 2. Practical strategies to use in development workflows to improve web accessibility
  3. 3. –Tim Berners-Lee, W3C Director and inventor of the World Wide Web “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
  4. 4. Screen Reader Demo for Digital Accessibility • UCSF Digital Accessibility: http://digitalaccess.ucsf.edu/ • Screen Reader Demo: https://www.youtube.com/watch? v=dEbl5jvLKGQ
  5. 5. Disability Types and Assistive Technology • VISUAL • HEARING • AMBULATORY • MAGNIFICATION, SCREEN READERS • ASSISTED LISTENING DEVICES • DICTATION, SWITCHES
  6. 6. Disability Status Males, 18 - 34 6% 94% No Disability With a Disability Females, 18 - 34 5% 95% No Disability With a Disability
  7. 7. Benefits of Accessibility • Inclusion • Improved Usability • Search Engine Optimization (SEO)
  8. 8. Improving Accessibility • Use alternate text with images • Use sufficient color contrast • Use well-formed hyperlinks • Use standards-compliant code • Label form fields • Associate data cells with headers in tables Content Development
  9. 9. Use Sufficient Color Contrast Source: http://www.laspositascollege.edu/accessibility/contrast-example.php
  10. 10. Use Well-Formed Hyperlinks
  11. 11. Label Form Fields <label for="name">Name:</label>
 <input id="name" type="text">
 
 <fieldset>
 <legend>Select Quarter</legend>
 <input id="fall" type="radio" value="fall">
 <label for="fall">Fall</label>
 <input id="winter" type="radio" value="winter">
 <label for="fall">Winter</label>
 </fieldset> http://webaim.org/techniques/forms/controls
  12. 12. Associate Data Cells with Headers in Tables 1. Identify row and column headers 2. Associate the data cells with the appropriate headers

  13. 13. Accessible Tables Code Sample <table>
 <caption>Contact Details</caption>
 <tr>
 <th scope="col">Name</th>
 <th scope="col">Office</th>
 <th scope="col">Phone</th>
 </tr>
 <tr>
 <th scope="row">Jamie</th>
 <td>Geisel Library</td>
 <td>x 23338</td>
 </tr>
 </table> http://webaim.org/techniques/tables/data
  14. 14. Keeping Accessibility in Mind • Consider accessibility early in the web development life cycle • Perform periodic spot-checks • Use testing tools when in doubt
  15. 15. More Resources • https://library.ucsd.edu/webaccessibility
  16. 16. –Tim Berners-Lee, W3C Director and inventor of the World Wide Web “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Jenn Dandle, jdandle@ucsd.edu

×