Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #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 support


    • This topic was modified 7 years, 5 months ago by nexxraller.

    Hi nexxraller,

    Could you provide us with a link to the site in question so that we can take a closer look please?



    Yes :)

    • This reply was modified 7 years, 5 months ago by nexxraller.


    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,


    ok…can you tell me what I need to do to get it more Keyboard accessible?



    Hi 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?



    Hey, I found this:

    I think this is a good description for what I need :)



    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,


    I 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?

    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 7 years, 2 months ago by galpinr.


    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()

    .. replace it with:

    					currentLink.bind('mouseenter focus', function()

    Best regards,


    That 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.



    Yes, unfortunately, that will have to do for now because somehow the “focusout” event is not working.

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.