1 of 31

Using WAVE to Reduce Accessibility Errors in Primo VE, Primo NDE, and Esploro

Blake Galbreath

Asst Head Systems and Tech Ops

Washington State University

June 2, 2026

2 of 31

WAVE = suite of web accessibility evaluation tools

"The WAVE Chrome, Firefox, and Edge extensions allows you to evaluate web content for accessibility issues directly within your browser.

Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting. The extension can check intranet, password-protected, dynamically generated, or sensitive web pages.

Because the WAVE extension evaluates the rendered version of your page, styles and dynamically-generated content from scripting can be evaluated."

3 of 31

How to use the browser extension tool

Install the browser extension
Click on the browser extension in list of browser extensions
Control + Shift + U on a keyboard
Right-click > WAVE this page

4 of 31

General Tips

Move the Styles slider to OFF to more easily see where the problem is
Click on red Error button/image to reveal explanatory text (Reference) and underlying html (Code) behind Error
Close out items that are not specifically Errors, to focus on biggest problems

6 of 31

LibGuide Search Widget: Empty Form Label

7 of 31

What is it? (Search Widget Form Label)

Empty form label

A form label is present, but does not contain any content.

Example:

8 of 31

What to do? (Search Widget Form Label)

Several ways to fix empty form labels

Add text to a <label> element that is intended to be visible to sighted users
Add text to a <label> element that is intended to be used via screen reader only
Add aria-label to <input> element that is intended to be used via screen reader only

9 of 31

LibGuide Search Widget: Added "Content"

<label for="primoQueryTemp">Search the WSU Libraries:</label>

10 of 31

VE Search Results: Broken ARIA References

11 of 31

What is it? (VE Search ARIA References)

Broken ARIA reference

An aria-labelledby or aria-describedby reference exists, but the target for the reference does not exist.

Example: aria-labelledby=

alma99343862292801451titleForAccessibilityAvailabilityLine0
alma99343862292801451availabilityLine0
alma99343862292801451newWindowNote0

But only the first two have IDs defined elsewhere

12 of 31

What to do? (VE Search ARIA References)

I don’t believe it is possible to add IDs to VE page, so ticket

SF#08394689: sent to Development on 3/20

14 of 31

NDE Homepage: Contrast Errors

15 of 31

What is it? (NDE Contrast Errors)

Very low contrast (1:1)

Very low contrast between text and background colors.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

16 of 31

NDE Homepage: Contrast Error Locations

Next Discovery Experience BETA
Ask Anything
Advanced Search

Skip to Main menu links *role="presentation"*
Skip to Search bar links *role="presentation"*

17 of 31

Add Background Color

/*Search Bar Container WSU Crimson*/

.custom-search-bar-container {

background-color: #981e32;

}

Next Discovery Experience BETA
Ask Anything
Advanced Search

18 of 31

Skip links

/*Adjust skip links*/

.skip-h2-button[_ngcontent-ng-c2651061227] {

background-color: white !important;

color: black;

}

Skip to Main menu links *role="presentation"*
Skip to Search bar links *role="presentation"*

19 of 31

NDE Search: Empty Form Labels

20 of 31

What is it? (NDE Search Form Labels)

Empty form label

A form label is present, but does not contain any content.

Example:

21 of 31

What to do? (NDE Search Form Labels)

I don’t believe it is possible to add Content to label on NDE page, so filed a ticket

SF#10631063: only recently submitted

22 of 31

NDE Ask Anything: Missing Form Label

23 of 31

What is it? (NDE Ask Anything Form Label)

Missing form label

A form control does not have a corresponding label.

24 of 31

What to do? (NDE Ask Anything Form Label)

<label for="query" style="display: none;">Enter your query here</label>

Content is not empty this time! But is being hidden by "display: none"
Replace with <label for="query" style="visually-hidden;">Enter your query here</label>
SF#10631056

26 of 31

Esploro Homepage: Low contrast

27 of 31

What to do? (Esploro Low Contrast)

Unlike in Primo, customers have little control over styling in Esploro (can only choose a primary, secondary, tertiary color)

SF#08398081: "issue has been fixed and is scheduled to be part of the June 2026 release"
However, we elected to hide this section anyway

28 of 31

Esploro Search: 96 Empty Form Labels!

29 of 31

What to do? (Esploro Form Labels)

I don’t believe it is possible to add Content to label on Ex Libris page, so filed a ticket

SF#08389791: "issue has been fixed and is scheduled to be part of the June 2026 release"