Enhance accessibility by adding ARIA attributes to local content sections

[kris70lesgo]

Fixes

• Fixes [Feature] Enhance Accessibility: Add ARIA Attributes to Local Content #831 by @SisiVero

Description

Enhances accessibility by adding ARIA attributes to local content sections like forms, buttons, and navigation. This improves compatibility with assistive technologies such as screen readers.

Technical details

• ARIA attributes like aria-label, aria-describedby, and aria-labelledby were added to form elements, buttons, and other interactive components.
• Ensured consistent accessibility between global and local content sections.

Tests

1. Verify that all interactive elements have ARIA attributes.
2. Test with screen readers to ensure accessibility improvements.
3. Ensure the page functions normally without assistive technologies.

Screenshots

Checklist

• My pull request has a descriptive title.
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made.
• I added or updated documentation, if applicable.
• I verified that the project runs locally without visible errors.

Developer Certificate of Origin

1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.

Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or

(b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or

(c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it.

(d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved.

[kris70lesgo]

@TimidRobot @Shafiya-Heena @possumbilities pls review

[TimidRobot]

In addition to the code comments, please try to remove unnecessary changes from this pull request (PR). The size of this PR makes it difficult to review and that is exacerbated by the additional formatting changes, etc.

[possumbilities]

Hi @kris70lesgo Thank you for all this work!

I tried to add as many relevant comments as possible, but there are some patterns throughout that I think worth mentioning here.

Overall, I think there are some ARIA applications here that are useful, but I would strongly urge you to revisit your approach. ARIA is supposed to provide a layer on top of semantic markup and in many cases it isn't necessary with the right markup: https://www.w3.org/TR/using-aria/#rule1

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Additionally, this would be helpful to read through as well: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. For instance, native elements have built-in keyboard accessibility, roles and states. However, if you choose to use ARIA, you are responsible for mimicking the equivalent browser behavior in script.

There are multiple instances in this PR of duplicating features already present in sound markup, or avoiding correcting markup by adding aria instead.

Please review the approach and narrow the scope to only aria that is necessary and adds a layer of enhancement after relevant semantic markup considerations are achieved.

Additionally, there are several instances of a div (which is semantically meaningless) being turned into a section via a role of region, and having it attached to a relevant heading via aria. The same degree of meaning could likely be achieved by converting those divs to sections and then they should automatically gain relevant labelling via their child heading. That would be preferably to trying to use aria to skip fixing non-semantic div-soup. However, such a change might require significant styling adjustments to correct for and it might end up being a better cost-benefit analysis to use aria here temporarily to achieve better semantics with the by default non-semantic div.

I spotted a similar pattern attempting to use aria to turn divs into lists.

Please re-review these approaches.

[kris70lesgo]

Hi,@possumbilities @TimidRobot
Thank you so much for your thorough and insightful feedback—it was incredibly helpful in guiding the revisions. I’ve carefully reviewed the files, restored the necessary changes, and addressed all your comments and suggestions.

Your emphasis on prioritizing semantic HTML over ARIA has been a valuable learning experience. I’ve taken great care to replace unnecessary ARIA with native HTML elements wherever possible, ensuring accessibility best practices are met. For cases where ARIA remains in use, I’ve ensured it provides meaningful enhancements and does not duplicate built-in functionality.

I truly appreciate the time and effort you took to highlight these patterns and provide resources. It’s been a rewarding process to refine the approach based on your guidance, and I feel confident about the improvements made.

If there are any additional aspects you'd like me to revisit, please don’t hesitate to let me know!

Best regards,
@kris70lesgo