An Accessible III Login Widget

Since III doesn't "provide third-party server support," here's the HTML form code to create an accessible (i.e., Section 508) account login for your Innovative Interfaces, Inc., catalog. I created this login widget based on the responses we received in a recent web use survey at the Arapahoe Library District. We asked the open-ended question, "I most often use the library web site to:" and 58% percent of the respondents indicated some function related to their library account. Examples of specific responses include "place holds," "view checkouts," "renew books," and "pay fines." The current home page provides a link the the III login screen, but putting a login widget takes a click out of the process and provides more direct access to user accounts.

More information on what to do with this type of code to make custom widgets for your library's web presence is available in a presentation that I gave back in 2009 at Computers in Libraries and in an article I wrote for College & Research Libraries News. (The most important thing to note, though, is to be sure to replace our catalog URL,, with the URL of your catalog.)

This code validates cleanly against the W3C's Markup Validation Service and the WebAIM WAVE accessibility evaluation tool. The sample code below of this post is an image, but the HTML is also attached in a .txt file at the bottom of this page.

So, here's what it looks like. It doesn't look great in the CSS used for this site, but you can style it to your heart's content on your own:

...and here's what the HTML looks like:

download the HTML file for the HTML code at the bottom of this post

Things you can change/customize in this code snippet:

  • As mentioned above, this one's a must: change the URL of the catalog to your III catalog's URL.
  • The phrase "First and Last Name:" Just be sure not to delete any of the code around it.
  • The phrase "Library Card Number:"
  • You can add/change default values ('For example, 'Jane Smith' ') in both boxes by editing the value="" for each input tag. Just be careful not to delete either of the quotation marks.
  • The "size" and the "maxlength" values for the search boxes. Increase the values if you need to fill a horizontal space.
  • The label for the "Submit" button; I use "log in" here, but you can change it by changing "Log In" to whatever you desire.
  • Note to CSS aficionados: the fieldset style="border-style:none;" is included to remove a border that III puts on the log in box on the patroninfo screen. You can put the border back by deleting ' style="border-style:none;" '

One editorial comment about III's "third-party server support" reasoning: other vendors-most notably, in my experience, Serials Solutions-provide excellent support in this area. It seems short-sighted for III to not do the same, especially since the purpose of these widgets is to connect our customers more quickly and easily with their products. I'm hoping that with the promised openness of the Sierra platform, that this type of support will open up as well. And as an aside regarding accessibility, I'm pleased to see III making strides in the accessibility department in the sample screens that we just downloaded to update.

If you have any suggestions or comments, please use the "comments" space for this post. I'm also working on an accessible version of a III search form widget, which I'll share here in my blog when I'm done. Let me know if you've created any III-related widgets of your own; I'd love to see more examples. Thanks!


Thanks for sharing your idea. Very cool! I'll use it for sure on some of our LibGuides. Thanks!

At the link below I have made the obvious various widgets for searching with Encore and our Classic Catalog. One that is somewhat unique is an Encore Article search (basic code provided by Sarah Hickman Auger from III). We use these mostly in our LibGuides. Also at the LG below, are some Research Pro widgets.

And just recently I provided the code of an Encore Search with image, for users to copy and paste. It can be seen at the link below. This page also has widget related tools like browser plugins and a LibX toolbar that includes searching Encore Articles.

Scott Mellendorf
Reference Librarian
Saginaw Valley State University

It seems that the image and the download for the code has disappeared. I'm very interested in seeing what you've done with this code.

So sorry, will fix ASAP! Image links broken during some recent server maintenance. Thanks for bringing it to my attention!