[a11y] Provide efficient navigation on the Backend page for keyboard users

[zwiastunsw]

Joomla backend pages are composed of many objects between which the administrator should easily navigate. If the administrator uses the mouse, it is easy. But if he uses only the keyboard e.g. a blind user, he faces great difficulties.

To efficiently navigate on the Backend pages, a keyboard user needs to:

• a clear, easily perceivable structure of the pages
• markings for major page areas - landmarks and other important sets of objects (e.g. quickicon, toolbar, filters)
• understandable names of each element of the page structure
• menu allowing access to the main areas of the page

To achieve these goals, we have already done a lot, but not everything.

Marks of the main areas of the page Currently in the Atum template, only two landmarks are marked using HTML5 tags:

• banner (using HTML5 tag: header)
• navigation (using HTML5 tag: nav in Admin menu)

The main workspace is not marked with the HTML5 tag: main (it is marked using the div tag with id="j-main-container").

The toolbar is marked (role="toolbar" and "label="Toolbar"), but there is no mechanism to jump or to skip it quickly. I think that the area with the toolbar should be treated as an area supplementing the main content. If yes, it should be covered by the section tag with the role="complementary" or by the aside tag which has a core role="complementary".

Another toolbar - the filter bar (Search, Table Options) is marked (role="toolbar"), but the blind person does not know what tools it has here. In my opinion, the correct role for this group of options is 'search'.

The details section e.g. on the New/Edit Article page (Status, Category, Featured, Access, Tag, Version Note), is not grouped into a single larger area and cannot be quickly skipped. Perhaps it would be appropriate to use role="contentinfo" here.

Understandable names - headings or labels Each area should have a concise, clear, understandable title - a heading or label. Headers and labels need not be visible on the screen. They may only be visible to users of screen readers. In my opinion, it would be best to use headings consistently (hidden headers). When a label is needed then the aria-labelledby attribute can be used to indicate the heading.

This solution would provide screen reader users with an alternative way to navigate: through the headings.

Special menu If we describe the landmark roles of these areas well, users of screen readers will receive a very good navigation tool. But keyboard users who see and cannot use the mouse will still find it difficult to navigate.

That is why a special solution, a new navigation mechanism, is needed. There is a great example of this. It was discovered by @brianteeman (thanks!). This is a script https://github.com/paypal/skipto.

We could implement this script for Joomla backend. Or design our own module.

More info See: https://www.w3.org/WAI/tutorials/page-structure/

[dgrammatiko]

@zwiastunsw maybe this https://github.com/joomla/40-backend-template/compare/master...dgrammatiko:html5-please?expand=1 is helpful then

[zwiastunsw]

@dgrammatiko : That is what I think, too. This special menu should be the first item in this mod_header.

[brianteeman]

Regarding the labelling of the toolbar as complimentary

My understanding was that complimentary was for an area that supports the main content, but are separate and meaningful on their own. So in this case I dont think it is the correct area for the toolbar.

My understanding of a complimentary area would be something like related articles

[brianteeman]

I am guessing that either menubar or toolbar would be the correct roles https://www.w3.org/WAI/PF/aria/roles#menubar

[zwiastunsw]

Unfortunately, menubar and toolbar are not regions of the page intended as navigational landmarks. Screen readers will not place them in a set of landmarks. If the section designation with the toolbar using role="complementary" is bad, we can use role="region" and describe the function using the label/heading. According to specifications "Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation."

PS Of course, the toolbar should have a role="toolbar".

[brianteeman]

https://www.scottohara.me/blog/2018/03/03/landmarks.html

[frogydiak]

May I ask if you guys have data on how much of web's 20% that uses Joomla is using a keyboard in maintaining their Joomla website? Are there at least 30% of Joomla users requesting that Joomla backend has to be keyboard friendly? Or 30% of Joomla users required the backend template to avoid scrolling and that's why the level 2 submenu items has to be what it is? Someone told me the reason why it has to popup is because scrolling is bad and has to be avoided. Seriously?

[micker]

If we want à accessible Joomla administration we need to have a good keyboard expérience.... Joomla isnt only for valid person he need to good for vocal browser keyboard user and user how use zoom navigation.... Wcag 2.0

[brianteeman]

even if there is only 0.000001% who use a keyboard it is the right thing to do

[frogydiak]

ok it is the right thing to do, i see. priorities, priorities!