I checked how this looks with a screen reader. 2024-06-25 15-25-38.mp4 is an exemple using NVDA. At first I navigated the page using Tab, we can see we completely got over it. However by navigating using arrow keys (reading the content line by line) we could see `clickable` objects. There's three clickables for the three spans in the switch, and the switch input itself is properly labelled and functional:
Clicking on the `clickable ON` activates notifications
Clicking on the `clickable OFF` deactivates notifications
Clicking on the `clickable` or the input itself switches the state of notifications here
=> We could hide the three `clickables` and the screen reader experience would just be clearer.
Second issue, the input does not convey enough information about its status (note that the clickables do not provide anything either):
When changing the value, it's read out `Your settings are being saved. Saved` I guess this is from the green modal that appears on the bottom of the screen and is actually a live region. However, the new value of the setting is never conveyed.
At any point, there's no way for screen reader users to know what is the current state.
The HTML base here looks okay, however the use of the `checked` property does not respect the standard: bootstrap switch uses it to store the current state of the input, while we can read on MDN webdocs:
A boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)
So the fix for this will probably just to make sure the IDL attribute is updated at the same time as the content attribute.
Charpentier Lucas on 25/Jun/24 15:46
I checked how this looks with a screen reader. [^2024-06-25 15-25-38.mp4] is an exemple using NVDA. At first I navigated the page using Tab, we can see we completely got over it. However by navigating using arrow keys (reading the content line by line) we could see `clickable` objects. There's three clickables for the three spans in the switch, and the switch input itself is properly labelled and functional: * Clicking on the `clickable ON` activates notifications * Clicking on the `clickable OFF` deactivates notifications * Clicking on the `clickable` or the input itself switches the state of notifications here
=> We could hide the three `clickables` and the screen reader experience would just be clearer.
---- Second issue, the input does not convey enough information about its status (note that the clickables do not provide anything either): * When changing the value, it's read out `Your settings are being saved. Saved` I guess this is from the green modal that appears on the bottom of the screen and is actually a live region. However, the new value of the setting is never conveyed. * At any point, there's no way for screen reader users to know what is the current state.
The HTML base here looks okay, however the use of the `checked` property does not respect the standard: bootstrap switch uses it to store the current state of the input, while we can read on MDN webdocs: {quote}A boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.){quote}
So the fix for this will probably just to make sure the IDL attribute is updated at the same time as the content attribute. With a proper IDL attribute update, the native features of checkbox inputs should cover all the screen reader needs.
This message was sent by Atlassian Jira (v9.3.0#930000-sha1:287aeb6)
If image attachments aren't displayed, see this article.
