Accessibility review

[xi]

I looked at RDMO from a accessibility perspective and found some issues. For now I just collected all findings in this issue, but feel free to split this up into multiple issues as you see fit.

Please note that I did not do a comprehensive test but rather looked for some of the most common issues.

Missing text alternatives

Many icons do not have a text alternative. I noticed different variations of this:

• No alternative text at all: <button class="btn btn-default"><span class="fa fa-times"></span></button>
• Use of title, which loses out against the icon font in text alternative computation: <a title="a11y-test" class="fa fa-pencil"></a>
• Buttons that are completely inaccessible to both keyboard and non-sighted users: <a tabindex="-1"><i class="fa fa-eraser" aria-hidden="true"></i></a>

In all of this cases I would suggest to add both a title on the button (for sighted users who do not understand the icon) and aria-label on the icon (for non-sighted users). To verify, you can use the "Inspect Accessibility Properties" feature in Firefox.

Button/Link confusion

I found many links that should be buttons, and I think even some buttons that should be link. Basically, if you don't know what to set for href, then you probably want to use a button instead.

Buttons and links can be styled identically, but behave differently. For example, a button can be triggered with the space bar, a link cannot.

Remember to set type="button", because button elements have the type "submit" by default.

Few landmarks

Landmarks allow users to quickly get an overview of the structure of the page and jump to relevant sections. As far as I could find, RDMO currently only has a navigation landmark (header) and a contentinfo landmark (footer). I would recommend to add a main landmark (<main>), a banner landmark (<header>) and some more navigation landmarks (<nav>), e.g. for the progress when answering questions.

Remember to add aria-label to the navigation landmarks so that users know which one is which.

You can check the landmarks by using screen readers or browser extensions such as a11y-outline.

Form semantics for questions

• Questions usually have a label, help text, and an input element. However, they are not semantically grouped. The label must be connected to the input, usually by using the for attribute. It would also be helpful (though less necessary) to link the help text to the input by using aria-describedby. See also https://code.djangoproject.com/ticket/32819.
• The "proceed" button is not actually a submit button, so hitting enter on a form field does not trigger it. That is what I would have expected, but I am not sure if this is intentional or not.
• Radio buttons are not grouped in a <fieldset>. See https://code.djangoproject.com/ticket/32338
• When I can add multiple strings as answers or a question (e.g. keywords), I would expect that hitting enter on one field adds another one and moves focus there.

Color contrast

The colors look good for the most part. The one exception I found is green on white: https://xi.github.io/contrast/#%235cb85c-on-%23fff

Missing focus outlines

When using the tab key to jump from element to element, it is easy to see where focus is for the most part. The only exception I was able to find are the two dropdown toggles in the header. This might be a bootstrap bug though.

Focus Management

• When I proceed to the next question, focus stays on the "proceed" button instead of jumping to the start of the new question.
• When clicking "next" in the interactive tutorial popups, the focus is not moved to the next popup.

Small buttons

Some buttons are extremely small. This is an issue for both people with mobile devices and people with limited fine motor skills.

[jochenklar]

Thanks a lot!

[jochenklar]

This is related to this older issue: #514