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>

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!!