Peertube: Make the User Interface More Accessible to screen reader Users

[mcb2003]

Background

I'm almost completely blind and am very enthusiastic about the PeerTube project.

My Issue

I use a screen reader to navigate my way around a computer, including on PeerTube. And while 90% of the PeerTube site is fully accessible, there are a few areas in which it isn't. these are:

• The like and dislike buttons are not reported as buttons. This means I Don't know if they're selected or not. Toggle buttons or even checkboxes would let me read the state of the buttons, although I don't know how you could make them fit into the UI's appearance.
• The share button is not reported as a button either, only as "clickable". However, some screen readers do not inform the user of this, so it appears as just a piece of text. Again, a button would be better, or even a link.
• The same goes for the "get help" buttons around the UI: they are not reported as buttons.
• checkboxes such as the "enable comments" checkbox are reported only as text, meaning I don't know if it is ticked or not. Again, this can be solved by using a standard HTML checkbox or toggle button, but how you would make this fit with the rest of the code and/or appearance I don't know.

I've made a video that demonstrates these issues, so that may be helpful as well.

Thanks
Mikey

[Chocobozzz]

Hi @mcb2003, thanks for the explanations and the video, they are very useful. I'll try to fix your issues.

[rezonant]

I am also willing to help on accessibility :-D

[Chocobozzz]

@rezonant you can take this issue if you want :)

[mcb2003]

Something else I thought about: it would be nice if you could add alt text to the video thumbnails, possibly the title of the video, as right now they are a string of garbled letters and numbers when you read them with a screen reader.

[Chocobozzz]

@mcb2003 Could we use aria-labelledby attribute instead of alt? Because the alt attribute is displayed when loading the thumbnails, which is quite embarrassing for non blind users.

[Chocobozzz]

I tried to improve the accessibility in https://github.com/Chocobozzz/PeerTube/commit/0f7fedc39857ebc0eb29182c1588a92b9adfb75a

@mcb2003 Could you check if it solves your issues on https://peertube2.cpy.re? Thanks.

[mcb2003]

@Chocobozzz What I'm seeing currently looks great! The "Get Help" Buttons are now fully accessible, toggled state and all and the share button and menu just next to that are also now buttons. I've been testing this on linux and on my iPad so far, so I'll let you know what it's like on macOS when I can.

Thanks very much.

[mcb2003]

Also, @Chocobozzz, aria-labelledby would be perfectly fine. I've just looked it up (I'm not that familiar with aria in general) and it seems like a perfectly good solution that is specifically designed for this purpose.

[Chocobozzz]

Thanks, should be fixed by https://github.com/Chocobozzz/PeerTube/commit/c487d3033cad9c5e0f85ae49ed3d2a7b6c2711d8