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-projects/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
joomla-cms-bot
- 
franz-wohlkoenig
- 
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