Web Accessibility slides

[zdashamber]

I'm going to give a five-minute presentation tomorrow evening on basic web accessibility (what to do re: designing and developing a website)... Here are the slides: https://slides.com/madelinebernard/webaccessibility

I'm interested in taking feedback on it, if you have any!

Comments

[deborah]

Nice presentation, though maybe it could use a little more structure. One way to think about it is, if you were writing all of it down as a single web page, what would the h1-h6 heading elements be? I always encourage people to think of headings as their page outline, since that's what makes them most useful to screen reader users. What's the outline of this piece?

In five minutes, you can't say much, and your best bet might be to talk about your paper or digital handout, and where people can find more information.

Some vita points:

1. "Accessibility" does not mean "screen reader accessibility". A good set of Web Personas is a great way of understanding this. There's a great set of disability personas at the W3C.


2. This means you must remember keyboard accessibility. In the modern web, this means
   • Use native HTML whenever possible (your slide 3 alludes to this but it's vitally important)
   • tabindex (should always be 0 or -1, never positive)
   • In the JS, keyboard events for everywhere there's a click or hover event.
   • WAI-ARIA roles


3. The HTML title attribute is almost never useful


4. Writing your own keyboard shortcuts in JS does not add accessibility in most cases. If you have them, document them, make that help file easy to find, and make a way to turn them off. Most users of AT already have any number of keyboard shortcuts and site-specific ones probably conflict.


5. Color contrast, labelled controls, and high-visibility indicators of keyboard focus are vital. Usability for all users is enhanced by these, for what it's worth. Misused minimalist design drives users away.


6. <abbr> actually doesn't make that big a difference for most users. Just like sighted users, screen reader users will recognize "NASA" more than "National Aeronautics and Space Administration".


7. Modal pop-up windows are usually a disaster. Make them correctly


8. WebAIM surveys are up to survey 6


9. The two most important things to say about WAI-ARIA are (1) that it's one of the vital tools necessary to make the modern, dynamic web accessible, and (2) "the first rule of using WAI-ARIA is: Don’t use it unless you absolutely have to! The less WAI-ARIA you have, and the more you can count on using native HTML widgets, the better"


10. There's a lot of misinformation out there about web accessibility; web search wisely. Some resources to trust:
    
    
    • The W3C: http://www.w3.org/WAI/
    
    
    • Marco Zehe: https://www.marcozehe.de/
    
    
    • The Paciello Group: https://www.paciellogroup.com/blog/
    
    
    • WebAIM; http://webaim.org/
    
    
    • WebAIM mailing list: http://webaim.org/discussion/

[zdashamber]

Thanks so much for the notes!

About abbr, I was wondering if, for instance, a screen reader would say "eyoc" instead of EEOC (Equal Employment Opportunity Commission)... Or some of the other, not so pronounceable acronyms. But yes, sounds like I should just find another example of "uncommon but helpful" HTML tags to use in that point.

Loved the WebAIM surveys, the 2012 #4 one was the most recent one I saw with a "these are the most annoying things" chart.

The Personas link is great, thanks! More directly actionable than the Alphabet of Disability I linked.