クラス名と jQuery UI CSS ソースから判断すると、このui-helper-hidden-accessibleクラスは要素を隠しながらアクセス可能にする方法のようです。
私が理解していないのは、この特定のケースでどのような目的に役立つかです。このクラスを使用する理由を SO と Google で検索してみましたが、答えが見つかりませんでした。
以下は、この UI Multiselect ウィジェットによって生成された 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 を初めて使用し、適切なエチケットについて確信が持てませんでした。しかし、元の作者はもはやウィジェットを維持していないので、彼に直接連絡するのは適切ではないと思いました。
そのコード行は、私が考えていなかった特定の目的に役立ちますか、それとも削除しても問題ありませんか?
編集：別の考えがありました。HTML 4.01 や XHTML ではli空は有効ではないため、おそらく非表示の目的は有効な HTML を作成することです。ulしかし、それはバリデーターにとってのみ重要なことではありませんか?