CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Entalpia
Entalpia

Reputation: 787

How to label custom list dropdown in a form

I'm currently in the process of developing a website that has to match AA accessibility standards. I have a custom-built dropdown being a part of a form and can't figure out how to label it for screen-readers. Sadly I can't use a native select dropdown (despite being accessible, the website is rather design heavy and it was the best way to apply custom styling to this), so can't use a regular label tag. So far I've used the below, but I believe that it's not the correct approach.

<form>
    (...) other inputs
    <ul class="dropdown" role="listbox" aria-labelledby="location" aria-multiselectable="false" aria-expanded="false" tabindex="0">
        <li class="first" aria-labelledby="location">
            <span>Location</span>
        </li>
        <li tabindex="-1" role="option" aria-selected="false">Location1</li>
        <li tabindex="-1" role="option" aria-selected="false">Location2</li>
        <li tabindex="-1" role="option" aria-selected="false">Location3</li>
    </ul>
</form>

Just to describe the behaviour - this is a regular dropdown with only li.first visible initially (on click/enter all the fields become visible and the value can be chosen). Once an option is picked, aria-selected is set to true and the value is replacing the Location text in span.

Could anyone suggest a better solution for this? My biggest concern at the moment is possibly the incorrect usage of aria-labelledby, but I don't know what should be the right option.

Thanks, E.

Edit: JS + jQuery

$('.dropdown').on('click', function () {
    $(this).toggleClass('opened');
    if ($(this).attr('aria-expanded') === 'false') {
        $(this).attr('aria-expanded', 'true');
    } else {
        $(this).attr('aria-expanded', 'false');
    }
})

$('.dropdown li').on('click', function () {
    if (!$(this).hasClass('first')) {
        var text_drop = $(this).html();
        $(this).parent().find('span').html(text_drop);
        $(this).parent().children().not('.first').attr('aria-selected', 'false')
        $(this).attr('aria-selected', true);
        $('.dropdown').animate({scrollTop: 0}, 200);
    }
});

Upvotes: 0

Views: 1365

Answers (1)

Adam
Adam

Reputation: 18855

The aria-labelledby should refer to the id of an existing element. You have a problem with your label being inside the object itself. Something like the following would make more sense. 

<form>
(...) other inputs
<div id="location" aria-expanded="false" aria-owns="listchoices">Location</div>
<ul class="dropdown" role="listbox" aria-labelledby="location"
     aria-multiselectable="false" tabindex="0">
    <li tabindex="-1" role="option" aria-selected="false">Location1</li>
    <li tabindex="-1" role="option" aria-selected="false">Location2</li>
    <li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>

Without the javascript part, I can't give you more help

Upvotes: 1

Related Questions