Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 13, 2021 at 6:44 pm #1324802
    DanielKG

    Hello @Yigit,

    You mentioned in a comment that Enfold has added keyboard navigation feature to dropdown menus for accessibility. I have tried it on a site updated to the latest version and it is not working as it should.

    I have to create a new site for a client and their site needs to be Accessible and AODA compliant. I need to make sure that keyboard navigation and accessibility in dropdown menus work in this site before I can buy another Enfold license. I don’t want to purchase the theme, start the project and find out that keyboard accessibility doesn’t work. The user should be able to press the tab key to go throughout the menu, access the drop down, go through it, and go to the next menu item while the drop down closes.

    Thank you. Looking forward for your response

    October 14, 2021 at 4:04 pm #1324964
    Yigit

    Hey Daniel,

    Thanks for contacting us!

    I installed the latest dev version of the theme but had to edit your child theme style.css file and change template name to “enfold”. Please test tab navigation.

    I also installed but not activated “One Click Accessibility” plugin which should help with accessibility requirements.

    Please review your website and re-install Enfold 4.8.6.5 if you like :)

    Best regards,
    Yigit

    October 15, 2021 at 3:58 pm #1325148
    DanielKG

    Hey @Yigit,

    Thank you for looking into this. It is working with some funny things happening in between but it is a move in the right direction. I feel more confident to in purchasing the theme again for future project. Hopefully the new version is release soon.

    When do you think that version will be out/released?

    Thanks again.

    October 15, 2021 at 4:05 pm #1325151
    Yigit

    Hey,

    Could you please elaborate on the funny things that are happening so we can report them to our devs? :)

    Regarding the release date, we do not have an ETA yet but I am guessing in less than a month. We will announce it on the forum sidebar when we have an ETA.

    Regards,
    Yigit

    October 19, 2021 at 12:06 am #1325477
    DanielKG

    Hey @Yigit,

    Sorry for the late response, here is what is happening that I don’t see happening in other themes and sites that are keyboard accessible…

    When you tab throughout the menus on a site, the link is mark with an a:focus, and it needs a border, colour, etc to comply, when you do it right know the border makes the menu/text shift, so every time you hit the tab to go to the next menu link, the text drops down.

    I’m glad you guys are finally looking into keyboard accessibility and compliance as that is the only thing this theme is missing. I really hope the new version comes out soon so I can purchase a license as now every site has to be and meet WCAG 2.1 AA Accessibility.

    Thanks again.

    October 19, 2021 at 4:15 am #1325501
    Ismael

    Hi,

    When you tab throughout the menus on a site, the link is mark with an a:focus, and it needs a border, colour, etc to comply.

    Would you mind providing a reference to this requirement? Focused elements or links in the theme are set to have no borders or outlines by default.

    a:hover, a:focus, a:visited { outline: 0; text-decoration: underline;}

    Did you add this css code? 

    a:focus {
    color: #ef4237 !important;
    border: 1px solid;
    border-color: #BAE498;
    box-sizing: content-box;
}

    The text shifts on focus because the border takes some of the space around the menu item. Instead of applying borders, try to apply an outline to prevent the menu items from shifting. 

    .responsive #top a:focus {
    color: #ef4237 !important;
    outline: 1px #BAE498 solid;
    outline-offset: -1px;
}

    Best regards,
    Ismael

    October 19, 2021 at 8:52 pm #1325599
    DanielKG

    Hello Ismael,

    Thank you for providing that solution. It works!

    Please find below some links related to focus elements.

    Here are some references:
    https://kma.global/wp-content/uploads/2019/07/WCAG_2.1_Checklist.pdf
    https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
    https://usability.yale.edu/web-accessibility/articles/links
    https://dockyard.com/blog/2020/04/28/designing-for-accessibility-focus-states

    October 20, 2021 at 4:09 am #1325651
    Ismael

    Hi,

    Glad to know that the css works. Thank you for the links. Please feel free to open another thread if you need anything else. We will close this one for now.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Keyboard Accessibility – Drop down menus’ is closed to new replies.