Accessible markup

Writing accessible HTML and CSS.

Semantic markup

• Avoid div when there’s a better semantic fit.
  • e.g. main, header, footer, nav, article, section
• Have a correct heading structure.
  • Exactly one h1 on the page
  • Don’t skip levels, e.g. no h1 > h3 with no intervening h2
  • This may also benefit SEO, though I’m not clear if directly or indirectly.

Interactivity

• Don’t build interactive elements out of non-semantic markup
  • e.g. Don’t make a button out of a <div> with JavaScript; use <button>
  • If for some reason you must do this, annotate with ARIA roles.

Test with a screen reader

Accessibility issues often only become clear in context. Everyone on the team should be comfortable testing with a screen reader.

• Windows: NVDA (free), JAWS (paid, muy expensive)
• Mac: VoiceOver
• Linux: Orca