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, http://aspen.ald.lib.co.us, 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:
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!