search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.89k stars 11.88k forks source link

Dynamic text resize is not supported #11768

Open saqibmbhatti opened 1 month ago

saqibmbhatti commented 1 month ago

Feature Proposal

We're using chart JS and accessibility testing team has raised a defect that the the chart content (Axes labels, tooltips, legends etc.) do not respond if the text is resized using Settings > Appearance > Font Size which makes the chart fail WCAG success criteria 1.4.4

https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

I've created a quick example here: https://codepen.io/saqibmbhatti/pen/BaEeXQX

Having this feature would improve the accessibility of the overall library.

Your kind consideration to add this feature would be much appreciated.

Possible Implementation

No response

LeeLenaleee commented 1 month ago

All the text can be configured by the font's parameter in the config of the specific part that you want to change, in here you can increase/decrease the font size yourself. So you can comply to the spec

saqibmbhatti commented 1 month ago

Many thanks for your reply. Are you able to provide an example for it?

LeeLenaleee commented 1 month ago

https://www.chartjs.org/docs/4.4.0/general/fonts.html

This shows how to configure the font size for the legend labels, when you detect that the font size in windows has been changed you adjust options.plugins.legend.labels.size = newFontSize and then call chartVariable.update().