Accessibility: What the Embeds Do and What Stays Yours
What the thumbs and quests widgets do for keyboard and screen-reader users today, how to check it on your site, and the gaps that are yours to cover.
Both widgets use real buttons with spoken names, run as focus-trapped dialogs, speak their status changes, and honour reduced motion and high-contrast mode. Element picking works from the keyboard. What stays yours: colour contrast, the spoken labels in other languages, and not letting the × lock people out.
Both widgets are built against WCAG 2.2 AA and tested with axe. This page lists what they do, checked against their code, and what they leave to you.
Know what the thumbs widget does
| Area | What it does |
|---|---|
| Buttons | Real <button>s in the tab order, named “Send positive feedback”, “Send negative feedback”, “Record a screen recording” and “Hide Feedback”. A thumb reports itself pressed while it waits for a pick |
| Picking an element | Works from the keyboard: Tab or the arrows move, Enter picks, Escape cancels. Focus follows the highlight and each element is spoken. See Element targeting |
| Message box, phone sheet, markup editor, video review | Dialogs with a spoken name. Focus is kept inside, the page behind is hidden from screen readers and made inert, Escape closes, and focus returns to the button that opened it |
| Status | Spoken through a live region: a send landing or failing, a screenshot taken, the vote flipped, recording started and stopped, the last five seconds of a recording |
| Thank-you and error screens | Focus moves to the heading, and both lines are spoken |
| Focus | A 2-pixel ring in the colors.marker colour on every control, shown for keyboard focus only. The × and hidden incognito buttons appear when focused |
| Motion and contrast | Reduced-motion settings stop every animation. High-contrast mode gets system-colour focus rings and outlines |
The tooltip beside a button is drawn on hover only and is not spoken.
Know what the quests widget does
| Area | What it does |
|---|---|
| Choices | A single-choice question is a radiogroup of radios, a multiple-choice one a group of checkboxes, each with aria-checked. Arrow keys move between options, 1 to 9 pick one, Enter moves on |
| Fields | Required fields carry aria-required. A failed step marks the field invalid, links it to the error text, and speaks the error |
| Progress | A progressbar, and “Step 2 of 5” spoken at each step |
| Modal and inline | As a modal it is a focus-trapped dialog that Escape closes; inline it is part of the page. At the end, focus moves to the thank-you heading, or to the “Couldn’t send your answers” heading, which is spoken at once |
autoAdvance is off by default. Turned on, a single-choice pick moves to the next question after 180 milliseconds, which surprises someone moving through the options with the keyboard. Leave it off if keyboard users matter to you.
Check it with a keyboard
Tab to the buttons
From the top of the page, tab until focus reaches the thumbs. The ring should be visible, and the × should appear.
Pick an element
Press Enter on a thumb, move with Tab, and press Enter on something.
Send a message
Focus should land in the text field. Tab around: focus stays in the box. Type, tab to the button, press Enter.
Listen to it
Repeat with VoiceOver, NVDA or TalkBack. Every control should say its name, and the thank-you screen should be read out.
Check your colours
The widget uses the colours you give it, including poor ones. Measure each against where it lands:
| Colour | Lands on |
|---|---|
| Resting thumbs | Always grey: a #374151 icon on #f3f4f6, whatever colours you set |
colors.positive, colors.negative |
The hover fill under a white icon, the targeting outline, and the vote badge under a white icon. White on the default green is 2.2:1 |
colors.marker |
The submit button, with black or white text picked for it, and the focus rings. White on the default #6365f1 is 4.5:1, enough for text, in thumbs-embed 1.8.0 or later |
WCAG asks for 4.5:1 for text and 3:1 for icons and focus rings. The quests widget’s colours are colors.accent, colors.error and colors.focus; see Theming the quests embed. Colour settings are on Brand color matching.
Translate the spoken labels
The button names are text options. Four of them have no script attribute, so script-tag sites set them in a JSON config block. The vote badge’s name, the status messages, the video flow and the markup editor are English only. Text customization lists them all.
Don’t lock people out
The × hides the widget in that browser for good, with no way back in the widget itself. A keyboard or screen-reader user who presses it by mistake loses it. Set hideDismiss: true, or give people a link that brings it back; see Conditional display.
incognito buttons are invisible until hovered or focused, so a touch-screen user cannot find them.
Know what stays yours
- Landmarks and a skip link on your own page, so a keyboard user can get past the floating buttons.
- Stacking: tab through your page with the widget on and check that no focused control hides behind it.
zIndexis on Position and placement. - Placement: a “Was this helpful?” at the end of an article sits in the reading order when mounted with
container, rather than floating in a corner.