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

1. Web Accessibility for
Developers
Jenn Dandle,
Library Web Manager

2. Practical strategies to use in development workflows to improve
web accessibility

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. Screen Reader Demo for Digital Accessibility
• UCSF Digital Accessibility: http://digitalaccess.ucsf.edu/
• Screen Reader Demo: https://www.youtube.com/watch?
v=dEbl5jvLKGQ

5. Disability Types and Assistive Technology
• VISUAL
• HEARING
• AMBULATORY
• MAGNIFICATION, SCREEN READERS
• ASSISTED LISTENING DEVICES
• DICTATION, SWITCHES

6. Disability Status
Males, 18 - 34
6%
94%
No Disability With a Disability
Females, 18 - 34
5%
95%
No Disability With a Disability

7. Benefits of Accessibility
• Inclusion
• Improved Usability
• Search Engine Optimization (SEO)

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. Use Sufficient Color Contrast
Source: http://www.laspositascollege.edu/accessibility/contrast-example.php

10. Use Well-Formed Hyperlinks

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. Associate Data Cells with Headers in Tables
1. Identify row and column headers
2. Associate the data cells with the appropriate headers

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. Keeping Accessibility in Mind
• Consider accessibility early in the web development life cycle
• Perform periodic spot-checks
• Use testing tools when in doubt

15. More Resources
• https://library.ucsd.edu/webaccessibility

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