Accessibility: Add proper support for aria-labelledby

Feature Requests / Improvements
1

In some cases, aria-labelledby provides better accessibility than aria-label.

For example, consider a job listing where we want to create a semantic connection between a “Read more” link and its corresponding job title:

<div class="job-1">
    <h4 id="job-title-1">Programmer</h4>
    <a>
        <span id="button-text-1">Read more</span>
    </a>
</div>

We need the ability to establish a connection between the <a> element and the <h4> element using aria-labelledby.

The enhanced code would look like this:

Note: The sr-only class with “opens in a new tab” text is added because it’s required when links open in new tabs.

<!-- First job -->
<div class="job-1">
    <h4 id="job-title-1">Programmer</h4>
    <a aria-labelledby="button-text-1 job-title-1 info-text-1">
        <span id="button-text-1">Read more</span>
        <span id="info-text-1" class="sr-only">(opens in a new tab)</span>
    </a>
</div>

<!-- Second job -->
<div class="job-2">
    <h4 id="job-title-2">Designer</h4>
    <a aria-labelledby="button-text-2 job-title-2 info-text-2">
        <span id="button-text-2">Read more</span>
        <span id="info-text-2" class="sr-only">(opens in a new tab)</span>
    </a>
</div>
1 Like