Welcome, Guest
Username: Password: Remember me

TOPIC: Accessibility in your theme / template - How to

Accessibility in your theme / template - How to 14 May 2020 13:04 #56449

ced1870 wrote: I have put a website here
wcag.ced1870.fr/

so what's next now ?


I looked at your test site. Using Tab (which is how I believe keyboard users navigate) does not select MaxiMenu at all. The first Tab selects the "logo", then there are 3 more Tab presses which don't appear to select anything (I tried pressing Enter during these Tab presses but nothing happened so I'm not sure what's in focus at those times). On the 4th press, the Home on the side menu comes into focus and is selectable.

Due to accessibility issues, I am now trying very hard to avoid menus with any sort of dropdown, because, as you said earlier, these are problematic to use without a mouse.

If MM would allow tabbing through each item, including dropdowns, that would work, though it would be tedious for keyboard users when there was a big menu. Alternatively, adding keyboard shortcuts to menu items (at least the top level ones) would work too and cut down on tabbing. So, say there's a couple of items with a dropdown, assign the first a keyboard shortcut A and the second one B. When a user uses the keyboard shortcut A the dropdown appears and the user is able to tab through it.

I agree this whole thing is not 100% simple, however it isn't going away either. And there are lots of disabled people surfing the net who want to use our sites, so we really need to ensure they can. I don't have anything against that, but I DO have issue with the evil people who are setting out deliberately to find site owners to sue.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 13:04 #56450

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
ok, this is the focus state, this border is needed for the accessibility and it can be different according to browser's choice
you can update it like this
a:focus {
    outline: thin dotted red;
}
Joomlack Webmaster and Developer
The following user(s) said Thank You: trogladyte

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 13:14 #56451

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
ok, please check now I have added the focus on top items

adding keyboard shortcuts to menu items

this is possible using the access key option in the maximenu settings for each menu item (see doc)

I will now work on the submenu highlight
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 14:06 #56454

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
please test, I have worked on the tab concept
It seems to work, for a small dropdown in this case
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 14:52 #56457

Perfect! If that HOME item had a keyboard shortcut, would selecting that open the dropdown and allow tabbing just like this did? If so, then that deals with accessibility as far as I read it.

Great Job Ced!
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 14:58 #56458

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
thanks
I will check for the access key ...
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 15:02 #56459

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
ok, I have added the access key "A" on the home item
but ... using the access key it looks like a click, then it redirects the page

then I removed it from the home and created an external url "#" with a submenu and the access key "A"
it seems to work like this

let me know your thoughts
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 15:03 #56460

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
PS : I have another question for you : there are the aria-tags (hidden, has-popup, etc) that are also part of the accessibility, right ?
but I have into an article that this is not really needed for a menu, what do you think ?
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 15:04 #56462

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23051
  • Karma: 427
  • Thank you received: 2908
PPS : adding a 2nd submenu seems to loose the feature to close the submenu when going outside the menu ...
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 15:07 #56463

ced1870 wrote: PS : I have another question for you : there are the aria-tags (hidden, has-popup, etc) that are also part of the accessibility, right ?
but I have into an article that this is not really needed for a menu, what do you think ?


Aria-tags are definitely part of accessibility. If you follow one of those links I posted in my initial post you can read about them. What I read during my study is that they didn't apply too much to what I need to deal with. Seemed to me to be more for developers to handle. But then I may be wrong!! LOL!
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Time to create page: 0.257 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 356 guests and no members online