WordPress Website Editing: Website Accessibility

It can feel overwhelming to consider web accessibility, when few of us have experience in web development. Below are some ways you can get started with updating your library website and some resources you can use to check how accessible your own website is.

There is legislation that requires that websites and digital communications be accessible to all. See Section 508 of the Rehabilitation Act: https://www.section508.gov/.  This website provides resources such as webinars, articles, and more to help ensure you are meeting Section 508 guidelines.

“As more librarians design their library’s sites with off-the-shelf content management systems, they can take several straightforward steps to improve accessibility, such as including text that describes the content of all images, avoiding tiny fonts, using simple and economical language, and developing scripts that describe the contents of videos.” - American Libraries Magazine, “Library Websites for All,” 6/1/2017

A library website should at minimum do these things:

• Include alternative text for all images
• Avoid tiny fonts
• Use simple, economical language
• Use a script to describe any video content included
   

Add alternative text to ALL images on your library website (even retroactively). Go through your WordPress Media Library and make sure that all images have Alt Text entered.

Alternative text serves several functions:
•    Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
•    If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
•    Search engines use alternative text and factor it into their assessment of the page purpose and content.

Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. We must provide alternative text that represents the content and function of the images we use.
 

Alt-text with no context:
A mostly empty stadium.
Alt-text on a page about recent turnout for track tryouts:
Harvard Stadium with two lone runners bounding up the steps.
Alt-text on page about renovation projects:
Harvard Stadium with cracked concrete pillars.
 

Complex Image Types
Icons: alt text for icons should be the equivalent to the information intended by the icon, such as “Download PDF” or “Visit our Facebook Page”
Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). For example, the alt text for an image of a question mark that links to a help page should be “Contact Support” rather than “question mark.”
Images with complex information: If the image is a chart, diagram, or illustration, consider how to convey the information contained in the image using both the alt-text and the adjacent page text. See an example of an accessible infographic from WebAIM.
Accessible infographic: https://webaim.org/resources/designers/#infographic

Best Practices for Alt Text:

• Describe the image in context based on what details the image adds to the text. If the image is of a dog and a firefighter, depending on the context, the ideal alt text could be "Smith poses with the station's new rescue dog" or "kids love that the new rescue dog has a heart-shaped spot on its chest."

• Keep the descriptions short and concise; roughly 140 characters or less.

• Do not use the word “graphic or image” in the description ("image of a running dog"), as the screen reader already takes care of it. Just say "a running dog.

Use an empty alt for decorative images like spacers or uninformative backgrounds (alt='""), to tell screen readers to completely ignore the image. Note that this empty alt must be present, or the screen reader will read the filename one character at a time!

UP TO DATE information about your library should be featured prominently on the website. Consider using a widget for this content:

• Library contact information
• Address
• Phone number
• Current hours

Also include links and relevant information about resources, like:

• STARCat
• Digital card registration
• OverDrive/Libby app
• Databases

Examples of Barriers

• Poor color contrast
• Use of color alone to give information
• Lack of Alt Text
• No captions on video content
   

Best Practices:

• Let images be images. Or, "Pictures are for puppies, not for paragraphs." Use the text field for text.
• Always add meaningful alternative text for your images.
• When you must use text on an image, choose high contrasting colors.
• Avoid posting photos of flyers/printouts.
   

Choose an accessible WordPress theme. STLS recommends the Spacious theme.
You can search for accessibility-ready themes in WordPress. When searching for themes, use the "accessibility-ready" filter.

• Library Websites for All - American Libraries Magazine
• W3C Web Accessibility Overview
• W3C - What is Web Accessibility
• Accessibility Basics
• Test Your Website
• ADA: Guidance on Web Accessibility
   

Transcripts for Audio

Just as images aren't available to people who can't see, audio files aren't available to people who can't hear. Providing a text transcript makes the audio information accessible to people who are deaf or hard of hearing, as well as to search engines and other technologies that can't hear.

For a podcast, consider providing a transcript. For a video, use closed captioning or subtitles.

1. Do not rely on color as a navigational tool or as the sole way to differentiate items
2. Images should include Alt text in the markup/code; complex images should have more extensive descriptions near the image (perhaps as a caption or descriptive summaries built right into a neighboring paragraph)
3. Functionality should be accessible through mouse and keyboard 
4. Provide transcripts for podcasts
5. If you have a video on your site, you must provide visual access to the audio information through in-sync captioning

To check for major issues on your site, run the WAVE test using the WAVE Evaluation Tool (a browser extension). For Google Chrome and Firefox visit: https://wave.webaim.org/extension/

Start with the easiest errors to resolve, like missing alternative text for an image. Go through the list below and try to meet these goals:

1. Check your page titles, do they make sense?
2. Check that all images on your site have alternative text that makes sense and is meaningful.
3. Are you using headings appropriately?
4. Make sure there’s enough contrast between text color and background color.
5. Make sure text size is not too small.
6. Remove any moving, blinking, or scrolling information that starts automatically and lasts more than five seconds. Yes; this means you should get rid of that slider on your homepage.

Review the list of easy checks here for more information: https://www.w3.org/WAI/test-evaluate/preliminary/#video