-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve accessibility and accessibility documentation of components #449
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,15 @@ | ||
name: Banner | ||
description: A page banner, designed to highlight important information | ||
body: Passing an aside to the banner will mean the banner renders in a grid layout. | ||
body: | | ||
Passing an aside to the banner will mean the banner renders in a grid layout. | ||
|
||
Real world example: [Consultation with history banner](/government/consultations/child-trust-fund-consultation-on-allowing-the-transfer-of-savings-from-a-child-trust-fund-to-a-junior-isa) | ||
accessibility_criteria: | | ||
The banner must: | ||
|
||
- be visually distinct from other content on the page | ||
- have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA | ||
- have an accessible name that describes the banner as a notice | ||
- have a text 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) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The actual wording of the WCAG requirement is "of at least", do we need to go beyond that? Also doesn't this qualify as "large text" and therefore only need to have a contrast ratio of 3:1? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We avoid confusion over the definition of large text by sticking with 4.5:1 for everything. |
||
fixtures: | ||
default: | ||
text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government' | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,19 @@ | ||
name: Download link | ||
description: A link with a file download icon | ||
body: | | ||
For usability the provided link text should indicate the file type and size of the download. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we update one of the examples on this page to include this information? |
||
accessibility_criteria: | | ||
The download link must: | ||
|
||
- accept focus | ||
- be focusable with a keyboard | ||
- be usable with a keyboard | ||
- indicate when it has focus | ||
- change in appearance when touched (in the touch-down state) | ||
- change in appearance when hovered | ||
- be usable with touch | ||
- be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html) | ||
- have visible text | ||
|
||
The download icon must: | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,7 @@ | ||
name: Lead paragraph | ||
description: The opening paragraph of content. Typically a content item’s description field. | ||
accessibility_criteria: | | ||
The lead paragraph must: | ||
|
||
- be visually distinct from other paragraphs | ||
The lead paragraph must be visually distinct from other paragraphs. | ||
fixtures: | ||
default: | ||
text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.' |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,9 +5,7 @@ body: | | |
|
||
The component accepts either a simple string description_text parameter that it wraps in a paragraph, or a description_govspeak parameter that is rendered through govspeak for more complex HTML layout. | ||
accessibility_criteria: | | ||
The notice must: | ||
|
||
- have a border of AA contrast ratio 4.5:1 | ||
The notice border colour must have a contrast ratio of more than 4.5:1 with its background to be visually distinct. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Contrast ratio for text is "at least" rather than "more than" but is this level of contrast necessary for non-text elements? What's the WCAG guidance here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There's no guidance for border colours in WCAG. But we know this contrast is necessary for text so can infer it's usefulness in distinguishing things from other things. |
||
fixtures: | ||
default: | ||
title: 'Statistics release cancelled' | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably out of scope of this PR, and we may have discussed this already, but is the component isolated if it relies on external CSS? (in this case the grid)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Out of scope, yes. Might want to track with an issue.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this case the grid classes would be better suited to being
.govuk-o-grid__row
.govuk-o-grid__column
etc. Since objects are shared across components.