Canvas accessibility options like aria-label

[danman01]

Hello all, I am looking at chart.js accessibility, and they say it is up the user to provide a canvas element with appropriate aria- attributes. I took a look at the various chartkick options and code and don't readily see anything related to generating the actual canvas element with something like passed-in html options:

So if I could do this, it would be ideal -- but perhaps there is a way and I am not seeing it?

<%= column_chart '...',
   canvas_html_options: { aria: { label: 'my chart title' } }
%>

Which would generate the added aria-label:

<canvas aria-label='my chart title' height='...' width='...'></canvas>

I do see we can customize the surrounding <div> with our own attributes by passing the html option ( which overrides original div, so we need to be sure to construct it carefully ), and perhaps just adding aria-* there is fine. But is it possible to access the canvas element, or will this need to be implemented?

Thanks for reading and for working on this great library!

[ankane]

Hi @danman01, one way to currently do this is:

<div role="img" aria-label="my chart title"><%= column_chart data %></div>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Img_role