Unchain My Inaccessibly-Labelled Heart

Screenshot-2022-12-07-at-9.47.45-AM.png

Suzy Naschansky from the HTMHell Advent Calendar:

All About Dragons

I like dragons. Blah blah blah blah blah.

Read more

See that aria-labelledby attribute? It chains two IDs from the markup, one for the heading (#article1-heading) and one for the link (#article1-read-more). What happens there is a screenreader will replace the existing semantic label between the link tags and use the content from both elements and announce them together as a single string of text:

Read more All About Dragons

I’m always sheepish when realizing there’s something I think I should know but don’t. This is definitely one of those cases and I’m thankful as all heck that Suzy shared it.

I was actually in a situation just recently where I could’ve should’ve done this. I always try to avoid a bunch of “Read more” links on the same page but coming up with different flavors of the same thing is tough when you’re working with something like a loop of 15 posts (even though there are resources to help). And if we need to keep labels short for aesthetic reasons — design requirements and whatnot — it’s even more challenging. The aria-labelledby attribute gives me exactly what I want: consistent visual labels and more contextual announcements for assistive tech.

And this is only a thing when the text you want to use for the accessible label already exists on the page. Otherwise, you’d want to go with aria-label and with the caveat that it’s purely for interactive elements that are unable to label things accessibly with semantic HTML.

If you are working in a CMS like WordPress (which I am), you might need to do a little extra work. Like when I drop a Button block on the page, these are the options I have to work with:

Unchain My Inaccessibly-Labelled Heart 1

Some nice options in there, but nothing to do with accessible labelling. If you’re wondering what’s buried in that Advanced panel:

Unchain My Inaccessibly-Labelled Heart 2
Close, but no cigar.

Instead, you’ll need to edit the button in HTML mode:

Unchain My Inaccessibly-Labelled Heart 3

But before doing that, you gotta add an ID to the heading you want to use. The Heading block has the same Advanced panel setting for adding an anchor, which’ll inject an ID on the element:

Unchain My Inaccessibly-Labelled Heart 4

Then you can go edit the Button block in HTML mode and add the accessible-labels ID as well as an ID for the button itself. This is an example of the edited markup:

Great! But WordPress just ain’t cool with that:

Unchain My Inaccessibly-Labelled Heart 5

You can try to resolve the issue:

Unchain My Inaccessibly-Labelled Heart 6

Le sigh. The Button block has to be converted to a Custom HTML block. Kinda defeats the whole visual editing thing that WordPress is so good at. I did a super quick search for a plugin that might add ARIA labelling options to certain blocks, but came up short. Seems like a ripe opportunity to make one or submit PRs for the blocks that could use those options.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Digital Loyalty & Rewards Card
for Your Business.

Subscribe and Enjoy
$99 Lifetime

We’ve decided to develop a stand-alone website for our digital rewards card platform. Signup today and claim your $99 lifetime account, when we launch.