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>

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>

1) We have added the role=search with form

<form submit="" role="search"></form>

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" />

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>

Watch the video of demo

Happy Learning!!