I am struggling to make the div with aria-label accessible.
<main>
<h1>Heading</h1>
<input type="text" placeholder="text">
<p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p>
<div role="region" aria-label="content summary">
summary
</div>
<button>Go back</button>
</main>
I tried aria-describedby and aria-labelledby, but those did not work either.
>Solution :
Without the tabindex attribute, a <div> element is not inherently focusable. This means that most screen readers, including VoiceOver, may not navigate to it.
Here’s how you can ensure that the VoiceOver reads the div:
<div role="region" aria-label="content summary" tabindex="0">
summary
</div>