HTML Table Accessibility Issues with Screen Readers - ARIA Roles Not Resolving
I'm migrating some code and I'm stuck on something that should probably be simple. I’m working on a project that incorporates a complex HTML table to display data related to user interactions, and I'm facing issues with accessibility for screen readers. I have implemented ARIA roles and properties, but it seems that they are not being recognized properly by screen readers. Here’s the relevant part of my HTML: ```html <table role="table" aria-label="User Interactions Data"> <thead> <tr role="row"> <th role="columnheader">User ID</th> <th role="columnheader">Interaction Type</th> <th role="columnheader">Timestamp</th> </tr> </thead> <tbody> <tr role="row"> <td role="cell">001</td> <td role="cell">Click</td> <td role="cell">2023-10-01 10:00</td> </tr> <tr role="row"> <td role="cell">002</td> <td role="cell">Scroll</td> <td role="cell">2023-10-01 10:05</td> </tr> </tbody> </table> ``` However, when I test it using NVDA (NonVisual Desktop Access) and JAWS, it skips over the table entirely and doesn’t announce the headers or any rows correctly. I’ve tried using `aria-describedby` to reference a description for the table, but it hasn’t resolved the issue. My goal is to make sure that users utilizing assistive technologies can fully interact with this data. I’m currently using HTML5 and am following WAI-ARIA practices from the W3C. Is there a specific way I should structure my table or additional ARIA properties that I might be missing? Any advice on improving the screen reader experience would be greatly appreciated! Any ideas what could be causing this? For context: I'm using Html on Windows 11. Thanks in advance!