A11y Acronyms
Which of these acronyms is not a real accessibility term? stand for?
a) WCAG
b) ARIA
c) FLUFF
d) All of them
c) FLUFF
True or false: Color alone must not be the only means of conveying information.
What is True. Any information conveyed by color MUST also have determinable text alternatives.
How many WCAG Levels of conformance are there and what are they?
What is 3 levels. Level A, Level AA, Level AAA
This semantic HTML element is focusable, responds to keyboard and mouse, and handles click events automatically - no JS needed
What is a <button>
On Mac this combo turns VoiceOver on and off
What is cmd + opt (command + option)
What does the “11” in “A11y” stand for?
Accessibility (the "11" represents the 11 letters between "A" and "y")
What type of image does not require alt text?
What is a decorative image
This 1990 law, often abbreviated with 3 letters, prohibits discrimination against people with disabilities in public life.
What is the ADA
When using `aria-live` this setting allows a screen reader to wait until the user finishes a task before announcing an update.
What is `aria-live="polite"`
While many people think of screen readers or magnifiers, this is actually the most widely used assistive technology on the web
What is the keyboard
What does ARIA stand for?
Accessible Rich Internet Applications
This writing approach emphasizes clarity, simplicity, and user-centered organization, aiming to ensure that readers can find, understand, and use information the first time they encounter it.
What is Plain Language
Which law requires federal agencies to make electronic and information technology accessible?
What is Section 508 of the Rehabilitation Act of 1973
Disabling this default mobile browser feature prevents users with low vision from zooming into your site (a major WCAG violation)
What is pinch-to-zoom
You can integrate this open-source library into software testing frameworks to catch accessibility issues like missing labels, color contrast violations, and more
What is Axe-Core
What does ADA stand for?
Americans with Disabilities Act
How many headings levels are there?
What is 6. H1-H6.
In 2012 a lawsuit filed by the National Association of the Deaf lead to this streaming giant agreeing to caption 100% of its content by 2014.
What is Netflix
You wrote a test that uses `getByTestId` to assert a button exists. But screen readers can’t access the button. Why was this test misleading?
What is `getByTestId` (or 'asserting with a test id') does not verify semantic accessibility.
Use another query like `getByRole`
This Chrome extension opens in DevTools and allows deep inspection of ARIA attributes, roles, and name computations
What is the accessibility pane/panel (or ARIA DevTools, etc)
What does the acronym W3C stand for, and what is its role in web accessibility?
What is World Wide Web Consortium; it develops standards and guidelines to ensure the long-term growth of the Web.
What contrast ratio is recommended between text and background for readability?
What is the significance of the Domino's Pizza case of 2016?
What is confirming that the ADA applies to website and digital products.
It was a landmark Supreme Court decision affirming that the ADA applies to websites.
You’ve rendered a list of focusable items in React inside a Fragment (<></>) - but keyboard navigation skips them. What is likely the cause?
What is missing `tabOrder` because Fragments do not render DOM nodes.
Will also accept - "What is missing OR invalid tabOrder/semantic structure/tabIndex"
This keyboard key, when used alone, can uncover a surprising number of accessibility bugs - no browser extensions required!
What is `Tab`