[4.0] Back-end mainmenu Accessibility

[armenos]

Back-end mainmenu Accessibility Joomla! 4.0.0-dev analyses on 20 March 2017

Think about sighted keyboard user, blind screen reader users and screen enlarger with low vision

Description of the issues: (WCAG 2.0 Level A and Level AA)

There are some issues that I will mention through eachother and they have somehow to do with each other. But those are not all a real WCAG 2.0 AA issues, some are and some are just overkill in the code.
• colour contrast for focus
• keyboard accessibility: visual activating the menu by keyboard (ensure hidden submenus are accessible)
• tab order (too much code)
• semantic html (not real problem, let’s make it better)
• skip navigation (not present)

Possible simplified solution

Colour contrast for focus and keyboard accessibility:
(mouse hover focus, keyboard focus, programmatic focus)
add css :hover, :active and :focus
• a:hover (for mouse users)
• a:focus (for keyboard users)
• a:active (use this to provide a style for the moment when the link is activated)

a:focus, a:hover, a:active { outline: 2px dotted; }
a:focus, a:hover, a:active { display: block; padding: 4px; border: 1px solid blue; border-radius: 5px; outline: none; }

if those colours are used for focus then is ok: foreground color:#59daff, background color:#0c1a28

Tab order: Delete tabindex attribute from menu lists: If the natural tab order is already logical, remove the tabindex. Otherwise, consider restructuring the page so that tabindex is not needed. If tabindex is maintained, ensure that the resulting navigation is logical and complete.

It will be nice if it will be possible to navigate not only with tab-key, but also with arrow keys, be possible to select by spacebar, enter. Some related information can be find here: https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#tabpanel
http://webaim.org/techniques/keyboard/
I’ve found a demo here: http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Tabs/ARIA%20Tabs%20(Internal%20Content)/demo.htm

Semantic html: there is no real a problem in here, but it can be done better.
Add

to the Main Menu
HTML5:
ARIA role: role=”navigation”

Skip navigation: Provide a Way to Skip Past the Main Menu, this is already implemented in Joomla 3.6.5, re-use the idea/code. @brianteeman you have seen this before: joomla/accessibility#9
Information about this issue:
• (SC 1.4.3) Contrast Minimum https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
• (SC 2.1.1) Keyboard https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/keyboard-operation-keyboard-operable.html
• (SC 2.4.1) Bypass Blocks https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-skip.html
• (SC 2.4.3) Focus Order https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-focus-order.html
• (SC 2.4.5) Multiple Ways https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-mult-loc.html (will be nice, something like sitemap)
• (SC 2.4.7) Focus Visible https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

[brianteeman]

All sounds good to me.
I would also add that we should consider adding an underline for all a elements to avoid using colour alone to convey a meaning
https://fuzzbomb.github.io/nwdug-a11y-2016-05-10/#/19

[armenos]

@brianteeman The issue that you have mentioned about use of colour has only to do with those links like you mentioned in ACL issue #14764. It’s correct what you are saying about that part. I have just looked to that part and indeed it will be better to underline those links.

[chmst]

Hi, my I comment here? I have an issue concerning the Backend Template: the sidebar which reacts on hover.
I' not sure which recommendation in WCAG 2.0 fits this point. It is real life ...
I have lots of handicaped people
in my club who have motoric disabilities. They tremble or move the mouse slowly or jerkily, they have spasms - or use a headmouse or a tonguemouse. This works (not always easy but they are used to try and retry) with big boostrap buttons. But I am sure that no one will be able to catch a menu item in this sidebar when he or she must scroll down in the menu.

In J!3.x the sidebar has a handle to collapse or expand the sidebar. This button was too small - but it was a solution.

[armenos]

Hello Christianne, thank you for your comment on this issue
Like you mentioned you are talking about a motor disability and from WCAG there is no direct solution for this. We can only take in consideration to make the back-end accessible for keyboard users.
The well known assistive technologies are:

• Alternative keyboards (possibly with large spaces between keys, or keyboards designed for only one hand, or other specialized devices)
• Trackball mouse or other alternative mouse devices
• Head wand (a stick attached to a helmet or headband, allowing the user to type with head movements)
• Mouth stick
• Eye-tracking technologies
• Puff and sip devices
• Single switch devices
• Speech recognition software

And input design considerations are: Keyboard considerations:

1. All content must be keyboard-accessible
2. Tab order must be logical
3. Headings should be used to create a logical outline of the page, to allow for quick navigation to page sections

I think this issue will cover most of it, but if you have a better idea to make it more accessible for motor disabled people. You should make a new issue with a comment on UX design for [4.0] Atum - Backend Template

[brianteeman]

I am closing this as it has been addressed here joomla/40-backend-template#365