Sha256: 5e802a0ddf00c2cfeffbd954d6a65a48edefd199a43e2b63b45616551610f007
Contents?: true
Size: 1.83 KB
Versions: 38
Compression:
Stored size: 1.83 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)
Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
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).
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
38 entries across 38 versions & 1 rubygems