Black Lives Matter. Please consider donating to Campaign Zero's mission of ending police violence in America.
https://www.joincampaignzero.org

[SOLVED] Datatables and Accessibility

I’m working on an app that will be accessed by users with visual impairments. I’m trying to make my app “accessible”, but I’ve found that my datatables fail accessibility checks for two reasons:

  1. The select column in my datatable does not have data in the header. This field is blank. I believe there is a way for me to add text to the header for the select column (e.g., “Select”), but I’m not sure how.

  2. The checkboxes in the select column do not have labels. Every form element is supposed to have a label as noted here: https://dequeuniversity.com/rules/axe/3.3/label?application=AxeChrome

Screenshot:
2019-11-08_1358

1 Like

I was able to add a header and then hide the header text by setting the font color to the same color as the background. I was also able to add titles to each of the checkboxes for row selection. These changes appear to satisfy the accessibility errors that were detected by Axe and WAVE, which are accessibility testing tools. I’ll probably have to manually edit the file after every upgrade, but I was able to resolve this by modifying the “…\site-packages\dash_table\async~table.js” file with the changes below…

Before:
("th",{key:"select",className:"expanded-row--empty-cell dash-select-header",style:{width:"30px",maxWidth:"30px",minWidth:"30px"}})

After:
("th",{children:"Select",key:"select",className:"expanded-row--empty-cell dash-select-header",style:{width:"30px",maxWidth:"30px",minWidth:"30px",color:"#454545"}})

Before:
("td",{key:"select",className:"dash-select-cell",style:{width:"30px",maxWidth:"30px",minWidth:"30px",textAlign:"center"}},o.a.createElement("input",{type:"single"===n?"radio":"checkbox",style:{verticalAlign:"middle"},name:"row-select-".concat(e),checked:T.a(t,r),onChange:function(){var e="single"===n?[t]:yo(T.a(t),go([t]),mo(t))(r);a({selected_rows:e,selected_row_ids:d.a(function(e){return i[e].id},e)})}}))

After:
("td",{key:"select",className:"dash-select-cell",style:{width:"30px",maxWidth:"30px",minWidth:"30px",textAlign:"center"}},o.a.createElement("input",{title:"checkbox",type:"single"===n?"radio":"checkbox",style:{verticalAlign:"middle"},name:"row-select-".concat(e),checked:T.a(t,r),onChange:function(){var e="single"===n?[t]:yo(T.a(t),go([t]),mo(t))(r);a({selected_rows:e,selected_row_ids:d.a(function(e){return i[e].id},e)})}}))

Thanks for this! We’ve raised an internal issue to make this more permanent or configurable in https://github.com/plotly/dash-table/issues/644.

Awesome! Much appreciated!