Twitter Bootstrap Question posted in

How to implement keyboard support for a bootstrap select menu in IE for blind users – Twitter bootstrap

I currently have a system that uses bootstrap and an option to select the menu. Blind users can not us it, because the options are not displayed.

Is there some JavaScript solution to fix the problem? I need the solution to work via keyboard input only, and work in IE.

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul>
    <li class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown Example
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">


            <li style="width:450px">
                <div class="col-sm-3">
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                    <br />
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <a href="#">
                        Link    
                    </a>
                    <a href="#">
                        Link
                    </a>
                    <a href="#">
                        Link
                    </a>
                </div>
                <div class="col-sm-3">
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                    <br />
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown Example
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">


            <li style="width:450px">
                <div class="col-sm-3">
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                    <br />
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <a href="#">
                        Link
                    </a>
                    <a href="#">
                        Link
                    </a>
                    <a href="#">
                        Link
                    </a>
                </div>
                <div class="col-sm-3">
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                    <br />
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
            </li>
        </ul>
    </li>
</ul>

Demo JSFiddle

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The problem here is that you have a role="menu" on those dropdowns, but these are not menus - ARIA menus can only contain menu items, checkbox menu items, radio button menu items and submenus. https://www.w3.org/TR/wai-aria/roles#menu

    Remove the role="menu" and it should work correctly.

    Github bootstrap - Answer

    Remove the role="menu" and it should work correctly.

  2. 0

    Keyboard users can toggle the dropdown using the spacebar or enter key on the button. You could attach an aria-expanded attribute on the button and toggle it true/false depending on if the menu is visible or not. If you’re interested in learning about how users navigate through a page using only the keyboard, Webaim has a great guide here.

    Login or Signup to reply.
  3. 0

    Whether you use role='menu' or aria-expanded will have absolutely no affect on the behavior of your code. The ARIA properties are strictly for semantic purposes. All they do is give a hint to the assistive technology (such as a screen reader) as to the purpose and intent of the objects on your page. See https://www.w3.org/TR/aria-in-html/#role-not

    Your code is not working based solely on your javascript. I am unable to use your fiddle example using just a keyboard. A screen reader is not involved.

    I can hit space on the button to expand/collapse the menu items so that part is ok. And I can tab through the menu items so that’s ok too. But I cannot use the arrow keys to select items in the <select>. As soon as I hit down arrow on a <select> component, the value does indeed change but then my focus is moved to the link.

    If I try alt+downarrow, which should expand the <select>, it doesn’t expand and then it moves my focus to the link.

    So the accessibility of this example is very bad.

    As far as how to fix it, there isn’t enough code posted to see where the problem is. The fiddle example only shows a jquery.on().

    This should be easy to fix. Using native html without any third party libraries such as bootstrap, you can get a demo of this working very easily and it works great with a keyboard (and a screen reader).

    I can help further if more javascript is posted, but in the meantime, I’d suggest you focus your debugging in that part of your code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search