Accessibility: docs site alt text

[mirabtellegen]

Documentation Is:

• Missing or needed?
• Confusing
• Not sure?

Please Explain in Detail...

Summary

On the Chart.js documentation site, many images are not tagged with alt-text or aria labels. This poses an accessibility issue, as these images are not accessible without being able to visually understand the context and importance of the image. Some have good alt text or aria labels, and some have present labels but which are not descriptive.

Background

Per the ADA, sites should be accessible to all users. Those who use screen readers or other accessibility tools may rely on alt text describing images or graphics. This alt-text requirement is codified in the WCAG 2.0 from 2008, in Section 1.1.1 which states that any image or graphic other than those which are purely decorative or formatting should have alternative text which describes all information a user might glean from it visually.

Example of Good Alt Text

Good alt text would be concisely and completely describing the contents of an image. On the Chart.js site, this plot graph has great alt-text

<canvas id="v3perf" height="426" width="638" 
aria-label="Chart with 1 million data point" 
style="display: block; box-sizing: border-box; height: 213px; width: 319px;">
</canvas>

Aria Documentation Links

For image items, html alt-text would be in the below form:

<img class="chart-logo fade-in animation-delay__3" 
src="./img/chartjs-logo.svg" 
alt="Chart.js logo">

For non-image items like the canvas items used on the Chart.js site, alt-text can be added with aria-label attributes. More documentation on Aria can be found here.

Your Proposal for Changes

Itemized Issues

On the site, below are the images and potential alt-text.

No alt-text or aria-label:

1. Potential aria-label: "Lines demonstrating built-in Chart.js color palette"

2. Potential alt-text: "Blue Donut Open Source Icon"

3. Potential alt-text: "Yellow bar graph"

4. Potential alt-text: "Shield icon containing HTML brackets"

5. Potential alt-text: "Arrow icon demonstrating open in new window"

Blockers

I attempted to make these changes but I am getting an error running the docs site locally where I get ENETUNREACH and ETIMEDOUT errors on dependency installs when running pnpm run docs:dev, so I am opening an issue instead.

Example

No response

[LeeLenaleee]

This page is not hosted in the docs but in this repo instead: https://github.com/chartjs/chartjs.github.io

[mirabtellegen]

Thank you for that note and clarification, I am closing this issue and will look at that repo!