Tag: arial-label use for screen readers

ACCESSIBLE SEARCH: Using aria-label to Identify Site Search for Screen Reader Users

Posted on by Mary Gillen

A Row of Magnifying Glasses

As website designers and developers, we should always plan on using the native HTML methods of labeling items on a page.

Consider the humble website search form, seen on so many websites:

Website Search Form

It is easy for sighted users to understand that they can use the form to conduct a site search.

But what about visually-impaired folks who use screen readers to navigate a website? We have to provide them with a recognizable label for the search field that can be announced by a screen reader since the user cannot see the interface.

 Search form with Label

Issue

What if the designer doesn’t wants to place a visual label in the search form area in order to save space, yet still inform the screen reader users about the functionality of the search function?

Enter the aria-label.

ARIA (Accessible Rich Internet Applications), is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML. [SOURCE]

Solution

Here’s how to add an aria-label as an explicit invisible label to the search form code that can accommodate screen reader users:

<input role=”search” aria-label=”Search the site here” name=”Search”>
<input type=”submit” value=”Search”>

===

One-on-One Online Training: Learn How to Test Websites and Online Content for Accessibility: Are you a web developer, designer or content creator who needs to get up and running quickly on the basic rules of website accessibility and how it all relates to your website and its content?

Or maybe you already know the web design accessibility basics, but are stumped on how to fix your website and content so all is compliant.

Wouldn’t it be more practical if you could “learn by doing”…as in figuring out what needs to be fixed on your own website/content while you learn the WCAG 2.1 A, AA & AAA Guidelines?

Now you can through one-on-one online training with Mary Gillen.

Find out more about Mary Gillen’s “Learn How to Test Websites and Online Content for Accessibility” online training.

===