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

**URL:** <https://forum.builder.io/t/creating-an-unordered-list-ul-and-using-aria-labelledby-via-visual-editor-no-coding/565>\
**Category:** Technical Questions\
**Tags:** visual-editor\
**Created:** [April 8, 2021, 5:18am UTC](https://forum.builder.io/t/creating-an-unordered-list-ul-and-using-aria-labelledby-via-visual-editor-no-coding/565 "2021-04-08T05:18:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danigatt](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@danigatt](https://forum.builder.io/u/danigatt)\
**Post date:** [April 8, 2021, 5:18am UTC](https://forum.builder.io/t/creating-an-unordered-list-ul-and-using-aria-labelledby-via-visual-editor-no-coding/565/1 "2021-04-08T05:18:28Z")

</div>

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](http://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](http://Builder.io) editor without coding:

```auto
 <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.

---

<div class="post-metadata">

**Author:** ![danigatt](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@danigatt](https://forum.builder.io/u/danigatt)\
**Post date:** [April 13, 2021, 4:35am UTC](https://forum.builder.io/t/creating-an-unordered-list-ul-and-using-aria-labelledby-via-visual-editor-no-coding/565/2 "2021-04-13T04:35:57Z")

</div>

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! 🙂

Cheers,  
Daniela.

---

<div class="post-metadata">

**Author:** ![kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kara/32/80_2.png) [@kara](https://forum.builder.io/u/kara)\
**Post date:** [April 13, 2021, 11:24pm UTC](https://forum.builder.io/t/creating-an-unordered-list-ul-and-using-aria-labelledby-via-visual-editor-no-coding/565/3 "2021-04-13T23:24:31Z")

</div>

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.](https://www.builder.io/c/docs/custom-react-components)