Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main>
  <h1>Non-Table Mark-up Using ARIA Table Roles</h1>

  <p>
    If it is impossible to use table mark-up for some reason, ARIA roles can insert the semantic structure for screen readers. Some important notes:
  </p>

  <ul>
    <li>You must still create valid nesting structures with an overall wrapper, a wrapper for each visible row, and a wrapper for each data cell and column header.</li>
    <li>The author must still style the layout as browsers will not assign styles based on ARIA roles. I use CSS Grid below.</li>
    <li>If you can edit elements to include the needed ARIA roles, then it may be more efficient to re-write the original elements as table elements instead.</li>
    <li>Using native table elements will also reduce compatbility issues across browsers, assistive technology, and versions.</li>
  </ul>

  <h2>Standard ARIA Table</h2>

  <p>
    This uses CSS Grid to approximate the layout that comes with native tables. This works back to IE11 (with JAWS as well) but will require changing the column widths on a per-table basis to prevent overlap. Avoid hiding the text when it overflows.
  </p>

  <div role="table" class="table" aria-labelledby="Caption01">
    <div class="caption" id="Caption01">Books I May or May Not Have Read</div>
    <div role="row">
      <div role="columnheader">Author</div>
      <div role="columnheader">Title</div>
      <div role="columnheader">Year</div>
      <div role="columnheader">ISBN-13</div>
      <div role="columnheader">ISBN-10</div>
    </div>
    <div role="row">
      <div role="cell">Miguel De Cervantes</div>
      <div role="cell">The Ingenious Gentleman Don Quixote of La Mancha</div>
      <div role="cell">1605</div>
      <div role="cell">9783125798502</div>
      <div role="cell">3125798507</div>
    </div>
    <div role="row">
      <div role="cell">Mary Shelley</div>
      <div role="cell">Frankenstein; or, The Modern Prometheus</div>
      <div role="cell">1818</div>
      <div role="cell">9781530278442</div>
      <div role="cell">1530278449</div>
    </div>
    <div role="row">
      <div role="cell">Herman Melville</div>
      <div role="cell">Moby-Dick; or, The Whale</div>
      <div role="cell">1851</div>
      <div role="cell">9781530697908</div>
      <div role="cell">1530697905</div>
    </div>
    <div role="row">
      <div role="cell">Emma Dorothy Eliza Nevitte Southworth</div>
      <div role="cell">The Hidden Hand</div>
      <div role="cell">1888</div>
      <div role="cell">9780813512969</div>
      <div role="cell">0813512964</div>
    </div>
    <div role="row">
      <div role="cell">F. Scott Fitzgerald</div>
      <div role="cell">The Great Gatsby</div>
      <div role="cell">1925</div>
      <div role="cell">9780743273565</div>
      <div role="cell">0743273567</div>
    </div>
    <div role="row">
      <div role="cell">George Orwell</div>
      <div role="cell">Nineteen Eighty-Four</div>
      <div role="cell">1948</div>
      <div role="cell">9780451524935</div>
      <div role="cell">0451524934</div>
    </div>
  </div>

  <h2>ARIA Table with a Spanning Header</h2>

  <p>
    HTML tables natively support associating spanning headers with their associated rows and/or columns. This feature is not supported by other elements, so ARIA must be used to mimic some of these features.
  </p>

  <ul>
    <li>There is no replacement ARIA to create a relationship between spanning column headers (nor rows).</li>
    <li>The <code>&lt;div&gt;</code> element does not allow the <code>headers</code> attribute that is a feature of <code>&lt;td&gt;</code>.</li>
    <li>JAWS/IE11 will announce the spanning header with the first column it spans only.</li>
    <li>Adding <code>aria-labelledby</code> to each header-spanned cell results in double announcing in JAWS/IE11.</li>
    <li>You must add <code>aria-labelledby</code> to each <code>&lt;th&gt;</code> replacement that is not in the same starting column as the spanning <code>&lt;th&gt;</code> replacement, and its value must match the <code>id</code> of the spanning <code>&lt;th&gt;</code> replacement for JAWS/IE11 to read the fake header spans.</li>
  </ul>

  <div role="table" class="table" aria-labelledby="Caption02">
    <div class="caption" id="Caption02">(Column Spans) Books I May or May Not Have Read</div>
    <div role="row">
      <div role="columnheader"></div>
      <div role="columnheader"></div>
      <div role="columnheader"></div>
      <div role="columnheader" data-colspan="2" id="SpanHeader">ISBN Numbers</div>
    </div>
    <div role="row">
      <div role="columnheader">Author</div>
      <div role="columnheader">Title</div>
      <div role="columnheader">Year</div>
      <div role="columnheader">13</div>
      <div role="columnheader" aria-labelledby="SpanHeader">10</div>
    </div>
    <div role="row">
      <div role="cell">Miguel De Cervantes</div>
      <div role="cell">The Ingenious Gentleman Don Quixote of La Mancha</div>
      <div role="cell">1605</div>
      <div role="cell">9783125798502</div>
      <div role="cell">3125798507</div>
    </div>
    <div role="row">
      <div role="cell">Mary Shelley</div>
      <div role="cell">Frankenstein; or, The Modern Prometheus</div>
      <div role="cell">1818</div>
      <div role="cell">9781530278442</div>
      <div role="cell">1530278449</div>
    </div>
    <div role="row">
      <div role="cell">Herman Melville</div>
      <div role="cell">Moby-Dick; or, The Whale</div>
      <div role="cell">1851</div>
      <div role="cell">9781530697908</div>
      <div role="cell">1530697905</div>
    </div>
    <div role="row">
      <div role="cell">Emma Dorothy Eliza Nevitte Southworth</div>
      <div role="cell">The Hidden Hand</div>
      <div role="cell">1888</div>
      <div role="cell">9780813512969</div>
      <div role="cell">0813512964</div>
    </div>
    <div role="row">
      <div role="cell">F. Scott Fitzgerald</div>
      <div role="cell">The Great Gatsby</div>
      <div role="cell">1925</div>
      <div role="cell">9780743273565</div>
      <div role="cell">0743273567</div>
    </div>
    <div role="row">
      <div role="cell">George Orwell</div>
      <div role="cell">Nineteen Eighty-Four</div>
      <div role="cell">1948</div>
      <div role="cell">9780451524935</div>
      <div role="cell">0451524934</div>
    </div>
  </div>

  <h2>Standard ARIA Table Made from List</h2>
  
  <p>
    You may assume that each list will have a column header and then all the data in that column. That is not how it works, so tis may seem a bit counter-intuitive.
  </p>
  
  <ul>
    <li>Each row must be its own list.</li>
    <li>It won't live in another list item, though they all live under a single list item.</li>
    <li>The first list makes up the column headers.</li>
    <li>If each list represented a single column then you would have effectively rotated the table 90&deg; to put its axis on the side instead of across the top.</li>
    <li>This approach works in JAWS/IE11, but not other screen readers, so there is a chance over time JAWS support will wane.</li>
  </ul>

  <ul role="table" class="table" aria-labelledby="Caption03">
    <li class="caption" id="Caption03" role="presentation">(From List) Books I May or May Not Have Read</li>
    <li role="presentation">
      <ol role="row">
        <li role="columnheader">Author</li>
        <li role="columnheader">Title</li>
        <li role="columnheader">Year</li>
        <li role="columnheader">ISBN-13</li>
        <li role="columnheader">ISBN-10</li>
      </ol>
      <ol role="row">
        <li role="cell">Miguel De Cervantes</li>
        <li role="cell">The Ingenious Gentleman Don Quixote of La Mancha</li>
        <li role="cell">1605</li>
        <li role="cell">9783125798502</li>
        <li role="cell">3125798507</li>
      </ol>
      <ol role="row">
        <li role="cell">Mary Shelley</li>
        <li role="cell">Frankenstein; or, The Modern Prometheus</li>
        <li role="cell">1818</li>
        <li role="cell">9781530278442</li>
        <li role="cell">1530278449</li>
      </ol>
      <ol role="row">
        <li role="cell">Herman Melville</li>
        <li role="cell">Moby-Dick; or, The Whale</li>
        <li role="cell">1851</li>
        <li role="cell">9781530697908</li>
        <li role="cell">1530697905</li>
      </ol>
      <ol role="row">
        <li role="cell">Emma Dorothy Eliza Nevitte Southworth</li>
        <li role="cell">The Hidden Hand</li>
        <li role="cell">1888</li>
        <li role="cell">9780813512969</li>
        <li role="cell">0813512964</li>
      </ol>
      <ol role="row">
        <li role="cell">F. Scott Fitzgerald</li>
        <li role="cell">The Great Gatsby</li>
        <li role="cell">1925</li>
        <li role="cell">9780743273565</li>
        <li role="cell">0743273567</li>
      </ol>
      <ol role="row">
        <li role="cell">George Orwell</li>
        <li role="cell">Nineteen Eighty-Four</li>
        <li role="cell">1948</li>
        <li role="cell">9780451524935</li>
        <li role="cell">0451524934</li>
      </ol>
    </li>
  </ul>

  <h2>Standard ARIA Table with No Styles</h2>

  <p>
    This demonstrates how the semenatics are assigned even when styles are not. You can still navigate the table with the JAWS table navigation keyboard commands regardless of its appearance. This replacement table is coded using <code>&lt;div&gt;</code>s.
  </p>

  <div role="table" aria-labelledby="Caption04">
    <div class="caption" id="Caption04">(No Styles) Books I May or May Not Have Read</div>
    <div role="row">
      <div role="columnheader">Author</div>
      <div role="columnheader">Title</div>
      <div role="columnheader">Year</div>
      <div role="columnheader">ISBN-13</div>
      <div role="columnheader">ISBN-10</div>
    </div>
    <div role="row">
      <div role="cell">Miguel De Cervantes</div>
      <div role="cell">The Ingenious Gentleman Don Quixote of La Mancha</div>
      <div role="cell">1605</div>
      <div role="cell">9783125798502</div>
      <div role="cell">3125798507</div>
    </div>
    <div role="row">
      <div role="cell">Mary Shelley</div>
      <div role="cell">Frankenstein; or, The Modern Prometheus</div>
      <div role="cell">1818</div>
      <div role="cell">9781530278442</div>
      <div role="cell">1530278449</div>
    </div>
    <div role="row">
      <div role="cell">Herman Melville</div>
      <div role="cell">Moby-Dick; or, The Whale</div>
      <div role="cell">1851</div>
      <div role="cell">9781530697908</div>
      <div role="cell">1530697905</div>
    </div>
    <div role="row">
      <div role="cell">Emma Dorothy Eliza Nevitte Southworth</div>
      <div role="cell">The Hidden Hand</div>
      <div role="cell">1888</div>
      <div role="cell">9780813512969</div>
      <div role="cell">0813512964</div>
    </div>
    <div role="row">
      <div role="cell">F. Scott Fitzgerald</div>
      <div role="cell">The Great Gatsby</div>
      <div role="cell">1925</div>
      <div role="cell">9780743273565</div>
      <div role="cell">0743273567</div>
    </div>
    <div role="row">
      <div role="cell">George Orwell</div>
      <div role="cell">Nineteen Eighty-Four</div>
      <div role="cell">1948</div>
      <div role="cell">9780451524935</div>
      <div role="cell">0451524934</div>
    </div>
  </div>

</main>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  background-color: #eeeeee;
  font-size: 100%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

main {
  display: block;
  box-sizing: border-box;
  width: auto;
  padding: 1em 1vw;
  margin: 1em 1vw;
  color: #000;
}

ul.table, .table ol, .table li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.table {
  margin: 1em 0;
  border-collapse: collapse;
}

.table .caption {
  text-align: left;
  font-style: italic;
  padding: 0.25em 0.5em 0.5em 0.5em;
}

.table *[role="columnheader"],
.table *[role="cell"] {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
}

.table *[role="columnheader"] {
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-weight: bold;
}

.table *[role="row"]:nth-child(n + 2) {
  border-bottom: 0.01em solid rgba(0,0,0,.5);
}

.table *[role="cell"]:nth-of-type(2) {
  font-style: italic;
}

.table *[role="columnheader"]:nth-of-type(3),
.table *[role="cell"]:nth-of-type(3),
.table *[role="columnheader"]:nth-of-type(4),
.table *[role="cell"]:nth-of-type(4),
.table *[role="columnheader"]:nth-of-type(5),
.table *[role="cell"]:nth-of-type(5) {
  text-align: right;
}

/* CSS Grid Layout */

.table *[role="row"] {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20% 30% 10% 20% 20%;
  grid-template-columns: 20% 30% 10% 20% 20%;
}

.table *[role="columnheader"]:nth-child(1),
.table *[role="cell"]:nth-child(1) {
  -ms-grid-column: 1;
}

.table *[role="columnheader"]:nth-child(2),
.table *[role="cell"]:nth-child(2) {
  -ms-grid-column: 2;
}

.table *[role="columnheader"]:nth-child(3),
.table *[role="cell"]:nth-child(3) {
  -ms-grid-column: 3;
}

.table *[role="columnheader"]:nth-child(4),
.table *[role="cell"]:nth-child(4) {
  -ms-grid-column: 4;
}

.table *[role="columnheader"]:nth-child(5),
.table *[role="cell"]:nth-child(5) {
  -ms-grid-column: 5;
}

.table *[role="columnheader"]:nth-child(4)[data-colspan="2"] {
  background-color: rgba(0,0,0,.7);
  text-align: center;
  grid-column: 4 / span 2;
  -ms-grid-column-span: 2;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console