| 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. |
Would you know how to tell if an online resource offered in your library is accessible for screen reader users or keyboard-only users or users on mobile devices? Many vended online library resources suffer from inaccessibility and, as a result, a lack of usability for anyone who tries to use them, regardless of the device used for access. As the gatekeepers to scholarly information at Indiana University, we have the power to make choices and recommendations that will improve the access of our online resources as well as the overall experience that is discovering and using information at IU. The following are seven ways to take stock of the accessibility of an online resource (and the tools to help you measure that stock). Consider using these tools the next time you are reviewing a resource for purchase or recommending a resource to conduct scholarly research. Disclaimer (or support): these tools are only suggestions – there are others available but these are the tools I like to use.
ALA Accessibility Challenge: If you are going to ALA this month in Anaheim, California, ask a vendor or two on the exhibit floor about the accessibility of their products. And don’t take a VPAT for an answer (it’s just a form, it does not guarantee that what they are currently trying to sell you is, in fact, accessible). Ask about headers and unique links and form labels and color contrast for the site they have on display in the exhibit (see details below). These are things that affect accessibility and anyone trying to sell you a web site should be able to discuss them.
Heading Structure
Why Evaluate: The list of headings (h1 – h6, in HTML lingo) is a shortcut that screen reader users can use to “scan” the page for content, similarly to how a sighted user would scan a page. Arguably, a lack of heading structure on a page can make things difficult for a sighted user to make sense of the content as well. If headings are considered within the content, the content is more likely to be broken up visually and the focus for the page will be more obvious.
Tool to use: HeadingsMap (plugin for Firefox)
HeadingsMap for Firefox will appear under your Tools menu in the browser once installed (Firefox restart required). Triggering this plug-in will open a column on the left side of the browser window showing a hierarchical list of headings on the page. Anything in red/pink indicates a heading that is out of order. This tool makes it very easy to see the headings and their hierarchy and any potential problems.
Pie might be important here.
Unique Links
Why Evaluate: Similar to headings, the list of links on a page is another way that screen reader users can “scan” the contents of a page. Additionally, if a screen reader user knows there’s a link on the page that should be followed, it is easier to access that link from the list of links than to have to work through the contents of the entire page. Sighted users do this same thing visually, pulling out links by their contrasting color or underlined text.
The real trick is that the text used for links needs to be unique and meaningful when pulled out of context. The infamous Internet example is the “click here” link. We’ve all encountered pages (or perhaps authored them) where several links on the page simply say “click here” and the surrounding unlinked text gives the context for why that link should be followed. Problem is, a list of links that all say “click here” is pretty meaningless – there’s no way to know which “click here” to click! In fact, any user arriving at a page full of links that repeat the same text (also think “about,” “more…”) has to spend time deciphering the context of those links, not just screen reader users. Making link text unique helps everyone by cleaning up the text on the page, distinguishing links from each other, and being concise and direct.
Tool to use: Fangs Screen Reader Emulator (plugin for Firefox)
Fangs will appear under the Tools menu in your Firefox browser once installed (Firefox restart required). Opening this plug-in will open a new window on top of your browser that shows the actual output that screen reader software will speak out loud for whatever page is currently loaded in your browser window (bonus points for reading the text in this tab using your best robot impression). That can be pretty interesting to check out, but it’s not why we’re here this time.
All your pie are belong to us!
There are 2 additional tabs in Fangs – Headings list and Links list. This headings list is the same info that you get from HeadingsMap, but without the visual hierarchy or color indication for problems (which is why I use HeadingsMap). The Links list, however, is a great way to see exactly what it’s like to go through the list of links on a web page. If you can go through that list and make sense of what’s available, that’s a good sign that links are unique and meaningful. Otherwise, the page you are viewing probably has issues with too much text, too much happening, or not enough thought about people trying to actually get somewhere on the site.
Mmmm – flaky pastry. That’s a link to follow.
Color Contrast
Why Evaluate: This accessibility issue affects users with low vision, poor vision, or color blindness. If the text on a web page doesn’t contrast enough with the background color, many users will have difficulty reading the page. Some users might not even see any text at all. Text size also works its way in when considering color contrast. If the text is too small, this can also hinder readability. Color contrast should be considered for all text on a page, including link colors. Online library resources often tend to use your basic white background color, which can easily contrast with most text colors, but text size in relation to color contrast can still easily be an issue.
Tool to use: Juicy Studio Colour Contrast Analyzer (plugin for Firefox)
Juicy Studio’s Colour Contrast Analyzer will install as a toolbar on Firefox (restart required). It will also be available via the Tools menu. To evaluate the page currently loaded in your browser, click “Colour Contrast Analyzer,” then “All Tests.” This will open a new window/tab in Firefox showing a full report of the color contrast analysis of the page. What this analyzer actually does is evaluate the font colors and background colors indicated by the styles associated with the HTML on the page.
The report is structured as a table with the HTML element, text color, and background color identified along with a visual sample of the color combination and an indication of the contrast ratio (which can be compared to the color contrast ratio recommendations from the W3C that are listed at the bottom of the report). When scrolling through the report, any color combinations that do not contrast enough will be indicated by a bold outline and a yellow background color on the entire row. The final 3 columns of the table will also include the words “pass” and “fail,” so even if you aren’t sure what the numbers in the ratio are telling you, you can at least tell what contrasts enough and what doesn’t.
Sorry, this does not involve pie.
Sometimes you will see an indication that the color contrast passes at AAA for large text and AA for regular text. This is where the font size comes in. If the font size is large enough (14pt bold or 18pt regular), then the color contrast will work in this situation. Otherwise, the contrast is probably not enough to work for poor/low vision users. The samples tend to make it possible to find the color combination on the web page, too (a link color on a background color, for example).
No pie here either, but we’ll get back to it, I promise.
Color contrast also comes into play for color-blind users. Red/green color-blindness is the most common form and certain color combinations might make it difficult for color-blind users to find links on the page, particularly if links are not underlined by default. There are web sites available that will evaluate a web page for different types of color blindness, such as Vischeck and the Colorblind Web Page Filter. You enter the URL for a page you want to check and these sites process the colors used on the page and show the page through different types of color filters. It’s not the same as a color-blind user’s feedback, but it will give you a sense of what might be seen, or not seen.
Tune in on Tuesday for Part 2: Web Accessibility in the Library – How much more pie can there be?
Leave a Reply