WebAIM - Web Accessibility In Mind

E-mail List Archives

Focus reset

for

From: Sumit Patel
Date: Apr 16, 2023 10:38PM

Hai all,

I have come across a page where we have a group of buttons in the left
side and related contents will be updating in the right side based on
our selection in the left side. As we land on the page, no button is
selected. so, right side, we don't have any contents.
In the dom order, first focus goes to the left side contents then to
the right . so, it is fine .
I would like to know which way would be the right one to communicate
to the screen reader user that contents updated in the right side
after selecting any of the buttons

I could think of 3 ways.

1. Setting the focus to the start of the updated contents after
selecting any of the buttons

But, I don't think this is the right way . Because, sighted
keyboard-only user won't be interested with this approach as they have
to do multiple shift+ tab always if they want to select other buttons
and see related contents.

2. Giving an offscreen instruction at the top of the group of buttons
and associating it with the group using aria-describedby . for
example: selection of any of these buttons add contents below

This works and does not create any trrouble for anyone. but, is it the
better way . not sure
Is it enough for a screen reader users ?

3. Providing an alert message as soon a the contents appears
I think this is the better one. I assume this gives clear information
to screen reader users .
but, what would be the right alert message ? we have a section heading
like "product features".
Is it sufficient if we make this heading get announced ? or do we need
to give any offscreen alert message like "contents are updated "

Please suggest me what would be the right solution


Thanks in advance,
Sumit .