This is my first time tackling accessibility. I am using talkback on my phone to test accessibility of items. The issue I have is that if I have content in an anchor, it reads the entire thing once and then when you swipe it reads the individual text inside the anchor. Here's the code I have:
<ul>
<li class="relatedFeatured">
<a href="https://www.weather.com/" target="_blank" aria-labelledby="relatedLinks">
<div class="icon featuredIcon" aria-hidden="true"></div>
<div class="relatedFeaturedText" id="relatedLinks">
<strong>See the weather</strong>
<p>Visit and find information on the climate in your area.</p>
</div>
<span class="icon" aria-hidden="true"></span>
</a>
</li>
</ul>
I tried adding role=text like so,
<ul>
<li class="relatedFeatured">
<a href="https://www.weather.com/" target="_blank" aria-labelledby="relatedLinks">
<div class="icon featuredIcon" aria-hidden="true"></div>
<div class="relatedFeaturedText" id="relatedLinks" role="text">
<strong>See the weather</strong>
<p>Visit and find information on the climate in your area.</p>
</div>
<span class="icon" aria-hidden="true"></span>
</a>
</li>
</ul>
However, it still reads the items individually inside. The only other way I can think of is adding aria-hidden to that div, but not sure that is the proper way to go. Does anyone have any ideas as to what I need to correct?
I've tried the following using Chrome on a Samsung Galaxy S10 with TalkBack (Android 11):
<ul>
<li class="relatedFeatured">
<a href="https://www.weather.com/" target="_blank">
<div class="icon featuredIcon" aria-hidden="true"></div>
<div class="relatedFeaturedText" id="relatedLinks">
<strong role="presentation">See the weather</strong>
<p role="presentation">Visit and find information on the climate in your area.</p>
</div>
<span class="icon" aria-hidden="true"></span>
</a>
</li>
</ul>
So, by using role="presentation"
on the <strong>
and <p>
tags, TalkBack only reads the text inside the <a>
tag, and not as individual text items. I also removed the aria-labelledby
attribute as it's redundant, given that the text inside the <a>
tag is already picke up by screen readers.