WCAG and Search: Developing an Accessible Search Experience

ADA stands for the American Disabilities Act, which is "a civil rights law that prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public." (https://adata.org/learn-about-ada).

WCAG stands for the Web Content Accessibility Guidelines (WCAG). These are the practical standards for the ADA – by creating a website that adheres to the best practices set in WCAG, you're helping your site be in-line with ADA standards. (https://www.w3.org/WAI/standards-guidelines/wcag/).

WCAG is not always black and white; its rules often have a variety of interpretations.

It can be frustrating to need to add another box to an already long SDK and Theme deployment checklist. However, at Yext, we feel strongly that Answers is accessible and available to all. By abiding by WCAG best practices, you'll not only ensure that everyone can find the truth about your brand, but also take a small step to make the internet a more inclusive place.

WCAG impacts each layer of an Answers experience: The core functionality and default layout, any added customization, and finally the integration itself. We'll walk through each layer and describe that impact.

This layer consists of elements that are customizable and unique per implementation. The Items that fall into this category are selecting colors that have sufficient contrast, defining descriptive alt-text for any images, descriptive labels for buttons and any custom HTML or interaction added beyond the library and the theme. At this layer, the responsibility for aligning with WCAG falls on the implementer.

Finally, there's the integration step, which dictates how Answers fits onto a page. For example, the page where you host Answers should correctly use semantic HTML (like a header and footer) and an H1 articulating the core purpose of the page. Depending on how you integrate, this area may be outside of Yext's scope.

The first layer of an Answers experience (built by the Answers Javascript Library and the Yext Hitchhikers Theme), are built with WCAG best practices in mind. You'll notice this throughout attributes in the Javascript library and elements in the theme.

As an example, here's our configuration for the DirectAnswer component.

<div class="direct-answer-container"></div>

ANSWERS.addComponent('DirectAnswer',

{ container: '.direct-answer-container',

//other attributes here

positiveFeedbackSrText: 'This answered my question',

negativeFeedbackSrText: 'This did not answer my question' })

In an Answers experience, you'll notice that the screen reader text controls the sr-only text for the thumbs up and thumbs down buttons in a direct answer:

We're always open to feedback on our library and WCAG approach. Feel free to post your questions and recommendations to the community.

• W3.org Quick Reference

• MDN Accessibility Docs

• How People with Disabilities Use the Web