Improve accessibility for blind users

[fcnjd]

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]

@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]

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

[firebomb1]

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]

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