Thank you francoisaudic for the suggestions.
Are you new to web accessibility? Check my old posts and blog https://a11ytips.dev/
This blog is part of a series of making accessible modules/features:
For this blog I am using a Mac system/OS, and voiceover as a screenreader
Problem
When the user select an option from the drop-down then the related description will get populated on the screen.
We need to make it accessible for the screen readers. Screen readers must be able to identify the value and its associated description of the user's event.
Watch this video to see how screenreaders current experience is
What you will learn here
aria-live
tabindex
Screenreaders
Lets looks at the code
<select aria-label="Please select your prefer cuisine">
<option>Italy</option>
<option>India</option>
<option>America</option>
<option>UK</option>
<option>UAE</option>
</select>
<div id="message" class="description hide"></div>
const $ = document;
const SELECT = $.querySelector('select');
const MESSAGE_CONTAINER = $.getElementById('message');
const data = {
'Italy': 'You can order pasta, pizza, or any bread',
'India': 'You can order different flat-breads, curry, etc.',
'America' : 'Fancy some burger?',
'UK': 'What about fish & chips, or tea?'
}
const onChangeHandler = (e) => {
const selectedvalue = e.target.value;
if(data?.[`${selectedvalue}`]){
MESSAGE_CONTAINER.innerText = data[selectedvalue];
MESSAGE_CONTAINER.classList.remove('hide');
}
else{
MESSAGE_CONTAINER.innerText = 'Sorry we are not serving this cuisine currently';
}
}
SELECT.addEventListener('change',onChangeHandler);
Solution
You will be amazed to see how easy it is to fix this issue. We just need a pinch of aria-live
, role
, focus
, and tabindex
.
We will do a total of 4 changes in the html
.
1) role="alert"
: This will help the assistive tools in identifying that the role of the DIV is 'alert'.
2) aria-roledescription="notification"
: This will help the assistive tools to give more details of the elements.
3) aria-live="polite"
: This will help the screenreaders to announce whenever there is any change. Here the change would be the inner text is getting updated.
4) tabindex=0
: Here once the screenreader will inform about the changes the focus of the keyboard will be a move to the region div.
<div id="message" role="alert" aria-roledescription="notification" class="description hide" aria-live="polite" tabindex="0"></div>
Watch this video to see how screenreaders experience is
If you liked this blog then do drop a like. Do you know I do have a newsletter? Subscribe here: http://tinyletter.com/hellonehha
Happy Learning!!
Top comments (4)
It looks pretty nice, but the "select" element lacks a label, and as you have said in your previous post, the "assertive" value for the "aria-live" attribute is "rude".
A "polite" value looks more appropriate and the role "region" could be completed with an "aria-roledescription" attribute with a value like "notification" for example.
Hey,
Oh!! yes. Thank you for highlighting missing 'label'.
let me explore on this -" role "region" could be completed with an "aria-roledescription" attribute with a value like "notification" for example."
I read about aria-roledescription. I decided to update the role to alert and initially I thought to add value - "Details about cuisine" but then changed it to 'notification' as "Details about cuisine" was looking like repetitive information + was not useful for screenreaders
Great friend