Aria-labelledby

If you can’t use a <label> (the <label> is connected to an <input> and nothing else), but want to make it clear that something is the label of something else - use aria-labelledby.

Let’s say you have two <aside> elements on your page. One is for the latest blog posts, while the other is for your rock band’s upcoming tour schedule.

<aside>
 <h4>Latest posts</h4>
 <ul>
  ...
 </ul>
</aside>
<aside>
 <h4>Upcoming gigs</h4>
 <ul>
  ...
 </ul>
</aside>

Firing up VoiceOver and hitting Ctrl+Alt+U will open the navigation rotor. This rotor collects information that comes in very handy. In our case we’ll focus on “Landmarks”. VoiceOver will identify two “complementary” landmarks.

You can select one and jump right to it. But you’ll have no idea what you’re jumping into. So we add aria-labelledby in combination with IDs to solve that problem.

<aside aria-labelledby="aside-posts">
 <h4 id="aside-posts">Latest posts</h4>
 <ul>
  ...
 </ul>
</aside>
<aside aria-labelledby="aside-gigs">
 <h4 id="aside-gigs">Upcoming gigs</h4>
 <ul>
  ...
 </ul>
</aside>

Assistive technology will now find a way to make a connection between an <aside> and its headline. VoiceOver will identify two “landmark” landmarks, but this time each landmark has a label. We now know where we’re jumping to.

Video example

To spice things up we’ll replace the h4s in our example with something else (here a dt within a dl). That’s because the aside is - per definition - not so important. Thus it doesn’t really need headlines. Also there are some SEO oracles out there claiming that too many headlines will be bad for your ranking. Thankfully we have the aria-labelledby!