The joys of focus management and announcing changes

Setting the scene

We’re going to explore how two people could interacting with aspects of your web site or web application.

Mary has reduced movement. She uses a head switch (keyboard equivalent) and cannot use a mouse.

Hassan is a person who is blind. He uses a screen reader.

Focus management

For both Mary and Hassan, focus management helps them understand:

• What changes may have occurred in the UI.
• What they may have to do next.

If focus management is poorly managed, it can cause confusion or frustration.

Announcing changes

For Hassan, announcing all dynamic changes is also important.

Especially when buttons are used to trigger UI changes.

Let’s look at how some different scenarios could affect Mary and Hassan.

By the way, I will be asking for your answers!

I know it is late. It’s cold. You’d rather be at home in bed watching Netflix.

So, I have some incentives!

The first person who answers correctly in each case wins a mini Mars Bar.

Scenario 1: A form error

Image that Mary and Hassan have attempted to submit a form, but the form contains errors.

As soon as the submit button is activated:

Where should focus go?

There are two acceptable answers to this question.

Gimme your answer!

For simple forms, focus can go to the first error within the form.

* Forms with only two questions.

For more complex forms, focus should go to an error message above the form.

* Forms with more than two questions.

Story time

Some time ago, I observed Hassan trying to resolve multiple errors in a complex form.

Initially, he was taken to the first invalid field.

When he resolved the error, he hit the B key to take him directly to the submit button.

It took several cycles of this process to for him to realise the form had multiple errors.

If he has been sent to an error message above the form, he would have known the exact number of error messages.

Back to our question... As soon as the submit button is activated:

What should be announced?

For the simple form, three things shoulds be immediately annonced if focus goes to the first field that is invalid.

Gimme your answer!

For simple forms:

• The accessible name of the form control.
• The current state of the form control (via aria-invalid="true").
• Any relevant error message (via aria-describedby).

And for the more complex form, only one thing should be immediately announced.

Gimme your answer!

Content that informs the user that errors have occurred and possibly provides the number of errors.

Keep in mind, the list of links will not be immediately announced.

Scenario 2: A toast popup

Image that Mary and Hassan have successfully completed a process.

A toast notification animates into view from the bottom of the screen for a short period of time before disappearing.

Where should focus go?

Gimme your answer!

Ideally, toast notifications are for information that does not require user input.

For this reason, focus should not go to the toast notification.

Story time

Recently, I observed Mary interacting with a web app.

When the toast popup appeared, focus automatically shifted to the toast notification.

This was disconcerting as she was in the middle of doing a different task, and she was not given any option or warning.

Even worse, she then had to navigate back to her previous location.

When the toast popup appears... what should be announced?

Gimme your answers!

If the information is displayed on-screen, it is important enough to be made available to all users.

So, the information could be announced at the next graceful opportunity – using aria-live="polite".

Scenario 3: A date picker popup

Image Mary and Hassan have navigated through a date pickup popover and selected a date.

When they choose a date from the popup:

Where should focus go?

Gimme your answer!

Focus should return to the input.

What should be announced?

Gimme your answer!

When focus returns to the input, the date value should be injected.

So, the following should be announced:

• The accessible name of the form control.
• The current value of the form control (i.e. the chosen date).

Story time

I recently observed Hassan interacting with a date picker.

After choosing a date, focus was sent to the date picker icon rather than the input.

Hassan had no feedback to tell him the date had been successfully stored.

He repeated the process several times until he discovered the date had been correctly injected into the form field.

If focus had been sent to the input, he would have immediately known the process was successful.

Scenario 4: An accordion

Imagine that Mary and Hassan are navigating a vertical accordion.

They decide to select an accordion option to find out more.

When this action is triggered:

Where should focus go?

Gimme your answer!

Focus should remain on the button that triggered the action.

What should be announced?

Gimme your answer!

Remember, we never want Hassan to click something and have silence.

Hassan should be informed that the accordion option has now been expanded.

This can be acheived by dynamically switching aria-expanded="true".

<button aria-expanded="false" aria-controls="widget1">
  Show widget
</button>

<button aria-expanded="true" aria-controls="widget1">
  Hide widget
</button>

Story time

As before, I observed Hassan interacting with an accordion.

After triggering an accordion button, there was total silence.

That's when Hassan said:

Questions or discussion?