Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Accessibility settings for select-box chain menu with collapsible content divs

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #255803
    Krish1980
    Participant

    Hello All,

    I am trying to create a select-box chain-menu component that shows content divs based on a combination of the selection.

    Codepen link

    For the desktop view, I’ve used a jquery plugin called nice-select which converts a select-box to a ul>li drop-down list for easy styling(custom style requirement). For mobiles, I’m relying on the native select-box since it is much better in the mobile view.

    For desktop view, users with vision would use the ul>li based select-box – it is also navigable via keyboard. Users relying on screen readers can rely on the native select-box which has only been hidden from view using positioning and height 1. The ul>li based select-box has been hidden for screen-readers using aria-hidden=true. The collapsible content divs have an attribute of aria-expanded=false which would become true when revealed.

    Question1:

    How do I make the select-box non-tab-able for keyboard users with vision while at the same time be accessible for screen readers? Or, is my implementation perfectly alright since it involves only one invisible extra tab action?

    Question2:

    What other steps can/should be taken to make the component perfectly, or at least passably accessible?
    It would be great if I can get additional feedback on how this could be improved, accessibility-wise and if usability bugs can be pointed out. Many thanks in advance.

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.