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

时间:2012-12-25 02:44:41

标签: 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无效。但这不仅对验证者有用吗?

1 个答案:

答案 0 :(得分:3)

有时我会使用.ui-helper-hidden-accessible类来自动关注某个隐藏元素。

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

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