lemoynelibrary / lemoyne

Files used in setting up new web design in LibGuides v2 and elsewhere
5 stars 1 forks source link

Accessibility: A form control does not have a corresponding label #50

Open tomkeays opened 4 years ago

tomkeays commented 4 years ago

Both aXe and WAVE accessibility tools give many "A form control does not have a corresponding label" errors in forms on the home page and elsewhere in LibGuides.

image

Need to make a list of the pages where this might occur. I'm guessing that they are primarily the homemade forms, not those that the LibGuides system generates.

tomkeays commented 4 years ago

I also added a new form under Research Guides tab that uses the Le Moyne custom Bootstrap styling: check to see that it has enough contrast, especially in the input box borders and placeholder text.

tomkeays commented 4 years ago

A preliminary list of forms (from issue #23)

tomkeays commented 4 years ago

Search boxes on the Find Books page have now all been refactored as Assets to make them easier to find and reuse.

55081032 : Libraray Catalog Search

<p>Search the <a href="http://library.lemoyne.edu/search/">Le Moyne&nbsp;Library catalog</a> for books, journals, videos, and more.</p>
<div>
  <form action="http://library.lemoyne.edu/search/" class="form-inline" method="get" target="_blank">
    <div class="form-group form-group-sm">
      <label class="sr-only" for="searcharg">Search: </label> 
      <select class="form-control" name="searchtype">
        <option selected="selected" value="X">Keyword</option>
        <option value="t">Title</option><option value="a">Author</option>
        <option value="d">Subject</option>
        <option value="c">Call number</option> 
        <option value="i">ISBN/ISSN</option>
      </select>
      <input name="SORT" type="hidden" value="D" /> 
      <input class="form-control" id="searcharg" name="searcharg" type="text" style="min-width: 20em" /> 
      <input class="btn btn-default btn-sm" type="submit" value="Search" />
    </div>
  </form>
</div>

55082048 : Connect NY Catalog Search

<p>Search the <a href="http://connectny.info/" target="_blank">Connect NY catalog</a> to borrow books not owned by Le Moyne. <a href="http://resources.library.lemoyne.edu/library-services/interlibrary-loan/connect-ny">What Is Connect NY?</a></p>
<div>
  <form action="http://connectny.info/search/" class="form-inline" method="post" target="_blank">
    <div class="form-group form-group-sm">
      <label class="sr-only" for="searcharg">Search: </label> 
      <select class="form-control" name="searchtype">
        <option selected="selected" value="X">Keyword</option>
        <option value="t">Title</option>
        <option value="a">Author</option>
        <option value="d">Subject</option>
        <option value="c">Call number</option> 
      </select>
    </div>
    <div class="form-group form-group-sm">
      <input name="SORT" type="hidden" value="D" /> 
      <input class="form-control" id="searcharg" name="searcharg" type="text" style="min-width: 20em" /> 
      <input class="btn btn-default btn-sm" type="submit" value="Search" />
    </div>
  </form>
</div>

55082497 : WorldCat Catalog Search

<p>Search the <a href="https://worldcat.org" target="_blank">WorldCat.org</a> catalog to identify items held in the collections of libraries from around the world.</p>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <form role="search" action="https://www.worldcat.org/search" method="get" target="_blank">
        <div class="form-group">
          <div class="input-group input-group-sm">
            <label class="sr-only" for="searcharg">Search: </label> 
            <input class="form-control" id="searcharg" name="q" type="text" /> 
            <input type="hidden" name="qt" value="results_page">
            <span class="input-group-btn">
              <input class="btn btn-default" title="Submit Search" type="submit" value="Search" />
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
tomkeays commented 4 years ago

This box has its master on the Ebooks guide.

55083951 : Library Catalog Ebook Search

<p>Search the <a href="http://library.lemoyne.edu/search/">Le Moyne&nbsp;Library catalog</a> for ebooks.</p>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <form role="search" method="get" action="http://library.lemoyne.edu/search/X" target="_blank">
        <div class="form-group" style="margin-bottom: .5em;">
          <div class="input-group input-group-sm">
            <label class="sr-only" for="searcharg">Search: </label> 
            <input class="form-control" id="searcharg" name="SEARCH" placeholder="Search e-books" type="text" /> 
            <input name="SORT" value="D" type="hidden" /> 
            <input name="b" value="lnet" type="hidden" /> 
            <span class="input-group-btn">
              <input class="btn btn-default" title="Submit Search" type="submit" value="Search" />
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>