Web Accessibility for New Devs

a graphic depicting a hand, eye, ear, and brain indicating various types of disabilities
  • Associate a label with every form control
  • Include alternative text for images
  • Identify page language and language changes
  • Use mark-up to convey meaning and structure
  • Help users avoid and correct mistakes
  • Reflect the reading order in the code order
  • Write code that adapts to the user’s technology
  • Provide meaning for non-standard interactive elements
  • Ensure that all interactive elements are keyboard accessible
  • Avoid CAPTCHA where possible
  • purely decorative content, such as icons or images
  • duplicated content, such as repeated text
  • offscreen or collapsed content, such as menus
HTML:<label for=”name” class=”hidden”></label><input type=”text” id=”name” name=”user-name”>CSS:.hidden {display: none;}
  • Validating mark-up can help in your debugging efforts
  • Valid mark-up will help with future compatibility
  • Properly formed HTML renders faster than HTML with errors
  1. Use a color contrast checker.
  2. Include a label for every input (whether you keep them in the visual design or not).
  3. Ensure all pictures have a descriptive alt tag.
  4. Investigate each use of a div (is there a more descriptive element that could be use instead?).
  5. Run an Axe Analysis and try to address (or at least note) any issues that pop up.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store