title: Accessible DIV table
body: <p><a href="https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html" rel="nofollow noreferrer">https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html</a> </p>
  
  <p>I am following the example provided by W3C for creating an accessible DIV table. I've added the appropriate role tags and attributes.</p>
  
  <p><strong>Will wrapping some of the cells in a div, break the accessibility of the table?</strong></p>
  
  <p>For example: Note where the <code>div</code> with "testClass" is placed.</p>
  
  <pre><code>&lt;div role="table"
   aria-label="Students"
   aria-describedby="students_table_desc"&gt;
  &lt;div id="students_table_desc"&gt;
    Students currently enrolled in WAI-ARIA 101 for the coming semester
  &lt;/div&gt;
  &lt;div role="rowgroup"&gt;
    &lt;div role="row"&gt;
      &lt;span role="columnheader"&gt;
        First Name
      &lt;/span&gt;
      &lt;span role="columnheader"&gt;
        Last Name
      &lt;/span&gt;
      &lt;span role="columnheader"&gt;
        Company
      &lt;/span&gt;
      &lt;span role="columnheader"&gt;
        Address
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div role="rowgroup"&gt;
    &lt;div role="row"&gt;
      &lt;span role="cell"&gt;
        Fred
      &lt;/span&gt;
      &lt;div class="testClass"&gt;
        &lt;span role="cell"&gt;
          Jackson
        &lt;/span&gt;
        &lt;span role="cell"&gt;
          Acme, Inc.
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;span role="cell"&gt;
        123 Broad St.
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div role="row"&gt;
      &lt;span role="cell"&gt;
        Sara
      &lt;/span&gt;
      &lt;span role="cell"&gt;
        James
      &lt;/span&gt;
      &lt;span role="cell"&gt;
        Acme, Inc.
      &lt;/span&gt;
      &lt;span role="cell"&gt;
        123 Broad St.
      &lt;/span&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>