Difference between revisions of "ARIA Presentation Role"

From Level Access Web Labs
Jump to navigation Jump to search
Line 3: Line 3:
 
The ARIA role="presentation" is used to obscure the structure of the element which contains the role but does not obscure the content of the element.  When the role is applied to structures like lists that have related child elements like list items that effect of role of presentation applies to these child items too.  Other child items that are not directly controlled by the list such as links would not have their role obscured.  Interactive elements should not have a role of presentation.
 
The ARIA role="presentation" is used to obscure the structure of the element which contains the role but does not obscure the content of the element.  When the role is applied to structures like lists that have related child elements like list items that effect of role of presentation applies to these child items too.  Other child items that are not directly controlled by the list such as links would not have their role obscured.  Interactive elements should not have a role of presentation.
  
 +
List Example
 
<html>
 
<html>
<div>
+
<nav>
<div id="d1">Choose a device type</div>
 
 
<ul role="presentation">
 
<ul role="presentation">
<div role="group" aria-labelledby="d1">
+
<li><a href="http://www.ssbbartgroup.com">SSB</a></li>
<li role="radio">PC</li>
+
<li><a href="http://amp.ssbbartgroup.com">AMP</a></li>
<li role="radio">Mac</li>
+
<li><a href="http://labs.ssbbartgroup.com">Labs</a></li>
<li role="radio">Tablet</li>
 
</div>
 
 
</ul>
 
</ul>
 +
</nav>
 +
</html>
 +
 +
Layout table example
 +
<html>
 +
<table>
 +
<tr>
 +
<td>Web Accessibility</td>
 +
<td>The practice of making web content available to users with disabilities.</td>
 +
</tr>
 +
<tr>
 +
<td>Environmental Accessibility</td>
 +
<td>The practice of making the built environment available to users with disabilities.</td>
 +
</tr>
 +
</table>
 +
</html>
 +
 +
Image Example
 +
<html>
 +
<div role="img" aria-labelledby="mycaption">
 +
  <img src="example.jpg" role="presentation" alt="">
 +
  <p id="mycaption">A visible caption labeling the image.</p>
 
</div>
 
</div>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 12:46, 27 March 2014

TODO: Complete radio buttons

The ARIA role="presentation" is used to obscure the structure of the element which contains the role but does not obscure the content of the element. When the role is applied to structures like lists that have related child elements like list items that effect of role of presentation applies to these child items too. Other child items that are not directly controlled by the list such as links would not have their role obscured. Interactive elements should not have a role of presentation.

List Example

Layout table example

Web Accessibility The practice of making web content available to users with disabilities.
Environmental Accessibility The practice of making the built environment available to users with disabilities.

Image Example

A visible caption labeling the image.