WCAG 2.2 visual checks: contrast, focus, target size & reading order

20 questions

Each Question shows a screen with an accessibility problem you can spot by eye. The Explanation then shows the same screen as an accessibility tree, so you can compare what assistive technology gets with what only shows up in the pixels. Topics: WCAG 2.2 AA contrast for text and controls, focus rings that are removed, covered, or lost in forced colors mode, 24px targets and their exceptions, placeholders used as labels, and DOM order versus visual order.

Start

Questions

Not answered. Does this 16px gray body text meet WCAG 2.2 contrast at level AA?
Not answered. All four samples use #888888 on white (3.54:1). Which ones meet WCAG 2.2 AA contrast?
Not answered. The email field's only visible edge is a #dddddd border on white (1.36:1). What is the WCAG 2.2 AA verdict?
Not answered. Is this pale Place order button exempt from WCAG 2.2 contrast requirements?
Not answered. Which WCAG 2.2 success criterion does this page fail when someone uses a keyboard?
Not answered. The team wants to hide the ring after a mouse click but keep it for keyboard users. Which changes do that?
Not answered. A box-shadow focus ring disappears in Windows contrast themes. Which change brings the ring back and still respects the user's colors?
Not answered. Keyboard focus moves to the Pricing link, which is completely hidden under a sticky cookie banner. What does WCAG 2.2 AA say?
Not answered. Which toolbars meet WCAG 2.2 AA 2.5.8 Target Size (Minimum)?
Not answered. Every target below is smaller than 24 × 24. Which ones still meet WCAG 2.2 AA 2.5.8?
Not answered. How wide is this notification button's pointer target, in CSS pixels?
Not answered. These 32 × 32 toolbar buttons touch each other. What is the WCAG 2.2 verdict?
Not answered. The user has filled in both fields. What does a screen reader announce when focus goes back to the first one?
Not answered. Autofill has filled every field, so no placeholders are showing. Who does this form make things harder for?
Not answered. What accessible name does this email field get?
Not answered. Which changes give this field a label that stays visible after the user types?
Not answered. Focus is at the start of the dialog, and the user presses Tab once. Which button gets focus?
Not answered. In what order does a screen reader read this card?
Not answered. Which fix makes keyboard and screen reader order match this tile's visual order in every current browser?
Not answered. In which layouts does the gap between DOM order and visual order fail WCAG 2.2 (1.3.2 or 2.4.3)?