DEV Community

Neha Sharma
Neha Sharma

Posted on

How to fix the broken experience for Screenreader (Search field)

Hey Folks!!

Do you know how screen readers perceive your code? How even a screenreader works?

Today I will show you the experience of screenreader users. I will highlight the issues in the app and how to fix them.

Let's consider an example: Header with brand logo, search input, and a button.

You will learn:

  1. aria-label
  2. input type
  3. aria-live
  4. aria-role

All the demo is from Apple Mac and voiceover.

Watch the demo here

Problem:

1) Screenreader is not able to recognize what field is it

2) Screenreader is not able to notify when the error message comes on the screen.

Let's dig into the code

<header>
    <h1>Brand Logo</h1>
    <form>
      <input placeholder="product name..." />
      <button id="search-button">Search</button>
     </form>
 </header>
 <div id="message" class="hide" class="search-errorMessage"></div>
Enter fullscreen mode Exit fullscreen mode

Lets fix the code

  <header>
     <h1>Brand Logo</h1>
     <form submit="" role="search">
       <input type="search" aria-label="Search" placeholder="Search items" />
       <button id="search-button" type="submit">Search</button>
     </form>
  </header>
  <div id="message" class="hide" role="region" class="search-errorMessage" aria-live="assertive"></div>
Enter fullscreen mode Exit fullscreen mode

1) We have added the role=search with form

<form submit="" role="search"></form>
Enter fullscreen mode Exit fullscreen mode

2) We have added the type=search and aria-label="search" this will help the screen reader users.

It is a must to have a label with every input tag. If the label is not there due to design then it is best to use aria-label for screen readers.

It is a must to add the correct attribute with the input tag. These attributes guide the screen reader's users on what the field is about.

<input type="search" aria-label="Search" placeholder="Search items" />
Enter fullscreen mode Exit fullscreen mode

3) We have added the role and aria-live. This will help screen reader users get notified as soon as the message change. (PS: I used JavaScript to add the dynamic content and change the visibility of the div)

aria-live notify the screen reader users of any dynamic content change. Here I have to use the value assertive which will announce all the notifications and pause other announcements (you can call it rude :) )

<div id="message" class="hide" role="region" class="search-errorMessage" aria-live="assertive"></div>
Enter fullscreen mode Exit fullscreen mode

Watch the video of demo

Happy Learning!!

Discussion (0)