search

joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.77k stars 3.65k forks source link

[4.0] Back-end mainmenu Accessibility #14812

Closed armenos closed 6 years ago

armenos commented 7 years ago

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

brianteeman commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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:

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 commented 6 years ago

I am closing this as it has been addressed here https://github.com/joomla/40-backend-template/issues/365