Search code examples
javascriptangularaccessibilitywai-ariajaws-screen-reader

Link-list JAWS feature (insert + F7) on dialog windows shows all background links

I use role="document" and Angular $modalInstance to implement dialog window (look at the picture).

And when I'm trying to use "Link List" JAWS feature (insert + f7) that described there, JAWS show list of all background links (Sign Off, Projetcs, .etc).

What I have to do to get links only from dialog window and ignore all background links?

Solution

  • You will have to disable all links outside from the dialog window.

    One quick way could be to set the aria-hidden attribute on the main container when the modal is opened, assuming that your modal does not belong to this container.

    <div aria-hidden="true">My background content here... </div>
<div>my modal here</div>

    This won't stop the user from using the tab key, but this would answer the question of not listing the background links when the modal is opened