enhance twitchat accessibility

[yplassiard]

Although this interface looks very promising, it lacks some features to be really usable by people with disabilities, and especially blind people using screen reader. Here is a list of issues I found regarding this topic:

• All buttons should be labelled with what they open/do (settings for the settings button for example)
• • Within settings, there is no way to know if a box (a feature) is enabled or not: Either use a html checkbox to represent the checkbox, or, if that's not possible, you may add a "disabled" or "enabled" text alongside the feature's title, so that the information is rendered.
• • When a chat message arrives, could be nice to use a aria-live region to read it. A way to do this is using a <p role="alert"></p> and when an event occurs (such as a chat message), adds the corresponding message within this tag for about a few seconds to let the screen reader read it. after the message is read, the <P> tag can be reset to an empty content.

I'll try to see if I can create one/more PRs to enhance this. If so, they will be marked as "a11y" as it concerns accessibility.

[Durss]

Thank you so much for your feedbacks ! I have no accessibility knowledges, I really appreciateyou take time to share some ! I'll definitely try to solve these problems !

[Durss]

Just to make sure i do things right, for your first point "all buttons should be labeled", does an "aria-label" attribute would do the job ?

Also, is it enough if a button is labeled this way (supposing the label is explicite enough of course) :

<button>button label</button>

Or should i also add an aria-label with it ?

[yplassiard]

Sorry for getting back to you with such delay! Whenever possible, using an alternate text such the one you mentionned within the button tag is a good idea.