Basic Web Accessibility
Basic Considerations in Web Accessibility
Madeline Bernard, 12/30/15
Basic Web Accessibility
Many possible users to consider
-
~4.5% of people are colorblind
- Give info with more than just color
- Use colors that work for the common forms of colorblindness
-
Chemo brain, ADHD, harassed by kids or pets, broken arm...
Basic Web Accessibility
Fully using HTML? 80% done
divs for everything === no
specific HTML like "button" comes with a bunch of useful things built in, which you would otherwise have to add:
- focusable
- tab-able
- fires on space & enter & return
-
Headings (H1 etc)
- how 60% of screenreader-users navigate a long page
- fill in H1-H4 before skipping levels
-
Test everything without a mouse!
Basic Web Accessibility
May 2012 survey, n = 1782
Basic Web Accessibility
Things that get read out
-
Links
The text of the link may be all someone has to go by, make it count
-
Images: alt attributes
- <img src="bar.jpg" alt="foo"></img>
- <svg><desc>foo</desc></svg>
- you don't need to say "image of" or "picture of"... it knows
- the shorter the better
- if the image isn't worth describing, use alt="", or else the file name gets read out
- if the image needs a play-by-play essay to explain it, offer a link to that essay in a caption
Basic Web Accessibility
Better for everyone
-
Form assists
- Labels: if you do them right, clicking the word will tick the box (or whatever)
- Fieldset/Legend for grouping elements in complicated form
- Input type: will provide proper specific keyboard when your site is used on mobile
- Don't make them timed! Or allow for people to click for more time
-
Strong color contrast
-
Blatantly obvious focus
Basic Web Accessibility
Getting Fancy
-
Pause button for slideshows
-
WAI-ARIA attributes
- Rule of thumb: if something is listening for click or hover events, it should also have ARIA attributes
- But scattering ARIA around like sugar does more harm than good
-
Pop-up/modal boxes you can 'esc' from!
Link full of links to repos/how-to's:
Basic Web Accessibility
Links for more info
- http://snook.ca/technical/colour_contrast/colour.html
- https://www.polymer-project.org/0.5/articles/accessible-web-components.html
- http://blog.knowbility.org/content/what-developers-should-know-for-a-universally-accessible-internet/
- https://www.paciellogroup.com/blog/2011/04/html5-accessibility-chops-just-use-a-button/
- http://lightgetsin.dreamwidth.org/312472.html (someone asks for accessibility and records the responses)
- http://www.yourhtmlsource.com/accessibility/contentaccessibility.html
- https://twitter.com/marcysutton
Jargon glossary
-
a11y
-
WAI-ARIA
From accessibility, a 13-letter long word that is a + 11 letters + y
1234567891011
(often just ARIA)
Web Accessibility Initiative - Accessible Rich Internet Applications
- a set of attributes you can add to HTML tags to indicate their purpose, for when you can't use the proper/built-in tag
Considering Accessibility
By Madeline Bernard
Considering Accessibility
A 5 minute presentation on web accessibility (#a11y) basics, for developers to consider
- 2,083