What is the purpose of ui-helper-hidden-accessible in an unordered list?

Question

Judging by the class name and the jQuery UI CSS source, the ui-helper-hidden-accessible class appears to be a way of hiding an element while still making it accessible.

What I don't understand is what purpose it serves in this particular case. I tried searching SO and Google for reasons to use this class, but didn't find my answer.

Here is an excerpt from the HTML generated by this UI Multiselect widget:

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

I am using this widget and want to make some changes. While I'm at it, I'm cleaning up the code and removing unnecessary bits. I don't see the purpose of the following line of code.

<li class="ui-helper-hidden-accessible"></li>

I tried removing the li in question and don't see what difference it makes, but I can't claim to know a lot about accessibility.

Note: I am new to GitHub and wasn't sure about the proper etiquette. But since the original author no longer maintains the widget, I didn't think it was appropriate to contact him directly.

So does that line of code serve a particular purpose that I haven't considered or is it OK to remove it?

EDIT: I just had another thought. Maybe the purpose of the hidden li is to create valid HTML since an empty ul is not valid for HTML 4.01 nor XHTML. But doesn't that only matter to a validator?

Answer 1

Sometimes I use .ui-helper-hidden-accessible class to give auto focus to some hidden element.

For example, if you show a jquery ui dialog and if the first element is a textbox with jquery ui datetimepicker attached to it, when the dialog showed up, the datepicker calender also fires and showed to the user. In such scenerio, I am placing a .ui-helper-hidden-accessible element before the textbox and making it to take initial focus.

There might also be a focus issue in your case. I haven't inspected the code.