ankane/chartkick

Canvas accessibility options like aria-label

danman01 opened this issue · 1 comments

danman01 commented

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 commented

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

  • 👍1