title: What is the purpose of ui-helper-hidden-accessible in an unordered list?
body: <p>Judging by the class name and the jQuery UI CSS source, the <code>ui-helper-hidden-accessible</code> class appears to be a way of hiding an element while still making it accessible.</p>
  
  <p>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.</p>
  
  <p>Here is an excerpt from the HTML generated by <a href="https://github.com/michael/multiselect">this UI Multiselect widget</a>:</p>
  
  <pre><code>&lt;div style="width: 176px;" class="ui-multiselect ui-helper-clearfix ui-widget"&gt;
  &lt;div style="width: 105px;" class="selected"&gt;
      &lt;div class="actions ui-widget-header ui-helper-clearfix"&gt;
          &lt;span class="count"&gt;0 items selected&lt;/span&gt;&lt;a href="#" class="remove-all"&gt;Remove all&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul style="height: 270px;" class="selected connected-list ui-sortable"&gt;
          &lt;li class="ui-helper-hidden-accessible"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div style="width: 69px;" class="available right-column"&gt;
      &lt;div class="actions ui-widget-header ui-helper-clearfix"&gt;
          &lt;input class="search empty ui-widget-content ui-corner-all" type="text"&gt;&lt;a href="#" class="add-all"&gt;Add all&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul style="height: 279px;" class="available connected-list"&gt;
          &lt;li class="ui-helper-hidden-accessible"&gt;&lt;/li&gt;
          &lt;li style="display: block;" class="ui-state-default ui-element ui-draggable" title="3D Animation"&gt;&lt;span class="ui-helper-hidden"&gt;&lt;/span&gt;3D Animation&lt;a href="#" class="action"&gt;&lt;span class="ui-corner-all ui-icon ui-icon-plus"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li style="display: block;" class="ui-state-default ui-element ui-draggable" title="Accreditation"&gt;&lt;span class="ui-helper-hidden"&gt;&lt;/span&gt;Accreditation&lt;a href="#" class="action"&gt;&lt;span class="ui-corner-all ui-icon ui-icon-plus"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <pre><code>&lt;li class="ui-helper-hidden-accessible"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I tried removing the <code>li</code> in question and don't see what difference it makes, but I can't claim to know a lot about accessibility.</p>
  
  <p>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.</p>
  
  <p>So does that line of code serve a particular purpose that I haven't considered or is it OK to remove it?</p>
  
  <p><strong>EDIT:</strong> I just had another thought. Maybe the purpose of the hidden <code>li</code> is to create valid HTML since an empty <code>ul</code> is not valid for HTML 4.01 nor XHTML. But doesn't that only matter to a validator?</p>