Creating an Unordered list (UL) and using aria-labelledby via Visual Editor (no coding)

Technical Questions
1

Hello there!

I am a Web Accessibility Engineer and I was wondering if there is a way in the Visual Editor to connect a Heading (h2) with a list of links (ul) via the builder.io editor without writing code? so that Screen Readers can use the ARIA attributes to describe the elements more semantically.
I could only find a “Columns” component but it doesn’t render as a UL list.

For example, I’d like to achieve this HTML semantics via Builder.io editor without coding:

 <h2 id="latest-products-id">Latest products</h2>

<ul aria-labelledby="latest-products-id">
  <li><a href="/foo">Product link 1</a></li>
  <li><a href="/foo">Product link 2</a></li>
  <li><a href="/foo">Product link 3</a></li>
  <li><a href="/foo">Product link 4</a></li>
  <li><a href="/foo">Product link 5</a></li>
  <li><a href="/foo">Product link 6</a></li>
</ul>

From the example above, the Screen Reader (i.e. Voice Over) will describe the HTML as follows:

List Latest Products, 6 items

Thank you.

2

I was able to sort this out by Making the “Grid” behave like a “UL” list and the child items to be “LI” modifying the generic “div” under “Custom Element Attributes” and also adding “custom attributes” such as “Id” and “aria-labelledby” via the Style Tab!!

I hope these tips help more Accessibility web devs too! :slight_smile:

Cheers,
Daniela.

1 Like
3

Hey @danigatt, glad you found a solution! The intended way to add ordered and unordered lists is through a “text” block, so if you want to interact with h1, ul or ol elements in a semantic way through the editor, the best way to do that is going to be through creating custom components.