accessibility improvements for the Web-UI

[christopherpross]

Is your feature request related to a problem? Please describe.

I am blind and would like to be able to use the app without having to constantly guess what triggers this or that element. Unfortunately, there are many elements in the VUE app that do not contain a description for a blind user, what they specifically trigger / control. A simple example is the random button in the search-component: <b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')" @click="openRandom()"> <i class="fas fa-dice-five" style="font-size: 1.5em"></i> </b-button>

Describe the solution you'd like

One way to fix this would be to add aria-attributes to the corresponding elements, a good reference for this can be found here . For example, to make the above button recognizable to a blind person what this button does, you could use Aria-Description or Aria-Label.

Describe alternatives you've considered

I don't know how all the elements are implemented exactly. If you have a class, where many derive from, can certainly be found a solution that solves many problems at once. I can not say this exactly, with Vue I know too little and would have to learn there first.

Additional context

No response

[vabene1111]

Thank you for your feedback. I always thought this was only required on images as screen readers would read the text of a button.

But I certainly want tandoor to be accessible so I would love to work together with you to make this happen.

How do you and if you know blind people in general prefer the labels, rather short so there is not so much text to read out (for your example it would be "random recipe") or a bit more descriptive like "select a random recipe and open it" or is the latter something more suited for the description field.

Is there anything else that is important for you aside from buttons and nav elements?

[christopherpross]

Hello! very nice to read that you want to work on it. I could also test versions and so on, accessibility is quite complex. I've been working on the demo so far, when I manage to install my own version on my synology I'll definitely have more to say. But in advance: With the example, the random button, it can be illustrated very well how aria-label and aria-description can be used. As main text, so aria-label I would recommend "Random" or "Random recipe". Then you can use aria-description to explain even more e.g. "Gets a random recipe and opens it" or something like that. The screen reader will first read aria-label and then with a delay, if no other activity is running aria-description. In the ingredient list there seems to be a check box next to each ingredient that does something, no idea exactly, you should know that. :-) The screenreader can't see that this is a checkbox, so aria-role makes sense. Other problems I might find when I work more with Tandoor. You are also absolutely right that alternate-texts are important for images. with the attrebut alt you can set them quite easily.

I hope I could give you some useful information, if you have any questions, you can always come to me.

[vabene1111]

Thank you very much, this explains a lot. Now this whole thing is just a matter of taking the time to properly implement those attributes across the application.