Unchain My Inaccessibly-Labelled Heart

Suzy Naschansky's HTMHell Advent Calendar entry highlighted a clever accessibility technique: using the aria-labelledby attribute. This attribute links multiple existing elements to create a more descriptive label for screen readers. For example, a "Read more" link could be linked to a heading, resulting in the screen reader announcing "Read more All About Dragons," providing more context than "Read more" alone.

This is particularly helpful when dealing with multiple similar links, like in a list of posts. Maintaining concise visual labels while providing richer context for assistive technology can be a challenge. aria-labelledby elegantly solves this by leveraging existing text. It's crucial to remember that this only works when the desired label text already exists on the page. Otherwise, aria-label should be used, but only for interactive elements that cannot be labeled semantically.

Working within a CMS like WordPress presents additional hurdles. Standard blocks often lack direct aria-labelledby support. To implement this, you might need to switch to HTML mode. This involves adding IDs to both the target heading and the button or link, then using aria-labelledby to connect them. For example: <a aria-labelledby="button-id heading-id" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Read More</a>.

However, directly editing blocks in HTML mode within WordPress can sometimes lead to conflicts, particularly with pre-built blocks like the Button block. WordPress may refuse to render the custom HTML, requiring a conversion to a Custom HTML block. This unfortunately sacrifices the visual editing benefits of the platform. The lack of readily available plugins or block extensions to simplify ARIA labeling within WordPress suggests a potential area for plugin development or contributions to existing block libraries.

The above is the detailed content of Unchain My Inaccessibly-Labelled Heart. For more information, please follow other related articles on the PHP Chinese website!