A tutorial on making web pages accessible, especially for people using screen readers. Some of the graphics come from Steve Krug's Don't Make Me Think!, Sarah Horton's A Web for Everyone, and the WebAIM group at Utah State University.

1. Usability
Accessibility
Universal Design

2. Usability
“The effectiveness, efficiency, and
satisfaction with which specified users can
achieve specified goals in particular
environments” (International Standards
Organization)

3. Accessibility
Similar to usability, focusing on people with
disabilities or special needs.

4. Universal Design (UD)
Making products, environments and
compositions usable and pleasing to all
people, “to the greatest extent possible,
without the need for adaptation” (Ron Mace,
architect & disability advocate)

5. Universal Design (UD): “Curb cut” principle
Curb cuts and tactile paving are
required to fulfill a specialized need
for people who are blind or use a
wheelchair.
But they help almost everyone, in all
kinds of situations: pushing a
stroller… or a shopping cart… or
walking in the rain…
UD principles help users who are
tired, distracted, or in a hurry;
children and the elderly; and anyone
browsing with a slow connection or
an older cell phone
(Source: Wikipedia)

6. Usability is rhetorical
Here’s where purpose and audience are important. Can you imagine a typical
visitor? Can you predict what they want, and how they think?
Krug, Steve. Don’t Make Me Think!: A Common Sense Approach to Web Usability. 2nd ed. Berkeley:
New Riders, 2014. Chap. 1. Safari Books Online. Web. 30 Oct. 2014.

7. Hyperlinks should be distinctive
Source: Krug, Don’t Make Me Think!, chap. 1.

8. Randall Munroe, XKCD #773

9. Logical hierarchy
Site mapping
Source: Timothy Greig, UVic (Flickr)

10. Title: only appears when user moves the
mouse over picture
Alt (alternative) attribute: only available on
screen readers or browsers without
graphics enabled
Caption? Title? Alt attribute?
Caption: always appears below
the picture

11. Alt attributes
Finally, something wonderful happened.
<img src= "http://pixabay.
com/static/uploads/photo/2012/09/09/15/21/giraffe-56573_640.jpg"
alt="The baby giraffe drank from the bottle" />.

12. Alt attributes + text
Source: Web AIM, Utah State U. http://webaim.org/techniques/alttext/

13. Null alt attributes for decorative images
Icons that simply reinforce the text should have a “null” alt attribute
(alt=” ”). Source: Horton, A Web for Everyone.

14. Caption? Title? Alt attribute?
No code required:
Use the “Media”
window in
WordPress

15. Screen reader emulators
On a Mac: System Preferences > Universal Access >
VoiceOver (or press ⌘+F5)
Fangs, an add-on for Firefox, renders a web page the way
a screen reader would read it. Right-click on any web page,
then select “View Fangs.”
“Before” (inaccessible): http://www.w3.org/WAI/demos/bad/before/annotated/home.html
“After”: http://www.w3.org/WAI/demos/bad/after/annotated/home.html