Epic #89595: Improve accessibility of backend
Pagetree Toolbar Focus Styles and Labels
Create new pages, Filter and Reload buttons have missing focus style¶
When you navigate with your keyboard to an interactive element, you should see a visible focus style. This success criterion helps to know which element has the keyboard focus. The Create new pages, Filter and Reload buttons don't change its style, when it receives focus.
Create new pages, Filter and Reload buttons have no descriptive text¶
When navigating to a button, a descriptive text must be presented to screen reader users to indicate the function of the button.
The Create new pages, Filter and Reload buttons use only the title attribute. Many user agents do not expose the title in an accessible manner as required by the specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
Updated by Riccardo De Contardi over 2 years ago
- File schermata1.png schermata1.png added
- File schermata2.png schermata2.png added
- File schermata3.png schermata3.png added
- File schermata4.png schermata4.png added
Some screenshots taken from the latest master (11.3.0-dev):
1) Focus style on filter (search):¶
2)Focus style on reload button¶
3) Focus style on a selected page¶
4) Focus style on hide pagetree panel button¶
- the "hide pagetree panel button" is the last element that can be selected with keyboard (tab) (it comes after the whole pagetree) . Maybe it's by design?
- I could be wrong, but it seems that the "create new page" icons cannot be reached by keyboard navigation;
- The context menu on page cannot be opened by keyboard (but I could be wrong, I have not tested with MacOS accessibility features turned on)
- the filter/search input has a
placeholder attribute but no
title attribute (problematic)
- the filter/search input has an hidden "close" button with no accessible text; its state does not update when switching between visible/invisibile (problematic)
- the reload icon is a
title attribute so it seems ok
- the hide pagetree panel button is a
title attribute; looks fine but
1) it has a
role="button" attribute that looks redundant. Opinions?
2) I see that there is also an invisible "show navigation" twin button; the button has a
role="button" attribute,too. It becomes visible when the pagetree panel is collapsed (and vice versa with the other one); the state of the
buttons does not update