Print Friendly, PDF & Email

Many libraries have taken steps to address physical accessibility (Americans with Disabilities Act, ADA) of their buildings, and even the accessibility or welcome of programs and services.

Websites are a service and resource of the library, so awareness of steps we can take to make sure persons of all abilities and technological skill can access information through them is important.

This tutorial covers principles of website accessibility, some of the tools available to evaluate your website, and basic changes and steps you can take to make sure your website is prepared for all visitors.

Accessibility Essentials^

Website structure

Website readability

Website navigation

Website features

^ Indicates a website manager has [at least some] control/ability to address and prevent errors

* Indicates user control options available in the AccessibleWP toolbar

Principles of Accessibility

Website accessibility aims to create website design that allows machines to interpret visual data into text or audio form.

WebAIM offers a nice infographic to describe the role of designers in assuring website accessibility: https://webaim.org/resources/designers/


website accessibility for designers infographic

Webpage accessibility evaluation tools

There are several free tools that will scan a webpage and give a report on potential accessibility problems.

WAVE by WebAIM: https://wave.webaim.org/

accessScan by Accessible: https://accessibe.com/accessscan

axe-core Chrome extension: https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US

PageSpeed Insights: https://pagespeed.web.dev/

There are tools that can address specific elements of accessibility.

WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
– Evaluates the level contrast of two different hex code colors

ColorBlindly Chrome extension: https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en&pli=1
– simulate different kinds of color blindness on your site

Windows 10/11 Narrator screen reader
– Native application for Windows computers

NVDA screen reader: https://www.nvaccess.org/download/
– Open access screen reader application

JAWS screen reader: https://www.freedomscientific.com/products/software/jaws/
Job Access With Speech screen reader

W3C.org Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/test-evaluate/tools/list/
– List of additional tools for developers and web managers to evaluate websites and web content

 

 

 

AccessibleWP - Accessibility Toolbar plugin

The AccessibleWP accessibility toolbar plugin is a quick, reliable, and easy way to add functional accessibility features that the website user can control to your website.

This plugin adds an icon to the top right corner of the webpage.

When clicked, it opens a menu of options:

  1. Keyboard navigation
  2. Disable animations
  3. Contrast
  4. Increase text
  5. Decrease text
  6. Readable Font
  7. Mark Titles
  8. Highlight Links and Buttons

Divi struggles with some of these natively (read on below), but with this simple plugin a user with some visual and physical limitations can select settings that will make your library website more navigable to them.

To add this plugin to your website, see: https://training.librarieswin.org/website-101/plugins/#new-plugin.In Add New Plugin, search for: AccessibleWP (no space).

Click here to learn more

Note: this does not replace the backend work needed for screen readers and machine reading of your website. Images still need Alt+Text and links still need to be readable, etc.

Webpage Content Structure

Heading Structure

Plan Heading Structure Early

Ensure all content and design fits into a logical heading structure.

The heading structure is the outline of the content of a website. Headings are very important navigational markers for machine interpretation of visual appearance. Creating an outline structure for your page creates a logical structure for the website reader and listener to follow.

Example:

  • H1: My Favorite Recipes
    • H2: Quick and Easy
      • H3: Spaghetti
      • H3: Hamburgers
      • H3: Tacos
        • H4: Beef Tacos
        • H4: Chicken Tacos
        • H4: Fish Tacos
    • H2: Some Assembly Required
      • H3: Tuna Casserole
      • H3: Lasagna
        • H4: Vegetable Lasagna
        • H4: Beef Lasagna
    • H2: All-In
      • H3: Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce
      • H3: Sun Dried Tomato and Pine Nut Stuffed Beef Tenderloin

 

Tips:

  • Headings must use heading tags. Divi provides this tool under Design > Title Text in each module settings box.

Divi module heading text selection in design menu

  • Use headings only when they represent outline content. Heading text formatting should never be used as means of formatting text on a website simply for visual appeal. Divi offers options for selecting different text styles under Design -> Body Text.

  • Use bullet points for unordered lists and numbers for sequenced lists. The computer will read these to a listener.

 

Installing the AccessibleWP plugin will give the user the option to highlight all headings on a webpage although it doesn’t differentiate between heading sizes.

Heading Structure in a Wireframe Website Planning Guide

Here is an example of a “wireframe” webpage planning guide with heading structure defined with header tags. See below for the text version. Note that the headers don’t always appear in top-down order on the visual page, but they make sense when read aloud in the given order.


[h1] The Spooner Memorial Library is pursuing a building expansion project, supported by their strong 109-year history.

[paragraph] Since 1915, the building on the corner of High and Walnut Street has had a rich history; it has transformed from schoolhouse to basement to house, and finally, in 1962, a library.

[h2] Supporting the Community’s Growing Need

[paragraph] As of today, two space needs assessments have been completed and both suggest that the library should be at least 20,000 to 22,000 square feet (compared to the current 5,500 square feet) in order to meet the library’s and the community’s current and future requirements.

[h3] Want to share your opinion about the library’s expansion?

[paragraph] Click the button below to take the Building Expansion Survey.

Heading Structure Errors^

The most common heading structure error is when there is more than on H1 heading on a page.

In this example, the web design used formatting to arrange the name of the library, using the H1 header in two separate elements. A better practice would be to keep all of these together in a single element.

 

Website Readability

Contrast*

Contrast is the clarity and readability of text when paired with backgrounds of different colors. Text over an image is especially difficult.

Maximum contrast would be black text on a white background, or white text on black background.  But visually a website would be boring if it were all black and white.

WebAIM warns particularly about using shades of orange, yellow, and light gray. The Contrast Checker (https://webaim.org/resources/contrastchecker/) scores two paired colors based on lightness/darkness and size of text. There is a AA and a AAA rating for levels of compliance. 4.5:1 is a “passing” score.


The image below shows contrast checker results for white text (hex value #FFFFFF) on black background (hex value #000000) with a contrast ratio of 21 to 1 and passing both WCAG AA and WCAG AAA tests.

 

The image below shows contrast checker results for hex value #FFFFFF color white on hex value #8A8A8A hex value light grey background with a contrast a ratio of 3.45 to 1 and failing all WCAG tests.

Contrast errors - your website color palette

As new websites are built, we are testing the base website palette with the contrast checker from the very start. This has not always been the case, and contrast errors are a common failure on website accessibility scans.

Fortunately, this is one of the easier errors to address – but it does take time. Changing over website color schemes and branding is a project for the LEANWI website team.

Installing the AccessibleWP plugin will give the user the option to turn on a high contrast version of your website which also highlights links.

Use True Text (not images of text) and Alt+Text^

Machines cannot read text contained in an image (.jpg, .png, etc.), and often PDF documents are equally inscrutable. Perhaps with the improvement of AI, there may be a future in which an image of a poster with words on it can be read by a machine, but that is not today.

Click here to learn more

Note: I just discovered that in settings Microsoft Edge has added an accessibility tool to “Get image descriptions from Microsoft for screen readers which says, “If an image doesn’t have a useful description, Microsoft Edge will try to provide one for you.” 

I have not tested the effectiveness of this.

PDFs should be made with an accessibility program (usually a paid version of Adobe, for example) to assure they are machine-readable.

In addition, images are not always scalable, and can be very difficult to read on small mobile screens.

Try reading this poster on your phone:

Best practice all around is to always use typed text.

HOWEVER, images are worth 1,000 words is still true, and are still key to a visual experience on a website.

Alternative Text is the tool we use for helping a machine and those using screen readers to understand the visual content of the website.

Use of alternative text is covered in detail in this training document and video: https://training.librarieswin.org/website-training/alttext/

Adequate Font Size*

The default font size for your website is set in the Theme Customizer:

For most websites the size has been set two points larger than standard (16 pt instead of 14 pt). The Heading 1 text default size is 30 points.

The font size for individual Divi modules can be changed under the Design tab -> Body Text or Heading Text:

Remember the heading text size will change depending which level of heading you are using:

 

Installing the AccessibleWP plugin will give the user the three options for adjusting the font: increase text size, decrease text size, and select a readable font.

Website Navigation

Keyboard navigation*

Many of us are very used to using a mouse but navigating between links on a webpage by using the “Tab,” “Arrow” and “Enter” keys on the keyboard is essential for some who cannot manipulate a mouse. It can also be a convenient and efficient way for all users to navigate, and occasionally necessary if a piece of hardware breaks.

But knowing where your cursor is on the screen when tabbing is a necessary visual feature. Learn more from WebAIM: https://webaim.org/techniques/hypertext/#keyboard

Try navigating your website using only the “Tab” key. Often the only way to know where you are on the page is the navigation bar the bottom of the browser. Note in the image below the only indication the active “cursor” location on the webpage is “Resources” is that the resources link is indicated at the bottom of the page.

Unfortunately, this is not a “native” feature to WordPress and Divi. This is one of the frequent errors you will see when you use an accessibility scan on your site. The LEANWI website team is working to integrate this into standard website design as new websites are built and will look at retrofitting older websites as we learn more.

Installing the AccessibleWP plugin will give the user the option to enable keyboard navigation which makes the active link/cursor location visible.

 

ARIA errors

ARIA (Accessible Rich Internet Application) is an way of communicating the role of a link or element on your website. This is something hidden in the HTML code but helps a machine interpret an element’s function which might be obvious from a visual perspective but needs code to describe on the backend.

ARIA errors are common in website accessibility scans. In some cases these errors may indicate a broken link, as was the case with this “Browse New Titles” anchor link on a webpage. This was easily fixed by updating the link.

In many cases library websites have modules (text, blurb, etc.), that link to something else. Their “role” is as fancy <button> with text or images, but is not indicated in the HTML – as seen in this error:

Failed element: <div class="et_pb_blurb_description" ><p>Computers<br>Wireless Internet<br>Photocopier<br>Web Games<br>Wisconsin Job Info</p></div>

Indicating this blurb module does not have an HTML role assigned:

If your website has the Divi Supreme Pro plugin installed and activated, there is a method for adding a custom attribute to a module. Email websitehelp@librarieswin.org if you would like this plugin installed and training on how to add ARIA labels.

Once the Divi Supreme Pro is added to your site, you will have the option to add “Attributes” under the Advanced tab in the module settings: 

We can add something similar for other common missing attributes such as:

  1. Include an element in the tabbing order:

Add to: Wrapper, Title: tabindex-0, Name: tabindex, Value: 0

  1. Exclude an element in the tabbing order:

Add to: Wrapper, Title: tabindex-1, Name: tabindex, Value: -1

  1. Add an aria-label:

Add to: Wrapper, Title:aria-label, Name: aria-label, Value: Opens on a new page

  1. Add a rel attribute:

Add to: Wrapper, Title:rel-noopener, Name: rel, Value: noopener

 

Other Website Features

Widgets, plugins, and "stuff"^

Beyond the Divi elements, add other features to your website with some caution. Extras we know are accessible:

  • Bibliocore, Aspen, Pika books carousels
  • Tockify calendar website plugin
  • My Calendar website plugin

Other sliders or elements added through plugins may not be. An example of a questionable feature is MetaSlider, which has limitations in both responsiveness and accessibility.

 

Website Animation*/^

Website animation, video, and audio should be used with caution. Most LEANWI websites only use the post slider for animation, but we have all encountered websites that try to jazz up their content or advertising with auto-playing videos or audio (“Where is that noise coming from???? Which tab??”) or try to make their content look fun with moving things.

Even regular users can find overly active websites distracting and annoying. So don’t do that.

Installing the AccessibleWP plugin gives the user the option to disable animations, including the post slider function.

Using Color to Convey Information^

Users may override or may not be able to see differences between colors on your website.

One example is a booking program that uses shades of green and red to indicate “available” and “reserved.” Red-green colorblindness affects about 8% of the population. Without text indications, these individuals would not be able to discern whether a room is available or not.

Also, if a user has enabled the “high contrast” setting on the AccessibleWP toolbar, they would not see these colors at all.

To test your site against various levels of colorblindness, try the ColorBlindly Chrome extension:

ColorBlindly Chrome extension: https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en&pli=1– simulate different kinds of color blindness on your site

Accessible Form Controls^

Divi includes the Contact Form module, and several libraries use an email campaign plugin with a newsletter signup.

The Contact Form module is very bare bones. Using more descriptive language in the form fields helps a user with assistive technology understand what each form field is asking for:

Note: in the below image of a newsletter signup form, the screen reader reads the * asterisk, but it does not read the correlating information that it is a required field:

subscribe to altoona public library newsletter *indicates required email address * [form field] first name [form field] last name [form field] subscribe <a href='#' class='small-button smallblue'></a>

How do I get to 100%?

We all are still learning about website accessibility. This Google doc is an evolving document capturing some of the basic and advanced things that can be done to increase accessibility scores on various platforms – both by the LEANWI website team and individual website managers. More is added as we learn more.

Getting your Divi page accessible – Google Doc

Accessibility Toolbar

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /srv/users/demo/apps/training-librarieswin-org/public/wp-includes/formatting.php on line 4715