CODEWITHSUNDEEP
javascripthtmlmodal-dialogaccessibilitytabindex
jini
jini

Reputation: 373

Does deleting the tabindex = '-1' attribute also affect web accessibility when the modal window is shown?

Is it an accessibility issue to add the tabindex = '-1' attribute only when the modal window is not exposed and to delete the tabindex attribute when the modal window is exposed? Naturally, I will add the tabindex = '-1' property again if the modal window is closed again and not exposed. I think there's no problem accessing the keyboard tab this way. Is there another problem?

Upvotes: 0

Views: 432

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

Assuming you are doing this to prevent people from accessing the modal when it is not active there is nothing wrong with what you are doing. You can safely add and remove the tabindex attribute on elements and screen reader software will cope with that just fine.

However I would recommend also adding aria-hidden="true" to the modal at the same time.

This is so that screen reader users don't jump to a h1-h6 (for example) within the modal as screen reader users also navigate by non-focusable elements, using shortcuts in their screen reader software.

Don't forget to toggle it to aria-hidden="false" when the modal is active!

In this instance you are not safe to delete the attribute, you must toggle it between false and true or you will cause accessibility problems with some screen readers.

Upvotes: 1

Related Questions