Feature: Aria for accessibility

[lexoyo]

This is also a feature request here

ARIA (Accessible Rich Internet Applications) is a specification by the W3C that helps improve the accessibility of web content, especially dynamic content and user interface components developed with JavaScript, HTML, and AJAX. ARIA provides roles, states, and properties that can be added to HTML elements to make them more accessible to people with disabilities.

However, it's essential to understand that ARIA should not be used when there's a semantic HTML element that provides the same functionality. Using semantic HTML is always preferred because it's more robust and doesn't require additional ARIA roles or attributes. ARIA should be seen as a way to enhance non-semantic elements or provide additional information where semantic HTML falls short.

Here are some ARIA roles, states, and properties that are useful for accessibility and are not redundant with semantic tags. So my idea for this feature is to add only these to Silex properties:

1. Roles:

   • alert: Indicates an element that displays an important message in a manner that attracts the user's attention without receiving focus.
   • progressbar: Indicates an element that represents the progress of a task.
   • tooltip: Indicates an element that acts as a tooltip, providing a short hint or label for an element when the user hovers over or focuses on it.
   • tabpanel: Represents a container for the resources associated with a tab, where each tab is contained in a tablist.
   • application: Indicates that the element and its children are part of a web application and not a document.

2. States and Properties:

   • aria-expanded: Indicates whether a collapsible element is currently expanded or collapsed. Useful for dropdowns, accordions, etc.
   • aria-hidden: Indicates that an element and all its descendants are not visible or perceivable to any user.
   • aria-live: Indicates that an element will be updated, and describes the type of updates the user agents, assistive technologies, and user can expect from the live region. Useful for chat logs, notifications, etc.
   • aria-owns: Indicates an element's relationship to another element that's not a DOM descendant of the owning element.

3. Navigation:

   • aria-activedescendant: Used to manage focus within composite widgets like listboxes and grids.
   • aria-controls: Indicates the ID of an element (or elements) that can be controlled by the current element.
   • aria-labelledby and aria-describedby: Allow elements to reference other elements as their label or description, respectively.

I am still puzzled with this feature because while ARIA can enhance accessibility, it should be used judiciously. Overusing ARIA or using it incorrectly can make a site less accessible. Always test with actual assistive technologies and users to ensure that ARIA is enhancing and not hindering the user experience. Should we spend more time defining rules and things to help protect the users from missusing ARIA?