Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/index.html

Last active October 2, 2019 12:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jensgro/3d43be4afa5379d8553e7639f8c5b26e to your computer and use it in GitHub Desktop.
Save jensgro/3d43be4afa5379d8553e7639f8c5b26e to your computer and use it in GitHub Desktop.
Download ZIP
Tabelle - ARIA mit JS
Raw
index.html
<table class="responsive-table responsive-table--5-4 responsive-table--linearised-60-40">
<caption>Das ist eine tolle Caption für eine Tabelle</caption>
<thead>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-column">
Überschrift 1
</th>
<th class="responsive-table__col-2 responsive-table__headdata-column">
Überschrift 2
</th>
<th class="responsive-table__col-3 responsive-table__headdata-column">
Überschrift 3
</th>
<th class="responsive-table__col-4 responsive-table__headdata-column">
Überschrift 4
</th>
<th class="responsive-table__col-5 responsive-table__headdata-column">
Überschrift5
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-row">
Headline Row 1
</th>
<td class="responsive-table__col-2 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 2
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-3 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 3
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-4 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 4
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-5 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 5
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
</tr>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-row">
Headline Row 2
</th>
<td class="responsive-table__col-2 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 2
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-3 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 3
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-4 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 4
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-5 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 5
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
</tr>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-row">
Headline Row 3
</th>
<td class="responsive-table__col-2 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 2
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-3 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 3
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-4 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 4
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-5 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 5
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
</tr>
<tr>
<th class="responsive-table__col-1 responsive-table__headdata-row">
Headline Row 4
</th>
<td class="responsive-table__col-2 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 2
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-3 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 3
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-4 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 4
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
<td class="responsive-table__col-5 responsive-table__data">
<div class="responsive-table__data-head">
Überschrift 5
</div>
<div class="responsive-table__data-content">
Inhalt
</div>
</td>
</tr>
</tbody>
</table>
Raw
script.js
// Original: http://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
function fixLinearizedTableARIA() {
try {
var allTables = document.querySelectorAll('.responsive-table');
for (var i = 0; i < allTables.length; i++) {
allTables[i].setAttribute('role','table');
}
var allRowGroups = document.querySelectorAll('.responsive-table tbody');
for (var i = 0; i < allRowGroups.length; i++) {
allRowGroups[i].setAttribute('role','rowgroup');
}
var allCells = document.querySelectorAll('.responsive-table td');
for (var i = 0; i < allCells.length; i++) {
allCells[i].setAttribute('role','row');
}
var allCells = document.querySelectorAll('.responsive-table__data-content');
for (var i = 0; i < allCells.length; i++) {
allCells[i].setAttribute('role','cell');
}
var allHeaders = document.querySelectorAll('.responsive-table__headdata-row');
for (var i = 0; i < allHeaders.length; i++) {
allHeaders[i].setAttribute('role','columnheader');
}
// this accounts for scoped row headers
var allRowHeaders = document.querySelectorAll('.responsive-table__data-head');
for (var i = 0; i < allRowHeaders.length; i++) {
allRowHeaders[i].setAttribute('role','rowheader');
}
// caption role not needed as it is not a real role and
// browsers do not dump their own role with display block
} catch (e) {
console.log("fixLinearizedTableARIA(): " + e);
}
}
// fixLinearizedTableARIA();
if (window.matchMedia("(max-width: 767px)").matches) {
fixLinearizedTableARIA();
}
Raw
style.css
/* just for demo purposes */
body { padding: 40px; }
/* ======== */
.responsive-table {
border: 0;
border-collapse: collapse;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.responsive-table,
.responsive-table tr,
.responsive-table th,
.responsive-table td,
.responsive-table tbody,
.responsive-table tfoot,
.responsive-table caption {
display: block;
}
.responsive-table thead {
display: none;
}
.responsive-table--linearised-60-40 .responsive-table__data-head {
flex: 0 0 60%;
width: 60%;
}
.responsive-table--linearised-60-40 .responsive-table__data-content {
flex: 0 0 40%;
width: 40%;
}
.responsive-table--linearised-30-70 .responsive-table__data-head {
flex: 0 0 30%;
width: 30%;
}
.responsive-table--linearised-30-70 .responsive-table__data-content {
flex: 0 0 70%;
width: 70%;
}
.responsive-table caption {
font-family: HelveticaNeue-CondensedBold, "Helvetica Neue LT W02_77 Bd Cn", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
font-size: 16px;
color: #333333;
margin: 0 0 8px;
}
.responsive-table__headdata-column {
padding: 16px;
}
.responsive-table__headdata-row {
background: #eeeeee;
padding: 16px;
border-bottom: 1px solid #b4b4b4;
text-align: left;
font-weight: normal;
}
.responsive-table .responsive-table__data {
padding: 0;
border: 1px solid #b4b4b4;
border-top: none;
display: flex;
}
.responsive-table__data-head {
border-right: 1px solid #b4b4b4;
}
.responsive-table__data-head,
.responsive-table__data-content {
color: #333333;
font-size: 16px;
padding: 12px 16px;
text-align: left;
}
.responsive-table tbody tr {
margin-bottom: 8px;
}
@media (min-width: 48em) {
.responsive-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
display:table;
}
.responsive-table tr {
display: table-row;
}
.responsive-table thead {
display: table-header-group;
}
.responsive-table tbody {
display: table-row-group;
}
.responsive-table tfoot {
display: table-footer-group;
}
.responsive-table col {
display: table-column;
}
.responsive-table colgroup {
display: table-column-group;
}
.responsive-table td,
.responsive-table th, .responsive-table__data {
display: table-cell;
}
.responsive-table caption {
display: table-caption;
}
.responsive-table .responsive-table__data,
.responsive-table .table_headdata-row {
padding: 12px 16px;
display: table-cell;
}
.responsive-table thead th {
border: 1px solid #b4b4b4;
}
.responsive-table td,
.responsive-table th {
text-align: left;
}
.responsive-table td:before,
.responsive-table th:before {
display: none;
}
.responsive-table__data-head {
display: none;
padding: 0;
}
.responsive-table__headdata-column {
font-size: 16px;
background: #eeeeee;
}
.responsive-table__headdata-row {
font-weight: normal;
background: #fff;
border-left: 1px solid #b4b4b4;
}
.responsive-table__data-content {
display: inline;
padding: 0;
}
.responsive-table--m-align-left {
text-align: left;
}
.responsive-table--m-align-right {
text-align: right;
}
.responsive-table--m-align-center {
text-align: center;
}
/* ======== Varianten von Tabellen mit 5 Spalten ===== */
/* Variante 1 */
.responsive-table--5-1 .responsive-table__col-1,
.responsive-table--5-1 .responsive-table__col-2,
.responsive-table--5-1 .responsive-table__col-3,
.responsive-table--5-1 .responsive-table__col-4,
.responsive-table--5-1 .responsive-table__col-5 {
width: 20%;
}
/* Variante 2*/
.responsive-table--5-2 .responsive-table__col-1 {
width: 40%;
}
.responsive-table-5--2 .responsive-table__col-2,
.responsive-table-5--2 .responsive-table__col-3,
.responsive-table-5--2 .responsive-table__col-4,
.responsive-table-5--2 .responsive-table__col-5 {
width: 15%;
}
/* Variante 3 */
.responsive-table--5-3 .responsive-table__col-1 {
width: 16.73729%;
}
.responsive-table--5-3 .responsive-table__col-2 {
width: 18.4322%;
}
.responsive-table--5-3 .responsive-table__col-3 {
width: 18.53814%;
}
.responsive-table--5-3 .responsive-table__col-4 {
width: 29.87288%;
}
.responsive-table--5-3 .responsive-table__col-5 {
width: 16.41949%;
}
/* Variante 4 */
.responsive-table--5-4 .responsive-table__col-1 {
width: 29.04%;
}
.responsive-table--5-4 .responsive-table__col-2 {
width: 30.36%;
}
.responsive-table--5-4 .responsive-table__col-3 {
width: 34.32%;
}
.responsive-table--5-4 .responsive-table__col-4 {
width: 51.612%;
}
.responsive-table--5-4 .responsive-table__col-5 {
width: 28.908%;
}
/* Variante 5 */
.responsive-table--5-5 .responsive-table__col-1,
.responsive-table--5-5 .responsive-table__col-2,
.responsive-table--5-5 .responsive-table__col-3,
.responsive-table--5-5 .responsive-table__col-5 {
width: 15%;
}
.responsive-table--5-5 .responsive-table__col-4 {
width: 40%;
}
}
.responsive-table--borderless {
border: none;
}
.responsive-table--borderless .responsive-table__data,
.responsive-table--borderless .responsive-table__headdata-row,
.responsive-table--borderless .responsive-table__headdata-column {
border: none;
}
.responsive-table--list-left {
border-left: none;
border-right: none;
}
.responsive-table--list-left thead td,
.responsive-table--list-left thead th,
.responsive-table--list-left tbody td,
.responsive-table--list-left tbody th {
border-left: none;
border-right: none;
}
.responsive-table--list-left .responsive-table__data,
.responsive-table--list-left .responsive-table__headdata-row {
border-left: none;
border-right: none;
}
.responsive-table--large thead td,
.responsive-table--large thead th,
.responsive-table--large tbody td,
.responsive-table--large tbody th {
padding: 26px 12px;
}
@media (min-width: 48em) {
[class*=.responsive-table--linearised'] .responsive-table__data-head {
display: none;
}
[class*=.responsive-table--linearised'] .responsive-table__data-content {
display: inline;
}
}
@media (min-width: 64em) {
.responsive-table--width-50 {
width: 50%;
}
.responsive-table--width-100 {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment