title: Using Aria to make a div table accessible
body: <p><strong>Context:</strong> I have a div table that a client wants to be screen reader accessible like a  regular html table is using the table commands </p>
  
  <p><strong>Problem:</strong> Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. </p>
  
  <p><strong>Solutions:</strong> Only using div is it possible to make this accessible?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      .Table
      {
          display: table;
      }
      .Title
      {
          display: table-caption;
          text-align: center;
          font-weight: bold;
          font-size: larger;
      }
      .Heading
      {
          display: table-row;
          font-weight: bold;
          text-align: center;
      }
      .Row
      {
          display: table-row;
      }
      .Cell
      {
          display: table-cell;
          border: solid;
          border-width: thin;
          padding-left: 5px;
          padding-right: 5px;
      }
  &lt;/style&gt;
  &lt;title&gt;Div Table Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="Table" role = "grid" aria-readonly="true"&gt;
      &lt;div class="Title"&gt;
          &lt;p&gt;Example&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="Heading" role = "columnheader"&gt;
          &lt;div class="Cell"&gt;
              &lt;p&gt;Name&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "columnheader"&gt;
              &lt;p&gt;Symbol&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "columnheader"&gt;
              &lt;p&gt;Quantity&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Row" role = "row"&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;Bank of America corp&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;BAC&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;139.00&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Row" role = "row""&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;Ebay Inc&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;Ebay&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cell" role = "gridcell"&gt;
              &lt;p&gt;12.00&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>