Accessibility/pie-chart.html at gh-pages · haltersweb/Accessibility · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Accessible Table Pie Chart</title>
  <link rel="stylesheet" href="css/normalization.css" />
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/pie-chart.css" />
  <style>
    /* FOR TESTING ONLY.  Paired with the JS at the bottom of the page. */
    .pie-it .toggle::before,
    .pie-it .toggle::after {
      background-color: black !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
    <div class="page-wrapper">
    <h1>A CSS Pie Chart that is Simultaneously a Table</h1>
    <p>No SVG solution here.  Pure CSS. <a href="pie-chart-dynamic.html">See the dynamic pie chart page to see a JS version of this pattern.</a></p>
    <p>See below for known issues and possible solutions.*</p>
    <p><button type="button" id="togglePie">Toggle Pie/Table</button></p>
    <div class="aria-table" role="table" aria-readonly="true">
      <table class="container pie-it" data-widget="pie chart"  role="presentation">
        <caption><h2>Favorite flavors poll</h2></caption>
        <thead>
          <tr role="row">
            <th role="columnheader">Strawberry</th>
            <th role="columnheader">Chocolate</th>
            <th role="columnheader">Vanilla</th>
          </tr>
        </thead>
        <tbody>
          <tr role="row">
            <td class="wedge acute" role="cell">60</td>
            <td class="wedge obtuse" role="cell">230</td>
            <td class="wedge super" role="cell">430</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h2>Known problems and chosen solution</h2>
    <p>In FF with both NVDA and JAWS the absolutely positioned table data cells won't read.  Intead the content for the entire row is merged and read only under the first cell of the 2nd row. NVDA with IE reads fine.</p>
    <p>The table reads fine with in IE with both JAWS and NVDA.</p>
    <p>In VO with Safari (desktop) the table reads fine.</p>
    <p><strong>Best solution:</strong> supplement the table with ARIA.  Since FF supports ARIA 1.1 you can start using role="table", role="columnheader", role="row", and role="cell".  In addition, JAWS with IE and with FF work nicely with ARIA 1.1 role="table".  Note that 1) JAWS with FF doesn't read the caption automatically; 2) NVDA with IE doesn't work with ARIA 1.1 role="table" but that combination is not often used; 3) For the ARIA solution to work, role="table" must be in a div that wraps the table.  The table itself must have role="presentation".</p>
  </div>
    <div class="overlay"></div>
    <div class="block-screen"></div>
  </div>
  <script>
    /* FOR TESTING ONLY -- not part of the JS for the solution. */
    /* This changes the wedges black if you click on them. */
    var wedges = document.getElementsByClassName('wedge');
    Array.prototype.forEach.call(wedges, function(wedge) {
        wedge.addEventListener('click', function() {
            this.classList.toggle('toggle');
        });
    });

    /* Toggles between the pie and table css */
    document.getElementById('togglePie').addEventListener('click', function() {
      /* assigns the class to the table to apply the .pie-it css */
        document.querySelector('[data-widget="pie chart"]').classList.toggle('pie-it');
    });
  </script>
</body>
</html>