Redmine

Overview-page of a project or view-page of an issue: Sometimes there is an actions-button calling a menu. The button is visually recognizable by three dots ("..."). For example in the overview-page of a project there are the actions "new subproject", "close" and "configuration" in the menu, in the view mode of an issue there are the actions "copy link" and "delete" in this menu. There are two defects about this button:

1. It is not keyboard-accessible. Reason: In HTML it is a <span>. Instead please use a <button> (or <a> with href-attribute), so that you can focus it by tab key and activate it by enter.
2. For screenreader users it is not obvious, when the menu is expanded and when collapsed. Please use an attribute aria-expanded on the <button> or <a href> and set the values according to the expanding-state by JavaScript: aria-expanded="true" while the menu is expanded and else aria-expanded="false".

Both defects are also applicable on the issues view, expandable elements "filters" and "options". The difference is that in number 1 the button is not a <span>, but a <legend>. You could set a <button> before the <fieldset> and put the click event on the <button>. Number 2 is the same, aria-expanded is missing.

I work with German Centre for Accessible Reading and in the public sector we need to use accessible software.