aria-practices icon indicating copy to clipboard operation
aria-practices copied to clipboard

[discussion] where to put the focus on the modal

Open midvorak opened this issue 2 years ago • 2 comments

On the page of the Modal Dialog Example, the is an example with a button "Add Delivery Address". When we click on the button, the modal popup and the focus is placed on the first input. Although in this example, the title of the modal is the same that the button text, should we not put the focus on the title of the modal because it is not always that the button text would match the modal title and so people using screen reader my miss some info (example: if there is a description before the input)?

midvorak avatar May 20 '22 19:05 midvorak

There is no consensus about it as far as I know, and most solutions have pros and cons as none is a silver bullet. I’ve made it so a11y-dialog focuses the modal itself when opened. It felt like the less opinionated and the most adapted for all sorts of dialogs.

KittyGiraudel avatar May 20 '22 21:05 KittyGiraudel

Thank you for your quick and precise answer. To clarify what I might be an issue with this, below you will find an image of the modal in which I added a paragraph of instruction relative to the form inputs. As the focus is sent to the first input, the users of a screen reader won't have the information.

So I guess it depends on the context as in your current example, the title of the modal is the same than the button. Although I am worried developpers will copy-paste the solution and use it in an another context and then the users of screen reader will face a lack of important info. And so the UX and accessibility will be poor.

(Note: English is not my mother language. Sorry for mistakes, for example for "requiEred in the image below)

image

midvorak avatar May 21 '22 14:05 midvorak