Refactoring legacy HTML forms to improve accessibility, but ARIA roles seem ineffective
I'm maintaining legacy code that I'm dealing with After trying multiple solutions online, I still can't figure this out..... While refactoring some legacy HTML forms in an application using Bootstrap 4, I aimed to enhance accessibility by implementing ARIA roles. I added roles such as `role="form"` and `aria-labelledby="formTitle"` to various elements. However, I'm noticing that screen readers are not picking up these designations as expected. For example, I've defined a form like this: ```html <form role="form" aria-labelledby="formTitle"> <h2 id="formTitle">Contact Us</h2> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required aria-required="true"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` I've tested it using NVDA and JAWS, but the screen readers don’t seem to announce the form title correctly. I also tried adding `tabindex="0"` to make sure all elements are focusable, yet the feedback remains unchanged. To confirm, I inspected the elements with browser accessibility tools and I can see the roles are there, but they don’t seem to influence the experience. Has anyone encountered a similar issue with ARIA attributes in Bootstrap? Are there better practices for ensuring compatibility? Any insights on debugging the ARIA roles or improving accessibility in this context would be much appreciated. Has anyone else encountered this? This is part of a larger application I'm building. What am I doing wrong? Is there a better approach?