The accessibility laboratory
Try the route other people take.
Follow focus. Connect a label. Compare the words against their background.
Three small experiments make individual accessibility properties visible. Use the keyboard as well as a pointer. Values and focus history stay in this page’s memory; reloading starts again. These experiments are learning tools, not a complete accessibility audit.
01 · Follow the focus
Press Tab to enter the practice region. Use Shift+Tab to return and Enter or Space to activate a button. The report lists the controls you actually focus; it does not move focus automatically.
Focus a practice control to see its name here.
Focus is a browser position. A visible outline helps you find it; DOM order and native controls give a useful starting sequence. The link above deliberately skips to the next experiment when activated.
02 · Connect the visible label
Compare the displayed code with the behaviour. In the disconnected mode, the nearby words do not name the field. Switch to a matching for/id pair, click the label and check that focus reaches the input.
Read the label solution
Use <label for="lab-project-name">Project name</label> with <input id="lab-project-name">. A placeholder can give an example, but it disappears during entry and does not replace a label. A wrapping label also works.
03 · Compare text contrast
Choose text and background colours. The result uses the WCAG relative-luminance formula for opaque sRGB colours. It compares the ratio with 4.5:1 for normal text and 3:1 for large text at WCAG AA. Large text means at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. The preview uses normal 16px text.
A small idea deserves readable words.
A passing ratio does not check reading order, labels, focus, images or every visual state. Also test hover and focus styles in your own page.
W3C: Understanding contrast minimum (new tab) · W3C: Labelling controls (new tab) · Keyboard and focus guide
Repair a label yourself → · Return to the complete first-page route