Ensuring WCAG Compliance in a Cross-Browser Environment on Linux with ARIA Roles
I'm collaborating on a project where I'm working on a personal project and I'm sure I'm missing something obvious here, but During development of an accessible web application, I need to ensure that our ARIA roles are implemented correctly across different browsers on Linux. A recent audit flagged several areas where compliance with WCAG 2.1 could be improved, particularly when using roles like `alert` and `dialog`. To verify cross-browser functionality, I’ve been testing on Firefox, Chrome, and Edge (via Wine). The implementation looks like this: ```html <div role="alert" aria-live="assertive">This is an alert message.</div> <div role="dialog" aria-labelledby="dialogTitle" aria-modal="true"> <h2 id="dialogTitle">Dialog Title</h2> <p>This dialog requires user input.</p> <button onclick="closeDialog();">Close</button> </div> ``` In Firefox, the alert works perfectly, but Chrome seems to ignore it entirely when using NVDA as the screen reader. I’ve added a timeout to ensure the message is displayed using JavaScript: ```javascript setTimeout(() => { document.querySelector('[role="alert"]').innerText = 'New alert message!'; }, 500); ``` This helps, but I'm wondering if there’s a more robust way to ensure ARIA roles function consistently across all browsers. I’ve combed through various resources but haven’t found a clear solution. Community recommendations suggest using an accessibility testing tool like axe, but integrating this into our CI pipeline hasn’t been straightforward. Do you have any tips or best practices for ensuring that ARIA roles and properties are fully recognized across different browsers on a Linux environment? Additionally, what approaches do you recommend for using testing tools effectively in this context? I'm working on a application that needs to handle this. Has anyone else encountered this? For context: I'm using Html/Javascript on Windows. What am I doing wrong? This is for a REST API running on CentOS.