Is your website and app search functionality accessible to the estimated 1 billion adults around the world who are living with a disability?

For instance, can users easily see the search bar and navigate to what they want to find using text alternatives? Do they have enough time to do what they came to accomplish on your site? Are your visuals easy on the eyes so that sight-impaired people can see them?

Web accessibility matters (a lot)

If you’re one of those people, it’s obviously important to you that disabled individuals can get access to the Web as well as abled individuals can. The more that sites can ensure that their services and products are accessible and ready to help all users, the better for folks with disabilities. (And the less likely it may be that some companies are sued for not adopting the standards.)

Types of disabilities

When designing accessible websites and interfaces, developers and designers should be mindful that users may have any number of disabilities, temporary limitations, and situational issues, including:

• Vision-related impairments (e.g., color blindness)
• Auditory impairments (e.g., being deaf or hard of hearing)
• Cognitive disabilities (e.g., dementia)
• Neurological impairments (e.g., photosensitive epilepsy, autism, seizure disorders)
• Speech impairments (e.g., stuttering)
• Physical impairments (e.g., a broken arm)
• Age-related impairments (e.g., various diseases)
• Lost glasses (temporary)
• Bright sunlight in the work space (situational)
• A slow Internet connection (situational)
• An environment in which audio descriptions can’t be played (situational)

Key players: W3C and ADA

To help users, companies are encouraged to meet the Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA) digital standards for websites and apps.

The WCAG guidelines are published and updated by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (www.W3.org), the organization dedicated to developing international standards for the Internet. The guidelines are regularly updated; for instance, the organization has recently moved from version WCAG 2.1 to WCAG 2.2.

The ADA set of guidelines applies to websites and other digital experiences, but ADA doesn’t specifically provide digital accessibility success criteria. ADA compliance for the Web essentially means conforming to the WCAG standards.

The principles of WCAG conformance

In terms of digital accessibility issues, the WCAG success criteria consists of four pillars. To be compliant with the accessibility guidelines, a website must be:

Perceivable

According to W3C, “Information and user interface components must be presentable to users in ways they can perceive…it can’t be invisible to all of their senses.” One example: enlarging text using reflow helps people with impaired vision avoid issues with scrolling, clearly see characters, and successfully read content. Another helpful step: provide additional input modalities (e.g., a pointer) instead of just a keyboard.

Operable

Digital accessibility experts say users must be able to easily “operate” the components in the user interface, as well as successfully navigate.

Understandable

People must be able to comprehend the information as well as how the interface works. One W3C recommendation that helps with easy understanding is ensuring an appropriate reading level for all viewers. Other recommendations: make sure headings and labels can be easily understood, and that abbreviations aren’t confusing.

Robust

Sites should be structurally sound so that the content can be reliably interpreted, plus web standards need to be compatible with assistive technologies, both now and in the future.

How are companies doing?

The good news is that companies are increasingly adopting web accessibility standards. According to Forrester, 84% of companies are working on making their sites accessible.

What about your site? For instance, how accessible is your search functionality?

By ensuring WCAG compliance, you can make it easier for people of all ability levels to access your search engine, navigate your user interfaces, and get to the content they need. And as an added benefit, by supplying content in an accessible way, you could substantially broaden your market.

What goes into WCAG conformance?

As daunting as it may sound — and there can certainly be some challenges — conducting a WCAG compliance audit and making any needed changes may not be as complicated as you imagine. You can also break down the project into smaller tasks. To address vision-related disabilities, for instance, you can assess aspects of your website such as color contrast, animation, and transitions, and then make appropriate usability alternatives available.

Here’s a summary of some of the important aspects of accessibility to consider when building and managing a search interface. Each principle contains various guidelines, which can be implemented at one of three levels of conformance:

• Level A (lowest)
• Level AA (midrange)
• Level AAA (highest)

Level A is the minimum — better than nothing. Generally, organizations attempt to implement level AA. To reach the AAA level, an organization has to meet more stringent foreground and background color contrast requirements. 

If you’re building a custom search interface or reviewing a site search installation on your website, you want to ensure that your website search experience complies with WCAG 2.2 (or a newer version) AA standards, as well as meets accessibility standards for sight-impaired users.

Note: If your search interface or any other component of the website experience does not comply with the same level of conformance as the rest of your site, the site overall is relegated to the lower level of compliance.

How to ensure WCAG compliance for your search interface

You can start with this W3C quick reference guide to evaluate every aspect of your site search functionality for accessibility.

If you’re testing your site compliance using a Mac, an easy way is with the VoiceOver utility in Mac OS X.

If you’re testing compliance using Microsoft Windows, you can use Jaws (Job Access with Speech) or some other voice-assistance software.

User experience testing assesses:

• Accessibility for people with vision impairments
• Compatibility with accessibility software and assistive technologies
• HTML structure (voice-over makes sense and works properly only if the content is correctly structured, with the right descriptions and alt tags)

By testing, you’ll uncover many of the problems you need to address in order to achieve WCAG compliance.

First up: how’s your search bar?

The search bar or icon

How do you make the search bar or search icon on your site “viewable” for people who can’t see and thereby need to navigate with the help of a handy screen reader? You provide a label for the search field or an icon that the assistive technology can announce.

Your user search experience should:

Be predictable

For instance, the search bar should be positioned where people would expect to find it, which is generally in the upper right corner of the screen.

Be distinguishable with the use of color

When it comes to images, buttons, and icons, the color contrast ratio, such as between the text color and background color, should be sufficient for easy viewing and reading.

Incorporate alt-text attributes 

If you’re using a magnifying-glass (or some other symbol) search icon, the image should contain an alt-text=”Search” attribute in the <img> tag. An icon in the search bar should have an alt-text attribute to describe it since it’s non-text content. 

Aria-label attributes are used to provide labels for objects, which can then be read to the user. As shown below, a WCAG-compliant standard website search interface uses aria-label=”Search” within the button div class. 

Be keyboard accessible

Users should be able to navigate in and out of the search field using the Tab button on their keyboard:

Use the right focus order

Users with disabilities should be able to both search and navigate easily. One thing that facilitates a smooth journey: while they’re entering a query in the search bar, the keyboard focus should remain on the search bar so that, if needed, they can continue to enter or modify their query.

If they navigate using the Tab keyboard button, the focus order should be sequential and match the HTML/DOM. Ideally, they should be able to navigate with the keyboard from the search bar to their search results, then to pagination, then to the URL of the page in their browser, and then back to the web page.

Identify the purpose of the text input

When providing a search bar, the text input field should have a label identifying its functionality.

In this code for a website search bar, you can see the aria-label description “Search through the site content”:

How can you make search results more accessible?

You can set up your search results page in a variety of ways, such as in a grid or on a list, based on your website design and user-experience requirements. The standard way is a list, but the guidelines apply to any design you choose.

Ensure seamless keyboard access

When the search results are displayed, the user should be able to navigate through them using the Tab key. The description and status message (e.g., “149 results for ‘site search'”) are not accessible by using the Tab key. However, the screen-reader software or voice-over utility should be able to read the description and status message to the user, which makes all the necessary information available without interfering with the navigation.

Add a role=”status” message

When a user enters a search term, the content of the page is updated and the search results are displayed. The status message should be automatically picked up and read by the screen reader. By adding an aria status role (role=”status”) message to the code, you can allow the screen reader to announce the number of returned results.

Don’t worry about images in search results

Decorative images don’t contribute content to a web page, so the ones that appear in search results don’t need to be focused on when the user navigates through the results. These images also don’t require an alt attribute, as there’s no loss of information.

Provide keyboard-accessible pagination

If you use pagination to allow users to navigate through the search results, it should also be accessible and operable by using the keyboard.

Visually distinguish elements

For easy visibility, the color of the text in the title, description, URL, and other elements should have a contrast ratio of at least 4:5:1.

You can test your contrast ratio using this tool.

Provide adaptable functionality

Check the appearance of the search results in both portrait and landscape orientation on both desktop and mobile devices. The results text must be resizable up to 200% without any loss of content or functionality.

Optimize your overlay interface

If you’re displaying search results in an overlay window, the user should be able to navigate to the close button, and the close button (if it’s an icon) should have the correct aria-label or alt-description attribute.

Check your filter and facet accessibility

All your filters and facets should be accessible and operable from the keyboard and have the appropriate aria-label descriptions, along with the statuses of those features. 

About aria-label grouping controls

Improve your usability with better access

This sums up the key considerations for optimizing your site user experience for everyone. Ensuring website accessibility with your search functionality with the help of the WCAG standards is one of the most vital improvements you can make to let people of all ability levels fully find their way around on and experience your site in the richest way possible.

Looking for other ways to improve the user search experience on your site? Algolia can help. Let us know you’re interested in hearing about the benefits of great search and we’ll be happy to look at your site and make personalized recommendations.