Basic Web Accessibility

Basic Considerations in Web Accessibility

Madeline Bernard, 12/30/15

a fake set of javascript testing results titled tl:dr, passing for alt tags, keyboard accessibility, no CAPCHA, yes HTML

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

Jargon glossary

  • a11y


From accessibility, a 13-letter long word that is  a + 11 letters + y


(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

  • 1,249
Loading comments...

More from Madeline Bernard