Table layout with UI builder - with accessibility standards

[Daxin]

Hi,

I'm using UI builder to build a page that has a layout that looks like a table. The cells need to contain interactive elements like checkboxes, links, and text.
My current approach is to use the Repeater component to create the rows. Inside each row, I'm using a Column layout to arrange the cells.

Visually, this works perfectly. However, it fails accessibility standards because a screen reader doesn't announce the row and column headers or counts. It just reads the content without the table context.

I tried to fix this by setting ARIA attributes like role="row" and role="cell" on the components, but it seems the underlying HTML they generate isn't nested correctly for these roles to work. I also couldn't use the aria-owns attribute as it would been specific ids of the components to be included.

Is there a standard way to achieve an accessible, table-like layout using a repeater in? Is there a different component or technique I should be using?

Thanks!

[M Iftikhar]

Hi @Daxin ,

I’ve used the Rich Text component before for a similar use case where I dynamically bound data to render rows. Based on that, here’s how you can apply the same approach for your scenario.
https://horizon.servicenow.com/workspace/components/now-rich-text

Thanks & Regards,
Muhammad Iftikhar
If my response helped, please mark it as the accepted solution so others can benefit as well.