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]

Hello,

That's an excellent and very important question. You've hit on a key limitation: while a repeater with a column layout can look like a table, it doesn't have the semantic HTML structure that screen readers require for accessibility. Your approach with ARIA roles is correct in theory, but as you found, it often fails due to the underlying component structure.

The Correct Approach: Use the Data Table Component

The standard and correct way to create an accessible, table-like layout is to use the Data Table component. It is specifically designed for this use case and handles the complex accessibility requirements for you.

• Semantic HTML: The Data Table component generates the correct HTML structure (<table>, <thead>, <th>, <tbody>, <tr>, <td>). This is what allows a screen reader to correctly identify rows, columns, and headers, providing proper context to the user.
• Built-in Accessibility: It automatically includes the necessary ARIA attributes and keyboard navigation support out-of-the-box, saving you from manual, and often incorrect, configuration.
• Interactivity: You can add interactive elements like checkboxes and links directly inside the data table by configuring the component's columns.

How to Implement This

1. Remove the Repeater: Delete the existing Repeater component and its nested Column layouts.
2. Add the Data Table: From the Component Library, drag and drop the Data Table component onto your page.
3. Configure Data: Set the data source for the Data Table to your data.
4. Add Columns: Configure the columns to match your data and add the necessary interactive components within each cell.

While manually building a table with a repeater feels more flexible, it's not the correct approach for accessibility. The Data Table component is the standard, supported, and most reliable solution for your use case.

I hope this helps!

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

[Daxin]

Thanks for the reply. By Data Table component are you referring to List component? 

Unfortunately that did not fit my use case as its not just showing as record list/ list view. 

[M Iftikhar]

I should clarify. The Data Table component in UI Builder is not the same as the List component.

• The List component is tied to a ServiceNow table and gives you a record list view, similar to the classic list layout.

• The Data Table component, on the other hand, is a more flexible grid/table layout. It is specifically designed for cases like yours where you want an accessible table structure but also need to include interactive elements (checkboxes, links, buttons, etc.) inside the cells.

That’s why I recommended the Data Table. It generates proper semantic table markup (<table>, <thead>, <tr>, <td>, etc.) and has built-in accessibility support that a Repeater + Column layout cannot provide.

If your use case requires a table-like layout with interactive content (not just a record list), the Data Table component is the standard and supported way to achieve this.

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

[Daxin]

Thanks for clarifying. 

However , I can't find that component, Could you point me to the documentation please. 

https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=name...