Add support for Screen Reader

[manesvenom]

Is it possible to add ARIA-compatible feature for those charts in future version.

Reference source: https://blog.interactivethings.com/how-does-this-data-sound-945ed27a1a95

Currently, I could make use the onrendered function to add tabindex, aria-labelledby attribute to those generated points/bars for the Screen Reader to VoiceOver.

[netil]

Hi @manesvenom, thanks for the suggestion. Can you share your ARIA attribute adds code to take as reference?

[manesvenom]

<div id="sampleChart"> //sample chart bind to

//Assume we have the following data set
var sampleDates =['Mar-01','Mar-10','Apr-24'];   //for x-axis
var sampleValues =[1,2,3];  //for y-axis


var chart = bb.generate({
   bindto: '#sampleChart',
   bar: {
     width: { ratio: 0.6, max: 15 }
   },
   onrendered: function(){
      $('#sampleChart .bb-event-rect').attr('tabindex',1);  //make each histogram bar focusable
     var rootElement = d3.selectAll('#sampleChart svg');
     sampleDates.forEach(function(value, index,self){ //loop through each Date values
         var yValue = sampleValues[index];
        //append those tooltips as div element below the root svg
         rootElement.append('div').text('Sample Data '+yValue +'  '+value).attr('id','histogram-tooltip-'+index); 
        var histogram_bar = d3.selectAll('#sampleChart .bb-event-rect-'+index);
       //create the relationship between each histogram bar and the tooltip by adding aria-labelledby attribute
        histogram_bar.attr('aria-labelledby','histogram-tooltip-'+index);
      });
  }
});