RDMO should follow common accessibility guidelines

[jochenklar]

Rationale / Begründung

So far, we did not care much about accessibility. This is not cool we need to improve here.

Affected

Users

Minimal functionality

RDMO follows well established accessibility guidelines. The guidelines we should follow are TBD.

References / Verweise

• This is strongly connected to the modernization of the frontend: Modernize the RDMO frontend #518

[jochenklar]

Web Content Accessibility Guidelines (WCAG) 2.0: https://www.w3.org/Translations/WCAG20-de/

[jochenklar]

Maybe this can be used to check where the problems with RDMO are: https://wave.webaim.org/.

[jochenklar]

I tried the https://wave.webaim.org plugin and fixes a lot of things in #1267.

What I learned:

• <input> without an explicit label need an aria-label attribute, e.g. search bars, but also all question widgets in the interview.
• Empty <th>, e.g. the last "action" column in tables, also need aria-label="Actions"
• Buttons without text, e.g. just an icon, need title (probably better) or an aria-label.
• <label> should not be used without an <input> connected to it (via for and id), better use <p class="mb-5><strong> here.
• Radio buttons and checkboxes should be contained in a <fieldset> which has aria-label/aria-labelledby and aria-description/aria-describedby.
• Icons should have aria-hidden="true".
• Buttons should have type="submit" (in an form) or type="button".
• If buttons have no text (only an icon), they should have title and aria-label.
• <img> needs an alt text (but this I knew before).

[jochenklar]

A lot of this will be part of RDMO 2.3.0, but I keep this open for now. We should add the points above to the docs at one point.

[jochenklar]

Added to 3.0.0 so that we don't forget to check the new interface.