Table layout with UI builder - with accessibility standards

Daxin
Tera Expert

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!

 

0 REPLIES 0