Description
None role(role=”none”) in aria1.1 is nothing different from presentation role(role=”presentation”) in aria1.0 and they both are one and the same. Presentation/none role to be used in order to hide the semantics to the assistive technology users. For some reason, authors/developers are getting confused with the term “presentation” as well as the intended meaning of presentation role. Many authors started thinking that both aria-hidden and presentation role are one and the same but it is not true. To put the things simpler, aria-hidden attribute is to hide the content from the assistive technology users whereas presentation role is to hide the semantics(role) from the assistive technology users. Aria-hidden attribute and presentation role are meant to serve the different purposes. In any case, let me not confuse you more about aria-hidden attribute over here and will cover aria-hidden attribute separately in the future blog posts.
To avoid all the confusions surrounded with the term “presentation”, aria1.1 introduce new role called none role. The term “none” itself conveys that element would not have any role and none is the synonym of presentation. The specification believes that the term “none” would not confuse the authors/developers any more. Till the support of none role is robust, authors are advised to use the presentation role only. When none role is applied then element semantics and any of it’s children semantics are going to be removed from the accessibility tree and this would be better understood in the coming sections. However, the content and the descendants elements are going to remain the same in the accessibility tree
The major difference between all other aria roles and the none role is that all other aria roles are used to convey the semantics whereas none role is to not to convey the semantics. The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type. You might be wondering in which situations we might have to use none role. There are certain scenarios where reading the semantics to the screen reader users would create the problem in understanding the page structure. In addition, reading the semantics that are for layout purposes would result too verbose for the screen reader users to understand the things properly on the page. Let us discuss some of those scenarios
Scenarios to use role=”none”
- There is text with heading mark-up but this text is not heading visually, logically, and functionally on the page. Having heading mark-up to that text would create a problem in understanding the page structure to the screen reader users. Authors need to remove heading mark-up. In order to remove the heading mark-up, authors either can remove heading tag from the DOM or can use role=”none”
- There is image that is used for the decorative purpose. Screen readers must ignore the decorative images. For the screen readers to ignore the decorative images, authors either need to set alt as null(alt=””) or use role=”none”
- There is content with table mark-up but this table is for the layout purpose. Having table mark-up for that content would cause confusion to the screen reader users. Authors need to remove table mark-up. In order to remove the table mark-up, authors either can remove table tag and it’s children from the DOM or can use role=”none”. The important point to remember here is that table semantics and it’s children semantics(such as <th>, <tbody>, <tr>, <td> and so on..) are going to be removed from the accessibility tree when role=”none” is applied.
Author notes
- Authors must not use role=”none” on the interactive or focusable elements
- Authors must not use role=”none” on the element that has the WAI ARIA global attributes(ex: aria-haspopup). If authors do so then user agents ignore the presence of the role=”none”
- Authors can also set role as “none presentation” for backward compatibility
Sample code snippet
If given
<ul role=”none”>
<li> Sample Content </li>
<li> More Sample Content </li>
</ul>
Then assistive technologies like screen reader would not announce the list semantics