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

    THANKS A LOT

    • This topic was modified 8 years, 4 months ago by nexxraller.
    #659747

    Hi nexxraller,

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

    Regards,
    Rikard

    #660359

    Yes :)

    • This reply was modified 8 years, 4 months ago by nexxraller.
    #660443

    Hey!

    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,
    Basilis

    #660458

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

    Greets,
    André

    #661419

    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?

    Thanks,
    Rikard

    #662923

    Hey, I found this:

    http://webaim.org/techniques/keyboard/

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

    #664389

    Hi,

    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,
    Ismael

    #690328

    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?

    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.
    #692049

    Hi,

    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,
    Ismael

    #692379

    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.

    #694129

    Hi,

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

    Best regards,
    Ismael

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