Project: Evaluating Accessibility of SPL.org

Website Evaluated

Seattle Public Library (SPL) home page: spl.org

Purpose and Intended Audience

The home page of the public library is intended to be accessible to all community members. The home page provides information about library branches and hours, as well as news about activities sponsored by the library.  Links to policies, online catalog, and other information are provided for visitors to the site.

Evaluation Tools and Standards

I used Chrome’s Accessibility Developer Tools extension to perform audits for color contrast and to examine markup.

For this evaluation, I selected criteria from a tool published by the W3C called “Easy Checks – A First Review of Web Accessibility” (https://www.w3.org/WAI/eval/preliminary.html). The checks are based on the Web Content Accessibility Guidelines (WCAG) 2.0.

  1. Page title
  2. Image text alternatives (“alt text”) (pictures, illustrations, charts, etc.)

Text:

  1. Headings
  2. Contrast ratio (“color contrast”)
  3. Resize Text

Interaction:

  1. Keyboard access and visual focus
  2. Labels

Evaluation Results

Page title

The page titles on the site display well in browser tabs and appear in the <head> with the correct html tags “<title></title>”.

spl-titles

The titles of pages are distinct from each other and well written.

Image text alternatives (“alt text”)

All images include alt text in the markup and are generally well written based on relevance to content and context presented.

spl-altgoodImages like header banners are not “over-described” and images that relate to content are usually given the appropriate level of description.

Most graphic elements like a printer icon are given appropriate alt text to describe relevance (alt=”print”). But in a few cases, there are graphic elements that are not essential other than as decoration in these cases alt text can be simplified or null.

In the examples below these elements are over-described and repeat the text that follows. For those using screen reader they will here the same statement two times in a row.

spl-nullalt

spl-altmobile

Text:

Headings

Is header hierarchy meaningful? The hierarchy for the home page appears to be chosen based on style rather than organization.

 

Below is an outline of the home page that was generated by the W3C HTML Validator (The W3C Markup Validation Service).

 [h3] SEARCH THE LIBRARY
            [h3] BROWSE
            [h3] Library Locator
    [h1] Library News and Events
            [h3] Michael Swanwick
            [h3] 125 Years of The Seattle Public Library
            [h3] Find It On Friday
            [h3] Music of Teresa Teng
    [h1] SEE UPCOMING EVENTS
    [h1] QUICK LINKS
                [h4] Summer of Learning
                [h4] Playback - Local Music Collection
                [h4] Museum Pass
                [h4] Upcoming Author Readings
                [h4] Tax Help
                [h4] Homework Help
                [h4] Resources for Job Seekers
                [h4] Pay a Fine / Fee
                [h4] News Releases
                [h4] Special Collections Online
                [h4] Meeting & Study Rooms
                [h4] Reserve a Computer
                [h4] Sign up for Library E-News
                [h4] Podcasts
                [h4] ADA Accommodation
    [h1] QUICK LINKS
                [h4] Summer of Learning
                [h4] Playback - Local Music Collection
                [h4] Museum Pass
                [h4] Upcoming Author Readings
                [h4] Tax Help
                [h4] Homework Help
                [h4] Resources for Job Seekers
                [h4] Pay a Fine / Fee
                [h4] News Releases
                [h4] Special Collections Online
                [h4] Meeting & Study Rooms
                [h4] Reserve a Computer
                [h4] Sign up for Library E-News
                [h4] Podcasts
                [h4] ADA Accommodation
            [h3] AUDIENCES
    [h1] Support Your Library!
            [h3] LIBRARY BLOG

You may notice that the page doesn’t begin with an H1, rather H3. This is not ideal, but since a search box is the first content with a header, it isn’t essential that there be an H1 attached to this element.

However, this means that the first instance of H1 comes below the main banner and search box. It would be better if it were located above the search box. In fact, H1 is used several times on the page where H2 might be more appropriate.

The use of H4 for numerous quick link items may not be necessary as they are not section headers. It may be better to style the text for emphasis.

Contrast ratio (“color contrast”)

Many of the headers and navigation elements on the home page had a contrast of 3.00, which falls just below AA level contrast (4.52).

  • The top and bottom navigation text = 3.00

spl-topnavcontrast

  • Header 1 and Header 3 text throughout = 3.00

spl-H1H3contrast

  • Email link in footer = 3.00

spl-contrast-email

All of these instances could be improved to the AA level or higher without making major stylistic changes.

Resize Text

To evaluate whether the text was accessible at larger magnifications. I used my browser controls to zoom to 200% then examined the text using the checklist below.

  1. All text gets larger.
  2. Text doesn’t disappear or get cut off.
  3. Text, images, and other content do not overlap.
  4. All buttons, form fields, and other controls are visible and usable.
  5. Horizontal scrolling is not required to read sentences or “blocks of text”.

All text was fully functional at 200% magnification.

Interaction:

Keyboard access and visual focus

To test for keyboard access, I used the following check list:

  • Tab to all and Tab away:
    • I had no difficulty tabbing back and forth through the entire page.
  • Tab order:
    • The tab order was logical and followed the content in an expected order.
  • Visual focus:
    • This was problematic on the top and bottom navigation menus, because the box to indicated the location of the cursor if not visible against the blue header and footer color.
  • All functionality by keyboard:
    • All links, buttons. drop-down lists and other elements were accessible by keyboard.
  • Image links:
    • Images with links tabbed in the correct order and were visibly selected.

Labels

The search box on the home page is missing labels in its markup.

spl-searchlabels

Revising markup to include labels would improve accessibility.

Recommendations

Improve Accessibility

Overall the Seattle Public Library home page and the majority of its associated pages are accessible. However, there are several issues that could be addressed without major redesign or effort to improve it overall accessibility of the site.

Recommendations that follow are made based on the criteria used to evaluate general accessibility of the Seattle Public Library site:

  • Alt Text:
    • The image used along with “Support the Library” is only decorative, using null or alt=” ” would be appropriate in this instance.
    • The image above “get the app” has duplicate text as the link beneath it. I recommend revising to a descriptive alt=”mobile” or null.
  • Headers:
    • Improve the hierarchy of headers. H1 should be used at the top level and in limited use only where it is essential for structural clarity. Many of the instances of H1 could be changed to H2 in order to make the hierarchy more meaningful.
    • H4 is used for long lists of quick links. Improved styling for emphasis may be more effective in this case.
  • Contrast Ratio:
    • Improving the contrast ratio to at least AA levels (4.52) will not require major design changes and it would make the site more accessible to the visually impaired. These areas are recommended for revision:
      • Top and bottom navigation = 3.00
      • H1 and H3 text = 3.00
      • Footer link to email = 3.00
  • Keyboard Interaction:
    • Improve visibility of tab selection of top and bottom navigation items. The highlight box is not visible when tabbing against the light blue background.
  • Labels:
    • Add labels to the markup for the “Search” radio buttons and input box.

Leave a Reply

Your email address will not be published. Required fields are marked *