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!!
Top comments (0)