Question

我目前正在开发一个必须符合AA无障碍标准的网站。我有一个定制的下拉列表作为表单的一部分，无法弄清楚如何为屏幕阅读器标记它。遗憾的是，我不能使用本机选择下拉列表（尽管可访问，网站设计很重，并且这是将自定义样式应用于此的最佳方式），因此无法使用常规标签。到目前为止，我已经使用了以下内容，但我认为这不是正确的方法。

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

仅描述行为 - 这是一个常规下拉列表，最初只能看到li.first（点击/输入所有字段变为可见，并且可以选择值）。选择一个选项后，aria-selected设置为true，该值将替换span中的 Location 文本。

有人可以建议更好的解决方案吗？我目前最担心的可能是aria-labelledby的错误使用，但我不知道什么是正确的选择。

谢谢， E.

编辑：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);
    }
});

Answer 1

aria-labelledby应该引用现有元素的id。您的标签位于对象本身内部时出现问题。像下面这样的东西会更有意义。

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

没有javascript部分，我无法给你更多帮助

如何在表单

1 个答案: