jquery-ui - ui-helper-hidden-accessible在无序列表中的作用是什么?

标签 jquery-ui html-lists accessibility

从类名和jQuery UI CSS源来看,ui-helper-hidden-accessible类似乎是一种隐藏元素同时仍可访问的方法。

我不明白的是,在这种特殊情况下,它的作用是什么。我尝试搜索SO和Google的原因是要使用此类,但没有找到答案。

这是this UI Multiselect widget生成的HTML的摘录:

<div style="width: 176px;" class="ui-multiselect ui-helper-clearfix ui-widget">
<div style="width: 105px;" class="selected">
    <div class="actions ui-widget-header ui-helper-clearfix">
        <span class="count">0 items selected</span><a href="#" class="remove-all">Remove all</a>
    </div>
    <ul style="height: 270px;" class="selected connected-list ui-sortable">
        <li class="ui-helper-hidden-accessible"></li>
    </ul>
</div>
<div style="width: 69px;" class="available right-column">
    <div class="actions ui-widget-header ui-helper-clearfix">
        <input class="search empty ui-widget-content ui-corner-all" type="text"><a href="#" class="add-all">Add all</a>
    </div>
    <ul style="height: 279px;" class="available connected-list">
        <li class="ui-helper-hidden-accessible"></li>
        <li style="display: block;" class="ui-state-default ui-element ui-draggable" title="3D Animation"><span class="ui-helper-hidden"></span>3D Animation<a href="#" class="action"><span class="ui-corner-all ui-icon ui-icon-plus"></span></a></li>
        <li style="display: block;" class="ui-state-default ui-element ui-draggable" title="Accreditation"><span class="ui-helper-hidden"></span>Accreditation<a href="#" class="action"><span class="ui-corner-all ui-icon ui-icon-plus"></span></a></li>
    </ul>
</div>

我正在使用此小部件,并希望进行一些更改。在我处理代码的同时,我正在清理代码并删除不必要的位。我看不到以下代码行的目的。
<li class="ui-helper-hidden-accessible"></li>

我尝试删除有问题的li,但看不到它有什么区别,但是我不能声称对可访问性了解很多。

注意:我是GitHub的新手,不确定适当的礼节。但是由于原始作者不再维护该小部件,所以我认为直接与他联系不合适。

那行代码是否达到了我未曾考虑过的特定目的,或者可以删除它?

编辑:我刚刚有另一个想法。隐藏的li的目的可能是创建有效的HTML,因为空的ul对HTML 4.01或XHTML均无效。但这对验证者来说不重要吗?

最佳答案

有时,我使用.ui-helper-hidden-accessible类为某些隐藏的元素提供自动聚焦。

例如,如果显示jquery ui对话框,并且第一个元素是附加了jquery ui datetimepicker的文本框,则在显示对话框时,datepicker日历也会触发并显示给用户。在这样的场景中,我将.ui-helper-hidden-accessible元素放在文本框之前,使其成为最初的焦点。

您的案例中可能还存在焦点问题。我没有检查代码。

关于jquery-ui - ui-helper-hidden-accessible在无序列表中的作用是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14027263/

相关文章:

javascript - JAWS/IE11 中的 Keydown 事件未正确触发

javascript - 工具提示 z-index 位置或其他?

Html 并排列出 - 正确的方法是什么?

javascript - 导航到页面的特定 anchor

html - ul's li 背景色 onmouseover with ribbon

SlideUp 的列表选择器中的 jquery 列表

html - 屏幕阅读器将 1965 年读取为 "one nine six five"

macos - 将 NSAccessibilityElement 添加到现有 NSView

javascript - jQuery datepicker - 代码不起作用?

javascript - 通过 AJAX 在 jQueryUI 选项卡中加载 Google 可视化