Sha256: ff9cb21bd165f9f6ecaac35daceb5d4686f66930eca1195b74a6d80fdc023250
Contents?: true
Size: 1.72 KB
Versions: 80
Compression:
Stored size: 1.72 KB
Contents
name: Form label
description: Use labels for all form fields.
body: |
For use with other form inputs e.g. [Radio buttons](/component-guide/radio)
accessibility_criteria: |
All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
Labels must:
- have visible text
Hint text must:
- be associated with an input. The `hint_id` must match the `aria-describedby` property on the input your label is associated with.
If hint text is within a label it will be announced in its entirity by screen readers. By putting the hint alongside labels and associating hints with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight. [A discussion of this approach](https://github.com/alphagov/govuk_elements/issues/574).
govuk_frontend_components:
- label
examples:
default:
data:
text: "National Insurance number"
html_for: "id-that-matches-input"
with_hint:
data:
text: "National Insurance number"
html_for: "id-that-matches-input"
hint_id: "should-match-aria-describedby-input"
hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
bold_with_hint:
data:
bold: true
text: "National Insurance number"
html_for: "id-that-matches-input"
hint_id: "should-match-aria-describedby-input-bold"
hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
Version data entries
80 entries across 80 versions & 1 rubygems