In certain situations the content of the page is not shown when the page loads. The content is hidden from the page and on the users request the content is shown. This kind of behavior is generally available in tree structure, accordions etc. Providing content when user requests add enhanced user experience. In addition if the content author fails to intimate that the element has the behavior of expanding, user will lose the content associated with the expandable element. Providing appropriate role to intimate the user that the element has an action associated with it and providing current state (expanded or collapsed) is important.
Intimating the role of the element can be made available by native semantics’ of mark-up or using roles such as role link, role button or role treegrid. To let the users know the state of the element if it is expanded or collapsed aria-expanded is used. Aria-expanded has two possible values.
aria-expanded=’true’ intimates that the element is expanded and the content is visible.
Aria-expanded=’false’ intimates that the element is collapsed and need to expand to view the content.
Aria-controls can be used if the aria-expanded is not owned by the element that expands. aria-expanded can be used with scripting technologies such as JavaScript, dojo whenever required.
ARIA-expanded helps in minimizing the page scroll. On small screen devices such as mobiles and tablets this ARIA-expanded enhances user experience.
Example code
<p role=”link” aria-expanded=”false”>Now the content is hiddden</p>
<p role=”link” aria-expanded=”true”>Read the content below now</p>
<p>This paragraph of content uses expand collapse functionality with aria-expanded property. A ARIA role link is used to define the role of the expandable element.</p>
Example output
Read the following content using screen reader for better understanding.
Now the content is hiddden
Read the content below now
This paragraph of content uses expand collapse functionality with aria-expanded property. A ARIA role link is used to define the role of the expandable element. No scripting is provided to show the change from expand to collapse here , do not try to change the state in the example.