Notes

“Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility”

Summary of the article by Andy Bell, “Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility,” January 11, 2018.

  1. Document Structure and Semantics:
    1. Use a Single <main> Element: Help screen readers and add a skip link (and a :focus style) to it.
    2. Use Elements Appropriately: Use <button> for interactive elements and get keyboard events for free.
    3. Get Your Heading Hierarchy Locked-Down: Help screen readers navigate pages with a nice structure of <h1>, <h2>, etc.
  2. Get Your Color Contrast Right: Use tools to get a compliant contrast ratio of at least 4.5:1 for text and 3:1 for headings.
  3. Responsible Text Labels: Use attribute aria-label to give context to labels and links.
  4. Small Typography Tweaks With a Big Impact:
    1. Size body content at 16px minimum, and line-height at around 1.5.
    2. Highlight key words and phrases.
    3. Use ligatures and decorative elements only in headings; sans-serif fonts are better for readers with dyslexia.
  5. Enhance Keyboard Support:
    1. Allow the escape key to hide dialogues.
    2. Use the :focus pseudo-selector to add obvious state changes.
  6. Don’t Rely on Color Alone to Communicate State Changes

Keep learning about accessbility. See the article for recommended resources.