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.
Usability
Accessibility
Universal Design
Usability
“The effectiveness, efficiency, and
satisfaction with which specified users can
achieve specified goals in parti...
Accessibility
Similar to usability, focusing on people with
disabilities or special needs.
Universal Design (UD)
Making products, environments and
compositions usable and pleasing to all
people, “to the greatest e...
Universal Design (UD): “Curb cut” principle
Curb cuts and tactile paving are
required to fulfill a specialized need
for pe...
Usability is rhetorical
Here’s where purpose and audience are important. Can you imagine a typical
visitor? Can you predic...
Hyperlinks should be distinctive
Source: Krug, Don’t Make Me Think!, chap. 1.
Randall Munroe, XKCD #773
Logical hierarchy
Site mapping
Source: Timothy Greig, UVic (Flickr)
Title: only appears when user moves the
mouse over picture
Alt (alternative) attribute: only available on
screen readers o...
Alt attributes
Finally, something wonderful happened.
<img src= "http://pixabay.
com/static/uploads/photo/2012/09/09/15/21...
Alt attributes + text
Source: Web AIM, Utah State U. http://webaim.org/techniques/alttext/
Null alt attributes for decorative images
Icons that simply reinforce the text should have a “null” alt attribute
(alt=” ”...
Caption? Title? Alt attribute?
No code required:
Use the “Media”
window in
WordPress
Screen reader emulators
On a Mac: System Preferences > Universal Access >
VoiceOver (or press ⌘+F5)
Fangs, an add-on for F...
Upcoming SlideShare
Loading in …5
×

Intro to Universal Design for the Web

544 views

Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Intro to Universal Design for the Web

  1. 1. Usability Accessibility Universal Design
  2. 2. Usability “The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments” (International Standards Organization)
  3. 3. Accessibility Similar to usability, focusing on people with disabilities or special needs.
  4. 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. 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. 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. 7. Hyperlinks should be distinctive Source: Krug, Don’t Make Me Think!, chap. 1.
  8. 8. Randall Munroe, XKCD #773
  9. 9. Logical hierarchy Site mapping Source: Timothy Greig, UVic (Flickr)
  10. 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. 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. 12. Alt attributes + text Source: Web AIM, Utah State U. http://webaim.org/techniques/alttext/
  13. 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. 14. Caption? Title? Alt attribute? No code required: Use the “Media” window in WordPress
  15. 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

×