Web Accessibility in the Library, Part 2

Thanks for joining me again!  If you are just checking in, we’ve been discussing a lot about pie as well as some tools you can use to evaluate the accessibility of an online library resource you want to offer in your collection.  We covered heading structure, unique links, and color contrast in Part 1 and we’ll continue with 4 more accessibility issues that you can evaluate using Firefox plug-ins.

Alt Attributes on Images

Why Evaluate:  Providing alt attributes on images (literally, the alt=”something” inside of an <img> tag) puts text in place to describe the image.  This is useful for screen reader users who can’t see the image so they know why it’s included in the content.  Alt attributes on images are also useful for everyone.  In the case where something goes wrong on the Internet (I know, what could go wrong?) and images won’t or can’t load, the text from an alt attribute shows in the place of the image on the page, giving any user in this situation information about the image and why it is included in the content.

Tool to use: Web Accessibility Evaluation Tool (WAVE) (plugin for Firefox)

WAVE installs as a toolbar and is available under the Tools menu on your browser after installation (Firefox restart required).  This tool, from the WebAIM group, does a pretty good job of identifying multiple accessibility issues, including missing alt attributes on images.  Click the “Errors, Features, and Alerts” button in the toolbar and the page you are viewing in your browser will be reloaded showing various icons all over the page.  The ones you want to watch out for are icons in red.  Mouse over any of the icons and you will see information about the error (red icon), feature (green icon), or alert (yellow icon) that is indicated for the element the icon is near on the page.  Missing alt attributes are indicated by a red icon with a white diagonal slash.

Picture of pie from Wikipedia ‘pie’ entry showing WAVE icon for missing alt attribute.
This pie is sad because it has no alt attribute. Or whipped cream.

If you see these, you’re probably on a page that doesn’t even have valid HTML and the likelihood that the page is accessible has just plummeted.

Screenshot of Wikipedia ‘pie’ entry with WAVE icons.
This is your Wikipedia pie on WAVE. Any questions?

TIP:  To return to the original view of the web site without the lovely WAVE icons, use the “Reset Page” button in the toolbar (also available under the Tools menu for WAVE). Reset Page button from WAVE toolbar.

Form Labels

Why Evaluate:  Form labels are actual HTML tags (<label>) used inside of forms to associate text identifying a form field with the form field itself.  For example, a search form that offers multiple fields to search on author, title, or keyword probably has the text “Author:,” “Title:,” and “Keyword:” next to each search field.  The test here is to see if that text is surrounded by a <label> tag and associated with the correct search field.  Screen reader users rely on labels to know what field is for what kind of input in a form.  Otherwise, there’s a lot of guessing and frustration.  Search is hard enough.

Google Advanced Search form with multiple fields.
This is before WAVE.

Tool to use: Web Accessibility Evaluation Tool (WAVE) (plugin for Firefox) – (see plugin details under Alt Attributes on Images)

WAVE has an icon for this exact accessibility issue, so it’s actually very easy to identify forms with problems.  Using the “Errors, Features, and Alerts” button again, the red icon to watch out for in this instance has a white tag symbol, like an actual tag from the physical world.

Google Advanced Search form with multiple fields and WAVE icons for missing form labels.
And this is after WAVE.

Search may be difficult to use effectively, but it’s essential for online library resources.  Without labels on search forms, an online library resource can become pretty useless to screen-reader users pretty quickly.

Keyboard-only

Why Evaluate:  Keyboard-only use refers to using a web site without using either the mouse on a desktop computer or a touchpad/button on a laptop.  Some users cannot physically use a mouse (hand dexterity issues, injured hand/arm) and some users have a hard time precisely aiming and clicking the mouse pointer on the computer screen.  Other users actually prefer using the keyboard as a shortcut method to avoid reaching back and forth between the mouse and keyboard when filling out a form, for example.

Keyboard-only use is something you can try just by attempting to work your way through the links and forms on a site without using your mouse.  If you are able to use the site with just your keyboard, that is a positive sign that the site is well structured and potentially accessible.  Many operating systems and browsers actually don’t afford easy access via the keyboard without changing settings; so consider this test on the positive side – if you can do it, that’s a good sign for the site.  If you can’t do it, it’s not necessarily a bad sign.

Tool to use: computer keyboard (no mouse) – using the TAB key is often the best way to move through a site via the links and form fields – the elements that can have cursor focus on a web page (holding down the SHIFT key while using the TAB key will most often move you backwards through those same elements on the web page).  The directional arrow keys will sometimes also work to move through areas on the site, but most often those keys will scroll the page up, down, left, or right.  If you encounter a link you would like to follow, the ENTER key or the SPACE BAR will often be the trigger to use to “click” a link or press a button.

Mobile Device

Why Evaluate:  This accessibility issue involves more imagination than actual testing, unless you decide that mobile access is a requirement and then you will want to be sure the online library resource works well on mobile devices.  But mostly my point here is to think about people in a setting where they will have a mobile device (in class, walking between classes, in the library, etc.) and whether or not the resource you are evaluating would come in handy in that situation.

The example I always think of is IUCAT, our online library catalog.  If a student is in class without a laptop and the instructor mentions a book needed for a class assignment, being able to jump online and check the availability of the book in the library via IUCAT on your phone makes things that much easier for the student.  Similarly, having call number information on your phone from the catalog makes it much easier to find the physical item in the library (no need to locate a piece of paper and pencil or try to repeat the call number out loud while waiting on the elevator – did I just admit to something here?).

Tool to use: mobile device and imagination – If you determine that the resource you are evaluating has uses in a mobile setting, locate the nearest mobile device and give it a try.  There are a wide variety of mobile devices that offer web browsing through proprietary mobile browsers, so this one is hard to test thoroughly, but if you can check the resource on an iPhone or iPod Touch and an iPad in addition to an Android, you have been super-diligent and deserve ice cream.

The Pluses and the Minuses

Drawbacks:  I’ll be negative first so we can end on a positive note.  The biggest problem in trying to evaluate an online library resource for web accessibility is that no single tool can evaluate everything that needs to be considered.  The second biggest problem is that all of the tools I’m sharing with you are only available on Firefox.  If you are not familiar with Firefox or are uncomfortable using plug-ins, this could be a barrier to evaluating online library resources for accessibility with these tools.  Additionally, a resource that has positive results from these tools, even in combination, is not guaranteed to be accessible.  These are good indicators of accessibility, but only by receiving feedback from people who use assistive technology can you know with any certainty the accessibility of a resource.

This is where I plug an invaluable group of people we have located in pie-throwing distance in the Wells Library, UITS’ Adaptive Technology & Accessibility Centers.  They conduct full web accessibility evaluations (at no charge) and can provide a report for any online resource that we have permission to access.  There are dedicated users of screen reader devices and other assistive technologies in this office and they are here and ready to help us evaluate.  Please use them and don’t throw the pie – offer it with several forks!

Picture of apple pie on plate with fork.  Yum!
Flowers are optional, but also appreciated. Photo: Wikipedia.org

Benefits:  On to the positives!  Using these tools to evaluate an online library resource for accessibility gives you a better understanding of the disability experience online.  The first time you try to work through a web site using just your keyboard and you can’t do it, it will hit you just how hard it can be for some users to make use of all of the incredible information available online.  These tools can also give you a context for asking questions of vendors (hence, the ALA Accessibility Challenge).  If a resource has no headings, show the vendor those results and ask when that issue will be addressed.  The more questions we ask of vendors, the more seriously they will take accessibility issues, and the better our online resources will become for our students, faculty, and staff.

You can also use these evaluations to compare resources.  If one resource seems more accessible than another resource when evaluating with these tools, chances are it’s a more user-friendly resource overall.  And that is the final coup in paying attention to accessibility.  If you find that an online resource has headers, unique links, good color contrast, alt attributes on images, labels on form fields, and you can use it with just your keyboard, more than likely you have encountered a resource that is going to provide a good user experience for everyone, including users with disabilities.

And Finally…

This blog post is based on recent presentations I gave at the InULA Professional Development & Informational Sessions, the IUB Libraries’ In-House Institute, and more recently for Librarians’ Day at IUPUI.  All talks have slides available online with links to the plug-ins, example library resources to try with these tools (the links to the resources are Bloomington campus-specific), and a web accessibility checklist containing these issues and the tools to use to evaluate each issue.

Please feel free to contact me if you have any questions regarding these plug-ins or would like help evaluating an online library resource for accessibility.

Julie Hardesty is the User Interface Design Specialist in the Digital Library Program, a partnership between the Libraries and University Information Technology Services at Indiana University.  She is also located in Wells Library, but not within pie-throwing distance, unfortunately.  She does like pie, though.  Julie is a huge fan of web accessibility and generally making things on the Internet easy to understand and use.  She is reachable at jlhardes@iu.edu.

Author- Special Guest Blogger

Check out these posts from a series of special guest bloggers from across the IU Libraries system! Would you like to be a special guest blogger? Pitch us your idea using our Contact Us form.