Many buttons are unlabeled or improperly labeled for blind people using screen readers

[lilmike]

🚩 Describe the bug

Hiya, I am a blind user who is trying to find a simple vtt. However, when I go to most any page that contains vtt related controls, many buttons are unlabeled. This means that I cannot easily identify what the buttons do without clicking them. The main buttons that are labeled are the buttons on the top of the game page, for example the ones labeled "yay", "whoops", "story deck"... etc. Clicking most buttons opens other pages or dialogues that have lots more unlabeled buttons in them. The rule to follow is, don't use just a picture, icon, or unicode symbol, emoji, etc, it is badly labeled. There needs to be a tooltip I think it is called, something that labels the button so the screen reader software we use can tell us, in words, what the button does. I'd be willing to test out the app to help you discover any lingering unlabeled buttons once an effort has been put into adding them, and beta test, etc. Just let me know.

🔢 Steps to reproduce

1. Download or install a screen reader for your OS of choice: orca for linux, NVDA for windows, voice over (built in) for iOS or mac, talkback for android.
2. Open fari.app, and use your arrows or the tab key to move around the page.
3. Tab or arrow to "play now".
4. Tab or arrow around the page. Notice that the top part, story deck, story dice, oracle, etc, are labeled. Noteable exceptions are the button that shows the total of rolled dice (until rolled, and even then has a problematica label) and the buttons related to rolling and changing types of dice.
5. Keep moving forward, and notice that there is a large block of buttons and other controls, including some sort of spin button that have no label at all, the spin button just says "3".
6. Notice also, that if you press enter or space on the story dice, story deck, etc, the dialogue that opens is absolutely chalk full of unlabeled buttons (probably because they're icons or pictures).

🟢 Expected behavior

You should hear a short description of what each button does. For example, "rolled +2" or "set up dice to roll". Also descriptions of any icons, pictures, etc.

🔴 Actual behavior

Some buttons are total blank, and say things such as "button" or something similarly ambiguous. Others have words attached, but they don't tell what they really do like "yay" or "pause". (What happens when you press yay, and what are you pausing when clicking pause, etc).

💅 Screenshots

N/A, this is all in the descriptions screen readers give (or not)...

🖥 Desktop or Smartphone

• OS: [e.g. iOS]: Any, I use void linux.
• Browser: [e.g. chrome, safari]: Any, I use brave.
• Device: [e.g. iPhone6]: Any, I use a laptop (asus vivobook).

📄 Additional context

As mentioned, I'd be willing to help out as far as testing goes, etc. I plan to run some fate rpgs with some other blind people so I can get some notes from them as well. There are also many locations you can find for web accessibility guidelines, WCAG 2.0 is a good place to start.

[lilmike]

Upon further investigation, it seems that there are also check boxes, combo boxes, edit fields, and more that are also unlabeled -- just to say it's not limited to buttons. For example, I looked at the fate core template for the character sheet: Tabbing through it, rather than arrowing through, had many spaces that didn't say what they did -- heck, there were even spaces that I figured out you could type in that didn't tell me they were an edit field at all! So yeah, it looks to be a more widespread issue, possibly an issue with any frontend framework you may be using, but I can't be sure at this moment. -Michael.

[RPDeshaies]

This is a very good point. Accessibility is very important, and I agree that the app right now isn't very accessible. I'll see what I can do!

Efforts will be tracked here https://fari.canny.io/feature-requests/p/make-the-app-more-accessible