Suzy Naschansky from the HTMHell Creation Calendar:
<h2 id="article1-heading">All About Dragons</h2>
<p>I like dragons. Blah blah blah blah blah.</p>
<p>
<a id="article1-read-more" aria-labelledby="article1-read-more article1-heading">Learn extra</a>
</p> See that aria-labelledby attribute? It chains two IDs from the markup, one for the heading (#article1-heading) and one for the hyperlink (#article1-read-more). What occurs there’s a screenreader will exchange the present semantic label between the hyperlink tags and use the content material from each parts and announce them collectively as a single string of textual content:
Learn extra All About Dragons
I’m all the time sheepish when realizing there’s one thing I feel I ought to know however don’t. That is positively a kind of instances and I’m grateful as all heck that Suzy shared it.
I used to be really in a state of affairs only recently the place I may’ve ought to’ve carried out this. I all the time attempt to keep away from a bunch of “Learn extra” hyperlinks on the identical web page however developing with totally different flavors of the identical factor is hard while you’re working with one thing like a loop of 15 posts (although there are assets to assist). And if we have to preserve labels quick for aesthetic causes — design necessities and whatnot — it’s much more difficult. The aria-labelledby attribute provides me precisely what I need: constant visible labels and extra contextual bulletins for assistive tech.
And that is solely a factor when the textual content you need to use for the accessible label already exists on the web page. In any other case, you’d need to go together with aria-label and with the caveat that it’s purely for interactive parts which might be unable to label issues accessibly with semantic HTML.
In case you are working in a CMS like WordPress (which I’m), you would possibly have to do some additional work. Like once I drop a Button block on the web page, these are the choices I’ve to work with:
Some good choices in there, however nothing to do with accessible labelling. For those who’re questioning what’s buried in that Superior panel:
As a substitute, you’ll have to edit the button in HTML mode:
However earlier than doing that, you gotta add an ID to the heading you need to use. The Heading block has the identical Superior panel setting for including an anchor, which’ll inject an ID on the ingredient:
Then you’ll be able to go edit the Button block in HTML mode and add the accessible-labels ID in addition to an ID for the button itself. That is an instance of the edited markup:
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a id="read-more-button" aria-labelledby="read-more-button heading-accessible-labels" class="wp-block-button__link wp-element-button" href="https://webaim.org/initiatives/million/">
Learn Report
</a>
</div>
<!-- /wp:button -->
</div>Nice! However WordPress simply ain’t cool with that:
You may attempt to resolve the problem:
Le sigh. The Button block must be transformed to a Customized HTML block. Kinda defeats the entire visible enhancing factor that WordPress is so good at. I did a brilliant fast seek for a plugin that may add ARIA labelling choices to sure blocks, however got here up quick. Looks like a ripe alternative to make one or submit PRs for the blocks that might use these choices.
