UI hard to navigate for screenreader users

[fcnjd]

Dear Backpack team, with this issue I as a blind user would like to report a few obstacles in the UI.

• During the setup, you have to choose networks. Checkboxes would be ideal for that, since you toggle them on and off, exactly as needed here. However, buttons are used instead, making it impossible for me to see what is toggled on or off.
• Same applies in some other phases in the setup as well.
• In the main UI, most of the buttons aren't labelled at all. Some have a description below them, but this is not clear when navigating the UI with tab, since interactive HTML elements should have associated labels.
• In some points, hover-elements are used. Please replace them by their semantic HTML equivalents.
• The button to copy the public address should get the label "copied" only after it was pressed, however I see this label right when entering the UI. This is not what it meant to be, because it isn't copied before I click the button.
• As a summary: Please keep to HTML standards, and - but only - where necessary aria-attributes can be used if native HTML isn't suitable for the given use case. I'm looking forward to seeing an accessible cryptocurrency wallet in the future!

[staticGuru]

@fcnjd and @armaniferrante can you assign this ticket to me? I will start working on it.

[fcnjd]

Hello, I'm glad to hear that, very often reactions on this are different. I don't know if I have the permission to assign people here, but I'll try it with the command, hope it works. /assign @staticGuru

[armaniferrante]

Assigned @staticGuru!

[trucy]

@fcnjd Thanks for letting us know about the issues you had and for your helpful suggestions. We would love to improve the current state of accessibility of the app, and some devs have been thinking about adding a11y eslint rules we can turn on. Will think about some of this on the design side too, in the meantime thank you @staticGuru 🙏