I am currently using a mix of Javascript, jquery, html for a website, and I have a button which opens an overlay/modal and this overlay/modal has a close button.
To make the modal accessible using only keyboard, I am including aria-modal=“true” role=‘dialog’ in my html, the focus switches to the overlay and on the close button within the overlay, but it also causes the screen reader to automatically read the text content (headers with text) in my modal after close button, which I don’t want.
Would anyone have a suggestion around this? Below is my html, and I am calling focus() on my close button as the overlay opens. I have tried using aria-labelledby but then voiceover keys do not read the content at all.
<div aria-labelledby=“overlayHeading” aria-modal=“true” role=‘dialog’>
<button class=“close” aria-label=“close button”>
<img ***/>
</button>
<div class=“overlay-content”></div>
</div>```