Improve accessibility for blind users

fcnjd commented 1 year ago

Overview

Since I am blind, I'm using a screenreader. Therefore, I'd like to suggest some accessibility improvements.

References and additional details

For replication, it might help to either turn on a screenreader, or use accessibility testing tools like Lighthouse. Things I came across:

The radiobuttons to adjust what the chart shows are unlabelled
The checkbox at the total value of the wallet is unlabelled as well
The buttons on the dashboard (overview, wallet, rewards etc.) should be marked with aria-current attribute (and of course corresponding value) when the page is loaded
Currently, the lang attribute in the top-level HTML tag is always en. This should better dynamically change together with the current language, as like this a screenreader would read out the text with an English language, no matter which language is displayed

Acceptance Criteria

All HTML elements have labels
lang attribute dynamically changes to the preferred language
Tools for automatic testing (like Lighthouse) show 100%, since those tools should generally find nothing

Need By Date

No response

Screenshots/Mockups

No response

Estimated effort

No response

purelycrickets commented 6 months ago

@twblack88 this issue was created by a user some time ago, any chance we could get some accessibility friendly improvements prioritized around the above issues brought up?

twblack88 commented 6 months ago

pass for labels is a good callout and something that is doable. we'll spike into the HTML translation workflow.

firebomb1 commented 6 months ago

The above PR I've authored should address this part of the issue:

lang attribute dynamically changes to the preferred language

Thanks for bringing it to my attention!

fcnjd commented 6 months ago

Thank you very much for prioritizing the improvements - and already starting with it. I'm very glad to see progress going on here!

shapeshift / web