LibPress consulted with our partner organization NNELS (National Network for Equitable Library Services) to audit one of our LibPress sites for accessibility. They looked at every aspect of the website design and development.
Audit Results: Tester comments
Here’s what the testers—who have lived experience with disabilities—had to say about just the content, which is just one aspect of the LibPress… but it’s something we as site managers can make sure to fix!:
Home Page
- The homepage is not well organized. The information and links in the user journeys are easy enough to locate, but the rest doesn’t follow a logical structure. Many sections aren’t separated or identified by heading.
Main Menu
- too many items, both in menu and in subs
- font size too small
- better accessible font such as Arial or sans serif
- some links unexpectedly leave the site (external) – this is confusing
- “Many pages have titles which do not match the text contained in the links to them in the menu…This is confusing and could make people think they clicked the wrong link.”
Navigation and content identification
- Titles and headers are not used consistently/properly– Make it easier to find important information such as hours.
- Content is unclear, cluttered, not grouped well with a header.
- Important information is buried at bottom of page.
- Use colons with text for information such as Hours: Phone: etc.
Images
- Alt text missing or inconsistent applied, and not well done
- Logos require alt text too
- Text appears on buttons with patterned backgrounds making them difficult to read
Links
- Use descriptive text for hyperlinks, and try to match it well to the linked content. It is jarring if this doesn’t match. This also applies to Menu labelling for links!
- Make sure that the colour assigned to links is dark for enough contrast!
- If images are links to a product, must have alt text to explain where the link goes not just “logo”
- Emails must be linked; phone numbers too
- “Having the library phone number hyperlinked would be easier for those who have difficulty dialing.”
- “Could be useful to specify that it opens in a separate tab.”
Text/Font
- Too small
- Font style was not accessible
- Contrast of text on background difficult to read, such as on the Main Menu
- Bolding was used without reason or consistency — Best Practice: don’t bold for effect
Line Height and Spacing
- Line height set too narrowly
- Elements (images, headers, etc) need more whitespace
- Important information is sometimes set too closely together, such as an address and a phone number making each piece of info or click difficult to select
Language
- Abbreviations cause problems with screen readers, for example: Mon vs Monday
Recommendations for template
Based on the above comments from testing, the LibPress Coordinator would like to implement the following changes across all LibPress sites (list items in bold to discuss in webinar)
Home Page
- Fix Heading for each Highlight to have an H2 header – done! Note centering issue
- Recommend everyone USE the Title field of each highlight
- Can also add code to centre the heading (only for highlight columns!)
Main Menu
- Develop model for new navigation – done on Maple! (and applied during Overhaul sessions to individual sites)
- Increase font size for Main Menu and also sub items – code created, applied during Overhaul where possible
- Change fonts for sites where necessary – done during Overhaul
- Double-check all links are named correctly, point to the correct page – advised during Overhaul
- Add an icon to Main Menu to identify where links are external and will open in a new tab – will be done soon by Sam
Navigation, Images, Links
- Content Skip Link implementation – done by Sam
- Slideshow improvements – done by Sam
- Slides and alt text for shared resoureces – done by Christine
- Develop training for: Headings, alt text, links – done!
- Provide tools to check contrast – done (Web Preferences tool, Sa11y, etc)
- Develop guides for plain and clear language writing – to do
- Be consistent about external links – if opening in new tab, then always open in new tab
- Note about slideshow: try to point internally
- Push out all links to be underlined – request of Sam
Text/Font, Line Spacing
- Ensure all fonts being used are accessible
- Increase size of fonts in page body – request of Sam
- Demo contrast Web Preferences tool for contrast issues for visitors
- Recommend a contrast checker tool when creating buttons
- Best practices when using bold or italics
- Increase line spacing across all sites, in Menu and on page – request of Sam
Language
- Develop screencast or webinar for basic plain language principles and good content design.