On-Site Search + ADA Compliance for a More Inclusive Internet

You may not be aware of the Americans with Disabilities Act (ADA). It is something that is commonly overlooked in an industry with so many factors to consider when developing user interfaces (UIs). However, it is a topic that is becoming increasingly detrimental to ignore and with good reason…

You most probably have come across the Web Content Accessibility Guidelines (WCAG), a set of guidelines created by the Web Consortium with the aim of making websites more accessible to those users with some degree of impairment. 

Both the ADA and WCAG have a very simple objective: to create and support a more inclusive web. 

It is common for companies with a strong web presence to focus on a select group of users under best-case scenarios however, this is often not reflective of the entire demographic and can mean some users are left in a position where they can not interact effectively with your site.

What is the ADA and why does it exist?

The ADA has been around for decades and is not limited to the internet. It was originally created with a broader objective of improving accessibility for things like physical access to buildings. More recently there has been a shift of focus onto how companies are dealing with the act, in an online context. 

Despite the fact that the ADA has been around for decades, it is surprising that a number of very large companies still fail to meet the requirements outlined by the act.  There are an increasing number of active lawsuits for companies that don’t comply. 

“In 2017 alone, 814 federal web accessibility lawsuits were filed according to the Bureau of Internet Accessibility. “

In the spirit of inclusion, here at Klevu we are in the process of making our entire product suite as  ADA and WCAG compliant as possible.

What aspects Klevu Search are subject to ADA and WCAG compliance?

Let’s take a closer look at which of these guidelines are applicable to Klevu and which elements will be enhanced in order to optimize compliance. 

Note: We have used the free achecker tool in order to validate the various Klevu components below against WCAG standards. 

Auto-suggest accessible by keyboard

One of Klevu’s core features is to provide more relevant and contextual search suggestions for on-site search results. This comes in various forms including:

• Auto-suggest UI.
• Popular and recent searches
• Personalized search suggestions
• Auto-suggest
• Category suggestions
• Pages suggestions
• Product suggestions

All aspects of these suggested searches should be fully navigable using the keyboard by using the tab key. 

Klevu already supports this type of navigation and will continue to for all new features in our roadmap. 

Web page regions 

Assistive technology is an important tool for many web users. It plays a critical role in allowing users to navigate a site that may otherwise be very difficult to interact with. However, assistive technology is heavily reliant on how the web page is constructed in order to work. One important part of this is Web Page Regions. 

Web Page Regions markup different regions of web pages and applications, so that they can be identified by the assistive technology and therefore allow users to move around the site effectively.

For Klevu, regions may be components such as the Category Navigation, Search Results and Filtering Facets. 

Images with alt tags

Alt tags have been around a long time and can be considered a basic part of web accessibility, yet they are often neglected when constructing a site. 

The principle is very simple, an alt tag provides text in place of an image when the image cannot be loaded for any reason. Instead, a descriptive piece of text, lets the user know what the missing image represents. Screen readers then use this alternate text and synthesize them to the user via audio. 

In the context of Klevu, this is provided for product images in search, category banners and any images provided to the end-user as a part of the Klevu suite. 

Web page element validation

Screen readers are software applications that allow impaired users to have content delivered via synthesized speech.  

Certain HTML elements are handled better than others by screen readers. For example, in particular, the ‘<b>’ (bold) element is not handled well. In its place, the ‘<em>’ or ‘<strong>` HTML elements should be used instead. 

Klevu is currently ensuring that any HTML elements provided by our integrations are optimized for screen readers.

Script must have a noscript section

Javascript has become an almost essential building block of the internet but it is still possible that end-users are on devices that either don’t support it or have it disabled for a variety of reasons. 

Both the ADA and WCAG specify that a <noscript> tag should be included for these users so that they are notified that Javascript is required on specific pages or sites. 

Klevu heavily utilizes Javascript and therefore we recommend developers to add the <noscript> on store for better usability.

Add tab index to input elements

Further to the earlier points on keyboard accessibility, HTML form elements should also be navigable using just the keyboard. This is achieved using the tab key however it is reliant on the HTML input elements supporting such functionality. 

All Klevu-powered components will support this in the near future (if they don’t already)

Anchor element target for the same page

The WCAG guidelines specify that links that open in the same browser window should use the target=”_self” attribute. This ensures that screen readers can properly handle such links.

Again, all Klevu-powered components will support this in the near future.

Summary

In summary, Klevu already supports the majority of these ADA and WCAG requirements however we are also dedicated to ensuring that these are constantly under review and enhanced as we improve our offering. 

We are striving to create a more inclusive web and are working to ensure that all Klevu products are part of this movement. 

We always welcome any feedback for lack of accessibility features, so if you have any concerns or recommendations then please let us know by contacting us via https://www.klevu.com/contact/. We would be happy to hear from you.