Tagged: accessibility, keyboard-navigation
-
AuthorPosts
-
July 11, 2016 at 11:43 am #659172
Hey Kriesi Team,
Many people do not use the mouse and rely on the keyboard to interact with the Website. A client wants his site to be Keyboard accessible.
Unfortunately it doesn´t work that fine with enfold. Do you have tips what to do?
Keyboard accessibility includes:
All functionality that is available by mouse is also available by keyboard
Keyboard focus does not get trapped in any part of the content
Browsers, authoring tools, and other tools provide keyboard supportTHANKS A LOT
- This topic was modified 8 years, 4 months ago by nexxraller.
July 12, 2016 at 11:34 am #659747Hi nexxraller,
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardJuly 13, 2016 at 1:13 pm #660359Yes :)
- This reply was modified 8 years, 4 months ago by nexxraller.
July 13, 2016 at 2:57 pm #660443Hey!
The keyword accessibility is not based on enfold only, but with the elements you add also and how you modify / add them.
You will require to do a lot of work inside the site, so it can work as should.Please do let us know if we can help you with any other way, related to our theme.
Best regards,
BasilisJuly 13, 2016 at 3:13 pm #660458ok…can you tell me what I need to do to get it more Keyboard accessible?
Greets,
AndréJuly 15, 2016 at 4:25 pm #661419Hi André,
Sorry for the late reply. I’m guessing you are referring to for instance when someone uses the tab key on their keyboard. What exactly do you want to happen when that is the case?
Thanks,
RikardJuly 20, 2016 at 12:49 pm #662923Hey, I found this:
http://webaim.org/techniques/keyboard/
I think this is a good description for what I need :)
July 24, 2016 at 4:13 pm #664389Hi,
Targeting the focus state of main menu item should add an indicator when the user navigate with the keyboard. Example:
#top #header_main > .container .main_menu ul:first-child > li > a:focus { text-decoration: underline; }
If you want to apply it on every link elements, use this:
a:focus { text-decoration: underline !important; color: red !important; }
Best regards,
IsmaelSeptember 22, 2016 at 4:24 pm #690328I need help on this issue too. If I can find an answer, I will use Enfold on my next project which has a WCAG 2.0 requirement ACCESSIBILITY requirement. Otherwise I’ll have to find another framework which is WCAG 2.0 compliant.
I am not able to TAB to SUB MENU items. Is there a code modification I can make to fix this?
Example: http://www.infostructures.com/
TAB through the menu until you get to “24 x 7 Help Desk” – the next TAB should open the SUB MENU drop down which has two items in it. It does not. It just skips over it.Please help me out if you can – because I would like to continue using Enfold – but must meet the accessibility requirement.
- This reply was modified 8 years, 1 month ago by galpinr.
September 27, 2016 at 4:42 am #692049Hi,
I’m sorry but the dropdown menu is not accessible with the keyboard unless you modify the js > avia.js file. Look for this code around line 1274:
currentLink.bind('mouseenter', function() { sublist.stop().css({visibility:'visible'}).animate({opacity:1}); });
.. replace it with:
currentLink.bind('mouseenter focus', function() { sublist.stop().css({visibility:'visible'}).animate({opacity:1}); });
Best regards,
IsmaelSeptember 27, 2016 at 7:01 pm #692379That works great! I wish there was a way to close the dropdown when it loses focus. As it is now when you navigate out of the dropdown (with the keyboard) it leaves the dropdown open.
October 1, 2016 at 4:23 am #694129 -
AuthorPosts
- You must be logged in to reply to this topic.