nrkno / core-components

Accessible and lightweight Javascript components
https://static.nrk.no/core-components/latest/
MIT License
117 stars 10 forks source link

[deprecated] core-progress; use native progress #673

Closed klizter closed 1 year ago

klizter commented 1 year ago

After testing by @kristofferlium we have established that native progress now works sufficiently.

Adding aria-text to the progress element allows screen readers to convey the progress status in a satisfactory way across platforms.

Thus, core-progress will be deprecated, and the documentation updated to reflect this.

skjalgepalg commented 1 year ago

We've done some further testing to verify, and presently it seems voiceOver on iOS does not announce the element as a progress. This might be a deal-breaker for deprecation.

kristofferlium commented 1 year ago

unfortunately the support is still not good enough. See the following test results:

Basic example: <progress value=“20” max=“50"> MacOS 13.2 with VoiceOver - Safari og Chrome: Reads «40 % fremdriftsindikator» MacOS 13.2 with VoiceOver - Firefox: Reads «opptatt framdriftsindikator iOS 16.2 with VoiceOver - Safari, Chrome og Firefox: Reads «20.00» Windows 10 with NVDA 2022.3.3 - Chrome og Edge: Reads «Framdriftsindikator 20» Windows 10 with NVDA 2022.3.3 - Firefox: Reads «Framdriftsindikator 20 prosent» Windows 10 with Jaws 22.11.7 latest - Chrome og Edge: Reads «20 framdriftsindikator» Windows 10 with Jaws 22.11.7 - Firefox: Reads «40 prosent fremdriftsindikator Windows 10 with Narrator - Chrome, Edge og Firefox: Reads «40 fremdriftsindikator» Android 9 with Talkback - Chrome og Samsung Internett: Reads «20,0», pause, «20», pause, «fremdriftsindikator»

Best supported example with ARIA: MacOS 13.2 with VoiceOver - Safari og Chrome: Reads «15 av 50 30 % framdriftsindikator» MacOS 13.2 with VoiceOver - Firefox: Reads «opptatt framdriftsindikator iOS 16.2 with VoiceOver - Safari, Chrome og Firefox: Reads «15 av 50» Windows 10 with NVDA 2022.3.3 - Chrome, Edge og Firefox: Reads «Fremdriftsindikator 15 av 50» Windows 10 with Jaws 22.11.7 - Chrome, Edge og Firefox: Reads «15 av 50 framdriftsindikator» Windows 10 with Narrator - Chrome, Edge og Firefox: Reads «30 prosent fremdriftsindikator» Android 9 with Talkback - Chrome og Samsung Internett: Reads «15 av 50 fremdriftsindikator

kristofferlium commented 1 year ago

Oops, I forgot to write down the markup for the last ARIA example. I tried to use aria-valuemin, aria-value now and aria-valuemax, but the support was still not good enough. I ended up with the following markup:

kristofferlium commented 1 year ago
kristofferlium commented 1 year ago

<progress value="15" aria-valuetext="15 av 50" max="50">