Posts tagged

Blake Watson, “Empower Through Web Development,” CSS-Tricks (Jun 27, 2018)

“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.

Non-technical Accessibility Tips for UI Design /

Notes from “Advocating for Accessible UI Design” by Lara Schenck on CSS-Tricks.

Accessibility is not just the responsibility of web developers. Accessibility begins with design decisions. Share non-technical tips for UI design to everyone on the team so they make more accessible design choices in future:

  1. Easy on the animations.
  2. Make sure background and text colors have enough contrast.
  3. Be very careful when overlaying text on images, or don’t.
  4. Double-check the readability of font weights and sizes.
  5. Indicate external links.
  6. Differentiate between action-oriented social media links vs. profile links.
  7. Don’t rely 100% on icons and colors to communicate.
  8. Consider what the design would look like without interactivity.

Read the details at “Advocating for Accessible UI Design.”

Laura Brady, “Accessibility in Ebooks: Some Resources” (Sep 27, 2017)