Using the presentation role

This technique demonstrates how to use the presentation role and describes the effect it has on browsers and assistive technology.

The presentation role is used to remove semantic meaning from an element and any of its related child elements. For example, a table used for layout purposes could have the presentation role applied to the table element to remove any semantic meaning from the table element and any of its table related children elements, such as table headers and table data elements. Non-table related elements should retain their semantic meaning, however.

Possible effects on user agents and assistive technology

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1: 

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#">Tab 1</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 2</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 3</a>
  </li>
</ul>

Working Examples:

Notes

ARIA attributes used

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources