FSWebDevBook / speedscore-dev

This the author's sandbox repo for the SpeedScore personal speedgolf app developed in the book.
0 stars 0 forks source link

Should lone icons be supplemented with text that matches their label? #9

Open anevins12 opened 3 years ago

anevins12 commented 3 years ago

Should points of interaction that use icons alone be supplemented with text in case to improve the understandability of those interactions?

Some buttons rely on the meaning behind icons to convey the purpose of those buttons. While that may be obvious to some users, it will likely be difficult to guess for people using speech assistive technologies.

8f5adc71-2539-45b7-ae81-f397ab5101dc

chundhau commented 3 years ago

@anevins12 I have an aria-label="actions" for the side menu icon and an 'aria-label="Post to Feed"` for the right-hand "+" button. Is this what you mean?

anevins12 commented 3 years ago

Agree with your implementation and that works well for some assistive tech like screen readers. I'm thinking of specifically the assistive tech for sighted users with motor impairments, such as Dragon. People using Dragon speak to the computer and say "Click on X" to interact with things. This is easy when buttons have visible text inside the button, like the "Feed", "Rounds" and "Courses" buttons at the bottom of the page. But when text is not presented visually then they may have to guess what the name of the button is to click on it.

It's not the end of the world still as Dragon users can navigate and use the page via other methods, but still it's nice to help them out with visible labels where possible.

No big deal here though, more of a best practice.

chundhau commented 3 years ago

Ahh, I see what you're saying: I could enhance accessibility for these folks by adding a visible text label to the buttons.