Norric1Admin
commented
5 years ago Closed Norric1Admin closed 5 years ago
Norric1Admin
commented
5 years ago 
SavvasStephanides
commented
5 years ago I just did a quick test using VoiceOver on Safari. It does seem to notify the user whenever a checkbox is checked or unchecked ("ticked" / "unticked"). The checkbox does however seem to lose focus whenever it is checked / unchecked (I think the focus goes to "Clear selections")
Norric1Admin
commented
5 years ago Norric1Admin
commented
5 years ago @SavvasStephanides Is this related to https://github.com/open-sdg/open-sdg/pull/162#pullrequestreview-234978979?
Norric1Admin
commented
5 years ago From DAC: For ‘Checkboxes State’, you recommend adding an audio label so screenreaders can recognise when a category is selected. Our developer tried this on Safari and found that this already exists. Please let me know which browser and screenreader was used "JAWS v.16/18 with Internet Explorer 11 and NVDA with Mozilla Firefox."
When a checkbox is selected, the focus shifts from categories to the table. Where should the ideal focus be after selecting? "The focus should remain on the checkbox but users must be informed that it has been checked "
LucyGwilliamAdmin
commented
5 years ago We need to test that i) screenreader users are notified when checkboxes are selected across browsers and ii) that the focus remains on the checkbox when clicked.
Test URL: https://sdg.mango-solutions.com/a11y-checkbox-focus-fix/
N/A
No problem with ioS Safari, ioS Chrome or IE11 on Windows: focus was being kept and the screen reader was reading out whether or non the checkbox was checked. However on Chrome, focus was being kept but the screen reader was not saying whether or not the box was checked. I was using the Windows 10 Narrator as a screen reader so maybe there would be different results with a different screen reader - Lucy
Checkbox statuses seem to be announced properly using Chrome and Firefox on MacOS using VoiceOver. Also the focus remains on the checkboxes after clicking -Savvas
Using Microsoft Narrator: Works well on Edge, but on Firefox nothing happens when tabbing to and selecting the checkboxes. It reads the checkbox name but does not check it or say 'checked/unchecked'. This is a problem with or without the narrator - the box will not check. Using version 67.0.1. Same problem on Chrome too (I have approved https://github.com/ONSdigital/sdg-indicators/pull/3156). Haven't tested on Samsung yet. To consider - the select/clear all tabs don't give any indication. I'll speak to DAC about whether this also needs to be included - as it wasn't specifically mentioned in the report it should be fine. Update: Works well for Samsung Chrome and Internet. However if using 'Space' instead of 'Enter' for Desktop Chrome and Firefox, it says 'Space', not 'Un/Checked'. This either needs to be changed so it uses 'Enter' (best option), or change the words it uses. - Chris
Can select and deselect checkboxes on IE11 but does not announce the change in selection of the checkbox. Works fine on chrome, edge and firefox, but not IE - Sam (using NVDA screenreader)
Note: The only update required is to make this work on IE using NVDA. This is fine as DAC it works well using JAWS screenreader, and DAC said: "NVDA would usually be used with Firefox anyway so I wouldn’t call it an issue. I would say as long as this isn’t an issue for other assistive technologies and their respective browsers (i.e. JAWS with Internet Explorer or VoiceOver and Safari).“
SavvasStephanides
commented
5 years ago As mentioned before, the reason screen readers don't announce when a checkbox has been ticked or unticked, is because the checkbox loses focus after the change, thus the screen reader moving on to announcing the next focused item and "forgetting" about the checkbox status. The default behaviour in these cases is that the checkbox keeps the focus when ticked or unticked (see example here). Something must have therefore intervened with the default behaviour.
Most of last week and today I have been investigating which piece of code could have caused this unexpected shift in focus. It was like finding a needle in a haystack mostly because of the complexity of the code. So far I have concluded that the problem is somewhere along these lines. Still a long way to go.
Managed to pinpoint the exact line where the checkboxes loses focus. If I'm not mistaken this line appends some extra checkboxes in response to checking certain disaggregations (eg. adding some regions when a country is selected). I'm not sure why it loses focus, so I'll have to investigate further
SavvasStephanides
commented
5 years ago Pull request: https://github.com/ONSdigital/sdg-indicators/pull/3156
Norric1Admin
commented
5 years ago Norric1Admin
commented
5 years ago @SavvasStephanides The only problem with this is (I think) the ARIA tab reading 'space' as "space", rather than the expected "Checkbox checked/unchecked". Try this?: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
function changeCheckbox(event) {
let item = document.getElementById('chkPref');
switch(item.getAttribute('aria-checked')) {
case "true":
item.setAttribute('aria-checked', "false");
break;
case "false":
item.setAttribute('aria-checked', "true");
break;
}
}We can decide whether to pursue getting this working on IE / Windows Narrator (the only faulty combo).
The checkboxes present within the sub-categories accordion menus do not indicate to screen reader users when they have been selected. Screen reader users would expect check boxes to announce ‘Checkbox checked’ and ‘Checkbox not checked’ respectively.
Update: We should fix the focus issue, so that the user isn't taken to chart.js when they check the box. The focus should remain on the checkbox (maybe speak to Brock, who was looking at this code recently). Screenreader function should be tested as normal once this is solved.