Accessibility

[shzeshzeshze]

Wondering if improved accessibility is in the works? Or has the team settled on an accessibility standard, something like WCAG 2.0 AA or 2.1 AA? I haven't done a full manual test of Daedalus as I'm just trying it out for the first time today but from a very quick screen reader test (two very important things: using the main navigation and navigating to pages) the main icon navigation has no discernible text. When a screen reader user focuses a particular button in the navigation it just reads button. When a screen reader user clicks on one of these navigation links the screen reader alerts to a button being pressed but then nothing. I haven't dug around in the code yet but presumably the routing is being done via Javascript and because there is no page reload a screen reader user is unaware their button click has done anything. Ideally the user will be alerted of a page change and the focus should be programmatically handled according.

According to the CDC, in the U.S. alone there are 61 million people who have some sort of disability. I can imagine this number is much greater world-wide. I think this warrants investigating in order to provide an equivalent experience to all.

Thanks for your time.

Edit: spelling

[nikolaglumac]

cc @darko-mijic

[shzeshzeshze]

To remediate the SidebarCategory buttons lack of disernable text you could add an aria-label to the <button> element. Assuming name is a human understandable value (e.g. Wallets, Staking, Voting, etc.).

Remediating accessibility on a single page application is probably a little more involved. Here is a nice write up explaining one method of accessible routing in React.

Basically we'd want to create a "Messages" component. This can render something as simple as a visually hidden <div> with the ARIA attributes aria-live="polite" aria-atomic="true". The messages in this case would be about page loads, so things like: "The wallets page has loaded, The staking page has loaded, The voting page has loaded." The messages should be informative, brief, and in most cases removed right after they have be inserted into the component. aria-live="polite" should be used in this case. It will let the screen reader finish reading whatever it may be reading before announcing our message.

Once the client is done rendering the new view we are still left with the focus on the SidebarCategory button. It would be useful, once React has rendered the new view, to move focus to the new content. Presumably a <h1> for that page. If you'd run into an issue with that particular element receiving focus, adding tabindex="-1" to desired focus' container should do the trick.

Edit: fixed weird markdown formatting