How do I make the screen reader not say the list contains certain number of items?

Question

When I tab into the following structure, the anchor tag (link) is focused and the screen reader says, list with three items XYZ Anchor. Is is possible to make the screen reader not say "list with three items" and just say "XYZ Anchor"?

<ul class="xyz">
    <li class="abc">
        <span>AAA</span>
    </li>
    <li class="def">
        <a [href]="getLink(something)" target="_blank">
            XYZ Anchor 
            <span class="xyz">({{ getSomething}})</span>
        </a>
    </li>
    <li class="pqr">
        <button class="btn btn-link (click)="openSomething"">
            Something
            <span class="tko">({{ something }})</span>
        </button>
    </li>
</ul>

Answer 1

Is is possible to make the screen reader not say "list with three items" and just say "XYZ Anchor"?

Yes, don't use a list!

Being serious for a second it is really useful information for a screen reader user as they then know that there are 3 items and it will announce that they are at item "2 of 3" for example.

Ideally you want to leave this in place for things that are, indeed lists such as navigation links.

However if you do ever need to remove the semantic meaning from a list you would use role="none presentation" as an attribute on each list item.

This essentially says to a screen reader "treat this like a <div>, it has no semantic meaning, I am using it purely for layout.

Note I used role="none presentation". role="none" is the future version of role="presentation" but support is not great, by providing both (in that order) it will fall back to role="presentation" and still work in 99% of screen readers.

Your example with role

<ul class="xyz">
    <li class="abc" role="none presentation">
        <span>AAA</span>
    </li>
    <li class="def" role="none presentation">
        <a [href]="getLink(something)" target="_blank">
            XYZ Anchor 
            <span class="xyz">({{ getSomething}})</span>
        </a>
    </li>
    <li class="pqr" role="none presentation">
        <button class="btn btn-link (click)="openSomething"">
            Something
            <span class="tko">({{ something }})</span>
        </button>
    </li>
</ul>