CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readersnvda
dkrasniy
dkrasniy

Reputation: 408

Accessible DIV table

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html

I am following the example provided by W3C for creating an accessible DIV table. I've added the appropriate role tags and attributes.

Will wrapping some of the cells in a div, break the accessibility of the table?

For example: Note where the div with "testClass" is placed.

<div role="table"
 aria-label="Students"
 aria-describedby="students_table_desc">
<div id="students_table_desc">
  Students currently enrolled in WAI-ARIA 101 for the coming semester
</div>
<div role="rowgroup">
  <div role="row">
    <span role="columnheader">
      First Name
    </span>
    <span role="columnheader">
      Last Name
    </span>
    <span role="columnheader">
      Company
    </span>
    <span role="columnheader">
      Address
    </span>
  </div>
</div>
<div role="rowgroup">
  <div role="row">
    <span role="cell">
      Fred
    </span>
    <div class="testClass">
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
    </div>
    <span role="cell">
      123 Broad St.
    </span>
  </div>
  <div role="row">
    <span role="cell">
      Sara
    </span>
    <span role="cell">
      James
    </span>
    <span role="cell">
      Acme, Inc.
    </span>
    <span role="cell">
      123 Broad St.
    </span>
  </div>

</div>

Upvotes: 4

Views: 5842

Answers (3)

A. Meshu
A. Meshu

Reputation: 4148

Using divs (and spans) not giving screen readers a chance to index the valuable content so it will be ignored and the SR will read the text. So it won't break anything.

Why not semantic table?

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Upvotes: 0

slugolicious
slugolicious

Reputation: 17475

I've used ARIA tables before and while I prefer to use native <table> elements, using the appropriate table roles works great as long as you have them all specified (table, rowheader, columnheader, row, cell). like your example does. The fact that you have some cells wrapped in a <div> for styling purposes makes no difference. Since your testClass <div> does not have a role, it will be ignored by the screen reader.

The cool thing about the ARIA table roles is that screen readers treat them as real tables so that ctrl+alt+arrow keys work when navigating through the table.

Note that NVDA on IE (currently) does not support the table or grid role, but it works on common assistive technology + browser combinations such as:

  • NVDA + Firefox
  • JAWS + IE/Firefox/Chrome
  • VoiceOver on iOS

Note: NVDA + Chrome does not support the table role but it does support the grid role.
NVDA + IE does not support either role.

Note2: The grid role should be used when the cells of the table are interactive (like a spreadsheet). The table role should be used when the cells in the table are static.

Upvotes: 4

Stel Dare
Stel Dare

Reputation: 53

No it wont break.I don't think it would break. It think it would work just fine

Upvotes: -1

Related Questions