4

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>

unor
  • 92,415
  • 26
  • 211
  • 360
dkrasniy
  • 408
  • 5
  • 12
  • I went with https://www.accessibility-developer-guide.com/examples/tables/table-of-divs-experiment/ and their grid / gridcell roles for interactive tables. – Robin Wieruch Dec 01 '20 at 04:50

3 Answers3

4

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
0

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 nothing.

Why not semantic table?

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

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • Semantic tables are very difficult to style and make complex functionality with. Need the flexibility of DIVs but structure/accessibility of a table. – dkrasniy Apr 21 '18 at 20:26
  • (a) What do you mean difficult to style? SR doesn't need "style". (b) what desired outcome can you achieve with div's that you can't get from table's elements? if accessibility is on your mind remember that div carry no semantic value, they just clutter your HTML code. You should use them only when there is no better semantic solution and try to reduce their usage to the minimum. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure – A. Meshu Apr 21 '18 at 21:37
-1

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

Stel Dare
  • 53
  • 10