如何防止在屏幕阅读器中阅读冗余文本？

Question

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">&#57409</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">&#58124</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">&#57409</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">&#58124</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?

Answer 1

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">&#57409</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">&#58124</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.