DEV Community

Neha Sharma
Neha Sharma

Posted on • Updated on

Dynamic List: lets make it accessible for the screen reader

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:

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

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>
Enter fullscreen mode Exit fullscreen mode
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);
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
francoisaudic profile image
francoisaudic • Edited

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.

Collapse
 
hellonehha profile image
Neha Sharma

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

Collapse
 
hellonehha profile image
Neha Sharma

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

Collapse
 
deepakjaiswal profile image
Sandeep

Great friend