Quiz

  1. Are screen readers standardized in how they process information on a page?

    I honestly don't know. I tried a screen reader quite a few years ago, and I found it baffling. I imagine it's a tough learning curve. So that means I don't have any first-hand experience.

    I imagine that they are like web browsers (e.g. Chrome versus Safari versus Edge): mostly the same, but with some differences.

    I asked ChatGPT and got the following:

    Different screen readers—like:

    • JAWS
    • NVDA
    • VoiceOver
    interpret and present the information differently.

    1. Reading order and verbosity

    • Some are more verbose (JAWS)
    • Others are more minimal (NVDA by default)
    • Punctuation, ARIA hints, and hidden text may be read differently

    2. Keyboard navigation models

    All support navigation by headings, links, landmarks—but:

    • Keybindings differ
    • Default navigation modes differ (browse vs focus mode)

    3. ARIA interpretation quirks

    Even though ARIA is standardized, behavior varies:

    • aria-live announcements can fire differently
    • role="button" vs <button> may not behave identically everywhere
    • Edge cases (like nested interactive elements) are inconsistent

    4. Dynamic content (JS-heavy apps)

    This is where divergence really shows up:

    • Timing of announcements differs
    • Some screen readers miss updates unless explicitly managed
    • Focus management matters a lot

    5. Forms and labeling

    • Label association is usually consistent
    • But fallback behaviors (e.g., missing labels) differ significantly
  2. Could you give an example of how to make something you need a mouse for more accessible (ie: drop downs); would you just make it a keyup event?

    I would make it a button, which can then be triggered by tabbing to it and pressing "enter" or the like.

    I would set up the "esc" key (or similar) to close the dropdown.

  3. Thank you so much for teaching us about accessibility! I was wondering if you could touch on color contrast a bit, and how we should balance good aesthetics/design while making the website accessible for individuals with visual disabilities?

    You're welcome! I'm glad to teach it! It's so important to be thoughtful and kind to all possible users.

    WCAG requires 4.5:1 minimum contrast ratio for normal text.

    First, we'll use WAVE on this page. Then, we'll start up a color picker on the following colored span

    The color picker will show whether our color choices meet the AA or even the AAA standard.

    Just by coincidence I read this article on dark mode which says

    According to WebAIM’s 2024 Million analysis, 83.6% of websites have color contrast issues. Dark mode makes this worse because designers assume dark backgrounds automatically pass contrast checks.