HTML Semantic Tags Causing implementing Screen Readers in Firefox - Accessibility Confusion
Can someone help me understand I've been banging my head against this for hours. I'm stuck on something that should probably be simple... Hey everyone, I'm running into an issue that's driving me crazy... I'm currently working on a project where I'm using HTML5 semantic tags, like `<article>`, `<section>`, and `<aside>`, to improve accessibility. However, I've noticed that screen readers behave inconsistently in Firefox compared to Chrome. Specifically, when I use a combination of these tags, the screen reader reads out the content in a confusing order, which is not happening in Chrome. For example, I have the following markup: ```html <article> <h1>Main Title</h1> <section> <h2>Section Title</h2> <p>This is a paragraph in the section.</p> </section> <aside> <h2>Related Info</h2> <p>This is some additional information.</p> </aside> </article> ``` I tried testing with both JAWS and NVDA, and while JAWS reads the titles correctly, it mixes the order of content within the `<section>` and `<aside>` tags, while NVDA seems to skip the `<aside>` altogether unless I explicitly navigate to it. I've also made sure to include `role` attributes like `role="complementary"` for the `<aside>`, but it didn’t help. I verified that my Firefox and JAWS are both up to date (Firefox 116.0 and JAWS 2024). Is there a recommended way to structure these semantic tags to ensure better compatibility with screen readers across different browsers? Or is there a known scenario with Firefox's handling of these elements? Has anyone else encountered this? My development environment is Linux. Any ideas what could be causing this? I'm working with Html in a Docker container on Linux. Any examples would be super helpful.