Role and semantics
Section titled “Role and semantics”The title is a real heading (headingLevel, h3 by default). The text region is a region named by the title (role="region") and takes focus with tabindex="0", so it scrolls from the keyboard. The reading bar and the fade have aria-hidden. The checkbox reads the hint or the error through aria-describedby.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | To the text region, the link and the checkbox. |
| Up, Down, Page Up, Page Down | Scroll in the text region. |
| Space | Checks the box. |
The text region shows a focus ring. Focus does not move when the checkbox unlocks; the status region says it did.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Text region | “Terms of use, region” |
| Locked checkbox | “I have read and accept the terms, checkbox, dimmed. Scroll to the end of the text to accept.” |
| At the end | “You reached the end of the text; you can accept now.” |
Contrast
Section titled “Contrast”Text has 4.5:1; the region border and reading bar 3:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How ConsentBlock meets it | What product teams must do |
|---|---|---|
| 2.1.1 Keyboard | The scroll region takes focus and scrolls from the keyboard. | — |
| 3.3.2 Labels or instructions | The reason for the lock is under the checkbox. | — |
| 3.3.1 Error identification | The error is linked to the checkbox. | Pass error on submit. |