Presentation Role Examples

PLEASE IGNORE THIS PAGE FOR NOW: This page is WIP that is just a mixed up pile of copy/pasted content, a few forward looking paragraphs/notes, etc. It is not worth reading for any purpose at this time. Issue 182 describes the purpose of and tracks the work associated with completing this page.

The following examples explain the various effects of the rules for using role presentation by illustrating how they change a browser's accessibility tree.

Image Examples

When role presentation is applied to an image, the image is completely hidden from assistive technologies. In fact, in the case of image, role="presentation" is equivalent to aria-hidden="true". On the other hand, when a heading is presentational, the heading semantic is removed and the inner text of the heading is exposed as plain text. Illustrating these affects in terms of how they alter the accessibility tree reveals how these two results are entirely consistent. 

…
<h2>Other Histories of Architecture</h1>
<p>
  <a href="www.somewhere.com">Ancient Roman Architecture</a>
  <img src="spacer.png" role="presentation">
  <a href="somewhere.else.com">19th Century Italian Architecture</a>
  <img src="spacer.png" role="presentation">
  <a href="www.elsewhere.com">Modern Buildings more than 100 Years Old</a>
</p>
<h2>Modern Building Design</h1>
…

The resulting accessible tree is shown below. Note that none of the spacer <img> elements are present.

role="presentation" hides the image from the accessibility API and does not publish the alt attribute contents.

        <!-- 1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the contents. -->
<h1 role="presentation">Presentation role overrides Header role</h1>
<h1>Another header</h1>
<!-- 2. [role="presentation"] hides the image from the accessibility API and does not publish the alt attribute contents. -->
<img role="presentation" alt="This text will not appear in the Accessibility API" src="…">

The first header element is absent from the accessible tree for the above example, but its text appears. The second header element is present as a heading . The img element is not exposed at all:

Be aware that the markup <img role="presentation" alt="non-empty alt text"…> is in fact contradictory: Declaring a role of presentation says that the image is for layout, is decorative and meaningless, whereas the non-empty alt text implies that the image is meaningful. It is recommended that authors instead use empty alt text (alt="") where they use role="presentation".

Table example

        <!-- Layout table marked with [role="presentation"]. -->
<table role="presentation">
  <tbody>
    <tr> <td>Some text</td> <td><p>Paragraph</p></td> </tr>
    <tr> <td><a href="www.somewhere.com">Link text</a></td> <td><img src="meaningful.jpg" alt="meaningful image"></td> </tr>
  </tbody>
</table>

All table specific elements (table, tr, td, etc.) are eliminated from the tree by inheriting the presentation role, but other elements and textual content in the table cells are exposed: