Accessible Fruits

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <button id="showTable" aria-expanded="false" aria-label="Data table">
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/23/Table_font_awesome.svg" alt=""> Table
    </button>
    <table tabindex="-1" summary="Table representation of chart." id="highcharts-data-table-0" class="hidden">
        <caption class="highcharts-table-caption hidden">Total fruit consumption</caption>
        <thead>
            <tr>
                <th class="highcharts-text" scope="col">Category</th>
                <th class="highcharts-text" scope="col">Strawberries</th>
                <th class="highcharts-text" scope="col">Mango</th>
                <th class="highcharts-text" scope="col">Blueberries</th>
                <th class="highcharts-text" scope="col">Kiwi</th>
                <th class="highcharts-text" scope="col">Grapes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="highcharts-text" scope="row">Ted</th>
                <td class="highcharts-number">3</td>
                <td class="highcharts-number">1</td>
                <td class="highcharts-number">4</td>
                <td class="highcharts-number">2</td>
                <td class="highcharts-number">2</td>
            </tr>
            <tr>
                <th class="highcharts-text" scope="row">Øystein</th>
                <td class="highcharts-number">2</td>
                <td class="highcharts-number">4</td>
                <td class="highcharts-number">1</td>
                <td...

CSS

.highcharts-figure {
    max-width: 950px;
    margin: 1em auto;
    position: relative;
}

#container {
    height: 450px;
    padding: 3px;
}

.highcharts-container:focus {
    outline: 3px solid #446299 !important;
}

.hint-button,
.sound-button,
.dlg-close,
#showTable {
    position: absolute;
    margin: 5px;
    display: flex;
    align-items: center;
    background: none;
    color: #333;
    border: 1px solid #888;
    border-radius: 6px;
    padding: 5px 20px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    right: 0;
    top: 4px;
    height: 1.8rem;
    z-index: 99;
}

button img {
    margin-right: 5px;
    width: 16px;
}

.hint-button:focus,
.sound-button:focus {
    outline: 3px solid #446299;
}

dialog {
    position: relative;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#highcharts-data-table-0 {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
}

#highcharts-data-table-0 thead {
    background-color: #f2f2f2;
}

#highcharts-data-table-0 th,
#highcharts-data-table-0 td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

#highcharts-data-table-0 th {
    color: #222;
    font-weight: 600;
    font-size: 0.85rem;
}

.highcharts-number {
    text-align: right;
}

.hint-button {
    right: 6.5rem;
}

.sound-button {
    right: 18.3rem;
}

.hidden {
    display: none;
}

JavaScript

const chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        marginTop: 70
    },
    accessibility: {
        screenReaderSection: {
            beforeChartFormat: '<h1>{chartTitle}</h1><p>Interactive bar chart showing total and detailed fruit consumption for 3 persons, with each person\'s total shown as a stacked bar composed of different colors to represent various fruits. Ted consumed 12 units, with a preference for blueberries, Øystein had the most at 13 units with a preference for mangoes, and Marita had 11 units, favoring strawberries.</p><p>There is 1 X axis showing persons, and 1 Y axis showing units of fruits consumed.</p><p>Use tab key to move between chart sections. Use left/right arrow keys to move between bars on the X axis. When on the bars, use the Enter key for more detail, and Backspace for less.</p><p>Sounds play as you navigate the bars. Higher pitched tones indicate higher values.</p>',
            afterChartFormat: ''
        },
        landmarkVerbosity: 'disabled'
    },
    lang: {
        accessibility: {
            svgContainerLabel: '',
            chartContainerLabel: ''
        }
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Total fruit consumption',
        align: 'left'
    },
    xAxis: {
        categories: ['Ted', 'Øystein', 'Marita'],
        accessibility: {
            description: 'Persons'
        }
    },
    yAxis: {
        title: {
            text: 'Fruits'
        },
        stackLabels: {
            enabled: true
        },
        reversedStacks: false
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        reversed: true
    },
    tooltip: {
        pointFormat: '<b><span style="color:{point.color}">●</span> {point.y}...