This content originally appeared on DEV Community and was authored by Neha Sharma
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:
- aria-label
- input type
- aria-live
- aria-role
All the demo is from Apple Mac and voiceover.
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>
Happy Learning!!
This content originally appeared on DEV Community and was authored by Neha Sharma
Neha Sharma | Sciencx (2021-12-08T16:20:53+00:00) How to fix the broken experience for Screenreader (Search field). Retrieved from https://www.scien.cx/2021/12/08/how-to-fix-the-broken-experience-for-screenreader-search-field/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.