Enable automated accessibility testing #1151
Conversation
* Use aXe tests provided by govuk_publishing_components gem * Add poltergeist to enable integration tests with JS * Update gem config to explicitly include styles missing from Slimmer
If the referenced aria-controls attribute points to the ID of an element on the page that’s not present the attribute is invalid. Equally, if JS fails to load the inputs will not be controlling anything. * Dynamically add the attribute to all checkboxes if the referenced ID is used and the element is on the page * Update accessibility criteria to reference issue
* Fixes aXe error: https://dequeuniversity.com/rules/axe/2.3/checkboxgroup?application=axeA PI * Generates a unique ID for the option select label * ARIA group: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Tec hniques/Using_the_group_role On VoiceOver for Mac this announces the number of checkboxes in the group when you tab into it. Following the first checkbox it does not read out the group name each time.
19px text has a contrast too low against turquoise for WCAG AA. Use bold font to increase contrast and fix aXe warning. See lengthy discussion here: alphagov/govuk_elements#200
Text in bar charts has a contrast too low against light blue for WCAG AA. Use govuk-blue to increase contrast and fix aXe warning.
* Larger font-size for at least ratio of 3.5:0, stop failing aXe tests * Add further examples and links to usage * Update styles to more closely match the bank holidays view
30s isn’t long enough to compile all the static assets. Increase to 2 minutes to allow tests to run. Switch from require phantomjs/poltergeist (https://github.com/colszowka/phantomjs-gem/blob/master/lib/phantomjs/po ltergeist.rb) to a modified version that specifies a timeout.
# TODO: Remove when PhantomJS updated on Puppet | ||
# Use modern PhantomJS version via gem | ||
# Based on: https://github.com/colszowka/phantomjs-gem/blob/master/lib/phantomjs/poltergeist.rb | ||
Phantomjs.path |
nickcolley
Sep 22, 2017
Contributor
Is this intentional?
Is this intentional?
fofr
Sep 22, 2017
Author
Contributor
Yes, see link above.
Yes, see link above.
OptionSelect.prototype.setCheckboxAriaControlsAttributes = function setCheckboxAriaControlsAttributes(){ | ||
var controls = this.$optionSelect.data('input-aria-controls'); | ||
if (typeof controls === "string" && $('#' + controls).length > 0) { | ||
this.$optionSelect.find('input[type="checkbox"]').each(function() { |
nickcolley
Sep 22, 2017
•
Contributor
Do we know how long this takes to execute? I'll give it a quick profile
Do we know how long this takes to execute? I'll give it a quick profile
fofr
Sep 22, 2017
Author
Contributor
It'll vary based on the number of checkboxes. I optimised somewhat by moving logic onto parent and checking logic only once as each checkbox has the same attribute.
It'll vary based on the number of checkboxes. I optimised somewhat by moving logic onto parent and checking logic only once as each checkbox has the same attribute.
nickcolley
Sep 22, 2017
Contributor
Before
57.10ms
46.03ms
51.65ms
After
56.92ms
45.76ms
55.98ms
At CPU 6x slowdown
Before
57.10ms
46.03ms
51.65ms
After
56.92ms
45.76ms
55.98ms
At CPU 6x slowdown
description: | | ||
Used on: | ||
* [https://gov.uk/vat-rates](https://gov.uk/vat-rates) |
nickcolley
Sep 22, 2017
Contributor
👍 nice
# Tests aren't going through Slimmer so we need to explicitly include styles | ||
GovukPublishingComponents.configure do |c| | ||
c.application_print_stylesheet = "core-layout-print" | ||
c.application_stylesheet = "core-layout" |
nickcolley
Sep 22, 2017
•
Contributor
do we need the grid? could we use header-and-footer-only?
nevermind: core-layout includes the components too 👼
do we need the grid? could we use header-and-footer-only?
nevermind: core-layout includes the components too
fofr
Sep 22, 2017
Author
Contributor
I'm using the same thing that the guide uses when you view it in a browser.
I'm using the same thing that the guide uses when you view it in a browser.
</div> | ||
<div class='options-container' id='<%= options_container_id %>'> | ||
<div class='js-auto-height-inner'> | ||
<div role="group" aria-labelledby="<%= title_id %>" class="options-container" id="<%= options_container_id %>"> |
nickcolley
Sep 22, 2017
Contributor
Do we need to check this change in different A.T?
Do we need to check this change in different A.T?
fofr
Sep 22, 2017
•
Author
Contributor
Yes. I've only been able to test with VoiceOver on Mac and iOS so far. (It tested well)
Yes. I've only been able to test with VoiceOver on Mac and iOS so far. (It tested well)
This is excellent work, let's test the update to the option select with more assistive tech since it's fairly complex before we merge this. (I know you're working from home, sorry!) |
Changes in 715a9cd are picked up by JAWS 17 and 18. They make the reading of each checkbox more verbose by reading the group name before the checkbox name each time. Unlike on VoiceOver which does it the first time but not the following times. This may slow down users when navigating through a list of items in a group with a long name. NVDA behaves the same before and after, ie it doesn't support the aria group role. JAWS 17 and 18:
NVDA:
VoiceOver on Mac:
VoiceOver on iOS:
|
Thanks for the testing results. The extra verbosity worries me since I wonder if it was intentionally left out when building this component originally, but it should not create barriers, what do you think? |
Confirmed that 0a70e29 works as expected on VoiceOver for Mac and iOS (checkbox changes read out the loading/results element). Confirmed this continues to work on JAWS 14/Windows 7 |
Talked to Paul, this change is seems good and does not introduce barriers, so we'll move this forwards and get some opinions on verbosity of re-reading of the label with the accessibility mailing list. |
Fix found accessibility failures:
Caveats:
Highlight answer
Updated to match https://www.gov.uk/bank-holidays and pass WCAG AA contrast ratio
https://govuk-static-pr-1151.herokuapp.com/component-guide/govspeak/highlight_answer
Before
After
Mobile
Before
After
Visual diff
Part of:
https://trello.com/c/Yq9FFia1/91-3-move-component-a11y-testing-from-application-into-gem-so-applications-get-the-testing-for-free