GUI accessibility with screen reader

[Sebseb01]

Hello,

Is your feature request related to a problem? Please describe. I can't answer to a poll, beacause i'm blind.

Describe the solution you'd like Maybe it's possible to activate a special gui when the global "accessibility" setting is enable (and for anonymous a buton on page)

Describe alternatives you've considered Framadate or doodle have "checkbox" interface with label for each option

Additional context I'm using the last stable relase on NC20. I have firefox and Orca on debian.

[dartcafe]

Accessability is an open issue. We have to think about possible solutions.

[stefan123t]

@Sebseb01, I know from other projects that making a web application accessible is a lot of work, which requires intensive testing by someone who has e.g a screenreader or other assistive technology enabled. Would you be willing to test once changes have been made ?

Can you tell us some more about the problems you are facing ? Are you creating or responding to a Poll ? Are you using the list view or the table view of the Polls ? Is there anything that is read out from your screen reader ? Do you have NVDA installed under Linux / Debian ? How is Orca helping you, I though it is a character recognition tool ? How about accessibility of the other Nextcloud apps, is this limited to the Polls app ?

@dartcafe Is there a Nextcloud accessibility Guide / Standard available ?

We should follow semantic HTML rules and use the defined elements if possible (e.g. headings h1, h2, h3, etc., form fields, table for tables) and apply alternative "screen-reader-only" CSS styled elements in case we are making use of icons without labels. I just checked the Table view for the polls app and it is built by a table of divs.

A table of divs https://www.accessibility-developer-guide.com/examples/tables/table-of-divs-experiment/

We should define role="columnheader" in order for screenreaders like NVDA, JAWS, etc. to read them when the user is in a cell belonging to that column. Alternatively you can add them to these options as explanative label (using screen-reader-only css class). If that all does not help you can still define aria-label or aria-labelledby elements that can be read to explain your options.

You can enable the Voice Over function in either Google Chrome or on Safari Browser to get some idea of what it would sound like for someone blind.

There are plenty of ARIA checking tools as plugins. One of the easiest might be the one included in Google Lighthouse as it is quite up-to-date with the current ARIA requirements. For a quick overview in the developer view (F12) select the Lighthouse tab > Generate report. Make sure [x] Accessibility is checked.

For example the four buttons in the main polls view have no aria-label attribute:

• Poll informations
• Ranked order
• Switch to table view / Switch to list view
• Toggle sidebar These are only set as tooltip text, but should be repeated as aria-label's to be read by the screenreader. Same is reported for the two
• ... (Ellipsis) > Subscribe to notifications and Copy list of email addresses to clipboard
• Delete votes entry buttons.

But especially and most important IMHO is that the actual vote entries are not made accessible as Button elements. That way they are neither keyboard focusable (can not be reached via Tab) nor are they read by the screenreader. I assume this is the main concern of Sebseb01. I can only select the aforementioned buttons and cycle through them using Tab key.

[rhiaro]

I've just come to +1 this issue - I'm in a group that sends date polls around, and some of the group who need to respond use a screen reader, and are not able to. I appreciate that you've started thinking through this, per the comment above.