Skip to content
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

Merged
merged 4 commits into from Aug 16, 2017

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Aug 15, 2017

Updates to accessibility acceptance criteria following a review from @LJWatson, with corresponding updates to improve accessibility of components.

The updated components and guide are available for review on Heroku.

  • Update accessibility acceptance criteria for banner, notice, contents list and link components
  • Put space between contents number and text for better screen reader pronunciation
  • Put notices and banners in <section> elements and include aria-label to give an accessible name

This doesn't include fixes for issues we're tracking separately in #441, #442 and #443

fofr added 3 commits Aug 15, 2017
* Incorporate feedback from Leonie into accessibility criteria
* Expand definition of an accessible link
* Remove single item lists in criteria section
* Include some real world examples of headings
* Meet accessibility acceptance criteria
* Add test to prevent space from being accidentally removed
* Use aria-label to indicate that this area is a notice
* “Notice” label works for both banner and notice components, they’re
conceptually the same
* Use section elements as the notices are standalone sections
* Refactor banner logic to avoid repetition of container
@boffbowsh boffbowsh temporarily deployed to government-frontend-pr-449 Aug 15, 2017 Inactive
@@ -5,7 +5,8 @@ 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)

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

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?

This comment has been minimized.

@fofr

fofr Aug 16, 2017
Author Contributor

We avoid confusion over the definition of large text by sticking with 4.5:1 for everything.
I will update to say "at least".

@@ -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.

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

Can we update one of the examples on this page to include this information?

- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with speech

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

I'm wondering if this is clear enough - obviously you mean with a screen reader, but it doesn't actually say that. Is there a WCAG page we can simply link to here to give a bit more information?

This comment has been minimized.

@fofr

fofr Aug 16, 2017
Author Contributor

We can change speech to dictation.

This comment has been minimized.

@vanitabarrett

vanitabarrett Aug 16, 2017
Contributor

Not sure if this is what you're referring to anyway, but I think Leonie's referring to speech recognition software like Dragon?

Ignore me - this has already been mentioned below.

- change in appearance when hovered
- be usable with touch
- be usable with speech
- have visible text

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

Do we need to specify what this means (i.e. presumably contrast ratio? Font size?) or can we link to an appropriate WCAG rule?

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.

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

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?

This comment has been minimized.

@fofr

fofr Aug 16, 2017
Author Contributor

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.

- change in appearance when hovered
- be usable with touch
- be usable with speech
- have visible text

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

See previous comments for the same criteria.

<section class="app-c-banner<% if aside %> app-c-banner--grid<% end %>" aria-label="Notice">
<% if aside %>
<div class="grid-row">
<div class="column-third">

This comment has been minimized.

@andysellick

andysellick Aug 16, 2017
Contributor

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)

This comment has been minimized.

@fofr

fofr Aug 16, 2017
Author Contributor

Out of scope, yes. Might want to track with an issue.

This comment has been minimized.

@nickcolley

nickcolley Aug 16, 2017
Contributor

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.

@LJWatson
Copy link

@LJWatson LJWatson commented Aug 16, 2017

@fofr

"We can change speech to dictation.">

Note that dictation is not the same as speech recognition. Dictation software enables you to dictate content, speech recognition software enables you to control your OS, applications etc. using voice commands. If a different term is needed, then "voice" would be more appropriate.

@andysellick

"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?">

WCAG 2.0 doesn't apply this SC to non-text content (though this will change in WCAG 2.1). That said, in this context I suggest we focus on what this pattern needs to do - and I think one of those things is to be obviously visible to everyone.

@fofr fofr requested a review from nickcolley Aug 16, 2017
Link to guidance on voice recognition and why it’s useful
@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 16, 2017

I've changed "speech" to "voice commands" in c964336 and linked to https://www.w3.org/WAI/perspectives/voice.html

Copy link
Contributor

@nickcolley nickcolley left a comment

Great work thanks everyone 👍 💯 🚀

@nickcolley nickcolley merged commit d2baedd into master Aug 16, 2017
2 checks passed
2 checks passed
continuous-integration/jenkins/branch This commit looks good
Details
security/snyk No new vulnerabilities
Details
@nickcolley nickcolley deleted the tweak-components branch Aug 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants
You can’t perform that action at this time.