Introduction to Web Accessibility and Charts

Shawn Sandy (Ally.Cafe) ~ July 5, 2024

Creating accessible charts and graphs is essential to ensure that all users, including those with disabilities, can understand and interact with the data presented. Accessible charts comply with the Web Content Accessibility Guidelines (WCAG) and leverage ARIA (Accessible Rich Internet Applications) to enhance usability for screen reader users. This article will guide you through the relevant WCAG guidelines, ARIA roles, best practices, and provide practical examples for making charts accessible.

WCAG Guidelines for Charts

Relevant WCAG 2.2 Guidelines

Perceivable:
- Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content. For charts, this means including descriptive text or alt text for images and data visualizations.
- Guideline 1.3 Adaptable: Create content that can be presented in different ways without losing information or structure. For charts, ensure the data can be understood without relying solely on visual representation.
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content. This involves using sufficient color contrast and avoiding color alone to convey information.
Operable:
- Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. Ensure charts are keyboard navigable.
Understandable:
- Guideline 3.3 Input Assistance: Help users avoid and correct mistakes. Provide clear instructions and labels for any interactive elements within the chart.

ARIA Roles and Attributes

ARIA roles and attributes can be used to enhance the accessibility of charts:

role=“img”: Applied to the chart container to indicate it is an image.
aria-label: Provides an accessible name for the chart.
aria-describedby: References a more detailed description of the chart.
aria-hidden=“true”: Used on decorative elements within the chart to hide them from screen readers.

Best Practices for Accessible Charts

Provide Alternative Text: Ensure each chart has a concise alt text that describes the main point of the chart.
```
<img src="chart.png" alt="Bar chart showing sales data from Q1 to Q4 of 2023">
```

Use Descriptive Summaries: Provide a detailed summary of the chart data in text form, either directly on the page or linked.

<div role="img" aria-label="Sales Data Chart" aria-describedby="chart-desc">
    <canvas id="salesChart"></canvas>
</div>
<div id="chart-desc">
    This chart shows the sales data for the year 2023, with Q1 at $10,000, Q2 at $15,000, Q3 at $20,000, and Q4 at $25,000.
</div>

Ensure Keyboard Accessibility: Make sure users can navigate through chart elements using the keyboard. For example, using focusable elements for interactive parts.
```
<button aria-label="Toggle chart view">Toggle View</button>
```
Use High Contrast Colors: Ensure there is sufficient contrast between the chart elements and the background. This helps users with visual impairments distinguish different parts of the chart.

Screen readers interpret web content for visually impaired users. For charts, it is crucial that the data can be understood without visual cues. Popular screen readers include:

JAWS (Job Access With Speech): Compatible with Windows and most browsers.
NVDA (NonVisual Desktop Access): Open-source and works well with Windows.
VoiceOver: Built into macOS and iOS, providing accessibility across Apple devices.
Narrator: Integrated into Windows.

Code Examples

Simple Accessible Chart

Here is an example of how to make a simple bar chart accessible:

<div role="img" aria-label="Monthly Sales Bar Chart" aria-describedby="sales-chart-desc">
    <canvas id="monthlySales"></canvas>
</div>
<div id="sales-chart-desc">
    The bar chart displays the monthly sales for the year 2023, with January at $5,000, February at $8,000, March at $12,000, etc.
</div>

<script>
    // JavaScript code to generate the chart using a library like Chart.js
    var ctx = document.getElementById('monthlySales').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            datasets: [{
                label: 'Monthly Sales',
                data: [5000, 8000, 12000, 15000, 18000, 20000, 23000, 25000, 28000, 30000, 32000, 35000],
                backgroundColor: 'rgba(0, 123, 255, 0.5)',
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

Sufficient Techniques and Common Failures

Sufficient Techniques:

G94: Providing short text alternatives for non-text content.
G92: Providing long descriptions for complex images such as charts.
H37: Using alt attributes on images.

Common Failures:

F30: Failure to provide text alternatives for images.
F65: Failure to provide sufficient color contrast.
F89: Failure to ensure interactive elements are keyboard accessible.

Conclusion

Ensuring that charts and graphs are accessible is crucial for inclusivity. By following the WCAG guidelines, leveraging ARIA roles, and implementing best practices, you can create charts that are understandable and usable by all users. Remember to provide alternative text, detailed descriptions, and ensure keyboard accessibility to enhance the overall accessibility of your web content.

For further reading and resources, you can visit:

By adhering to these guidelines and practices, you will make your web content more inclusive and accessible to everyone.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue