WCAG and Search: Developing an Accessible Search Experience

Author: Rose Grant, Associate Product Manager
Blog Date: November 2020

What’s WCAG and ADA? 💻

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.

Why Does This Matter? 🤗

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.

Answers and WCAG 🤝

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.

Customization

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.

Integration

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.

Core Functionality and Default Layout 🏛

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:

Feedback 📣

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

All Blog Posts

Determine Location Intent in a Search Engine

Max Shaw, VP Product

One of the most common use cases for a search engine is finding something by a "location". Here are some basic examples: Cardiologist near Green Bay, Notary near me, Restaurants open now. These are all pretty simple queries, but getting these to work in a search engine is much more complex than you might imagine.

4 Methods for Increasing Site Search Clicks

Rick Swette, UX Research

We know good search drives business impact. It increases conversions and transactions, reduces search bounce rate, and boosts overall customer satisfaction. So, how do we get more people to trust and use site search? We embarked on a study to find this out.

How to Measure the Success of Your Site Search

Basil Polsonetti, Data Insights

Most brands know that site search is a feature their website should have, but unless the site is dominated by e-commerce, it’s often relegated as a check-the-box task when building a new website.

The Danger in Document-Level Sentiment Analysis

Calvin Casalino, Senior Product Manager

In order for your feedback to become an actionable item to help businesses provide a better experience, they need a way to analyze the granular content of all of their reviews, at scale.

Deep Dive into Duplicate Suppression

Dee Luo, Product Manager

Brands know the importance of having accurate information across all the apps, maps, and directories where consumers are searching for information. In a perfect world, powering that brand data and managing each of these listings would be enough to ensure that consumers consistently get the answers they're searching for.

Yext Answers Algorithm Update: Milky Way

Max Shaw, VP Product

Yext Answers is constantly improving it’s search algorithm to provide more relevant results over time. Milky Way is the first official upgrade to the Answers Algorithm and includes a series of important upgrades to provide better search precision and recall.

GMB API Update - Dedicated Food Menus

Dee Luo, Product Manager

On August 24, 2020, Google launched version 4.7 of its Google My Business (GMB) API. This update includes enhancements to how your restaurant locations can sync and display food menus on Google.

Structuring Your Knowledge Graph

Jessie Yorke, Yext Administrator

In this post we are going to discuss strategy and give you some tools to effectively think about structuring your own brand's Knowledge Graph!

Welcome to the Hitchhikers Program

Liz Frailey, VP Developer & Admin Experience

Welcome to Hitchhikers! We are so excited to have you join our mission of creating amazing search experiences for brands of all sizes.

Introducing: Yext Answers Plugin for WordPress

Alex Barbet, Product

Businesses of all sizes use both WordPress and Yext to build amazing client experiences, and as more and more brands around the world add the Yext Answers bar to their WordPress powered sites, we wanted to provide a way to drive their time-to-value even faster.

Yext’s Fall ‘20 Release is Now Live!

Nick Oropall, Senior Product Marketing Manager

For those of you who are new to Hitchhikers — Welcome to Yext's new training platform & community! Hitchhikers will be the home for all of Yext's product and release updates moving forward so we encourage you to create a free user and check out the platform!

Meet the Hitchhikers Team: Alyssa Hubbard

Alyssa Hubbard

Alyssa Hubbard began at Yext in the Upward Rotational Program. Now she is full-time on the Hitchhikers team, working to build a platform to empower our community of Yext power users.

Yext Answers Algorithm Update: Andromeda

Allie Allegra, Senior Product Marketing Manager

We are constantly making improvements to the underlying Answers algorithm. Our latest algorithm release, Andromeda, includes cutting edge improvements that optimize the overall search experience. With this release, our algorithm now has the ability to search semi-structured data. You can now opt-in to access these improvements depending on your configuration.

WCAG and Search: Developing an Accessible Search Experience

Rose Grant, Associate Product Manager

What’s WCAG? WCAG stands for the Web Content Accessibility Guidelines (WCAG). WCAG is not always black and white; its rules often have a variety of interpretations.

Meet the Hitchhikers Team: Amani Farooque

Amani Farooque, Program Development Manager

Wonder what's behind the avatar for some of those people you see constantly on the Hitchhikers Community? My name is Amani Farooque and I work as a Program Development Manager at Yext, managing the Hitchhiker Platform and focusing on enhancing developer and administrator experience. Read more to learn more about me and get a behind-the-scenes glimpse of what maintaining the program entails!