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?

Rockandroll

I am totally guessing here, but it looks like the word accessible here refers to letting the element be added somewhere, versus the meaning accessibility has on SO. – Claudeclaudel

.ui-helper-hidden-accessible is definitely the jQuery-UI way of hiding something visually but not from a screenreader (while .ui-helper-hidden is just display:none which hides the element from all). Puzzling here is that this class is always used with some text that's specifically for screenreader users only, rather than being left empty like this. I'm wondering if some screenreader had a problem with an empty UL and this was added to avoid that? As-is, though, it looks like an accessibility bug, as a screenreader would tell the user about an empty list item that's not really there... – Semiology

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.

Reliable

Answer 2

For me it was adding some jquery diagnostics below the footer so I had to hide it completely with the style. It would appear after I change product color with a click. Hopefully it's ok? Thanks

.ui-helper-hidden-accessible{
    display:none;
}

Trona