Hi,
I am trying to make my dash app more accessible, e.g. for users relying on screen readers. In order to test my app I use the Accessibility Inspector built into Firefox.
When analysing dash-table I got a lot of accessibility warnings from Firefox. These related to
a. the numerous event listeners included in the cells of the table
b. missing labels for the buttons “first page”, “previous page”, “next page”, “last page”
I was able to get rid of all these warnings by manipulating the code in “async-table.js” which can be found under “…\Lib\site-packages\dash”.
As I have no experience in javascript this took some trial and error.
If someone is interested in what I did:
a. removing event listeners in cells
Original code:
createElement(“td”,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Je(Object(n),!0).forEach((function(t){Xe(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Je(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({ref:“td”,children:this.props.children,tabIndex:-1,className:n,onClick:r,onDoubleClick:i,onMouseEnter:a,onMouseLeave:s,onMouseMove:l,onMouseOver:l ,style:c},t))}}
From this delete: ,onClick:r,onDoubleClick:i,onMouseEnter:a,onMouseLeave:s,onMouseMove:l,onMouseOver:l
New code:
createElement(“td”,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Je(Object(n),!0).forEach((function(t){Xe(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Je(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({ref:“td”,children:this.props.children,tabIndex:-1,className:n,style:c},t))}}
b. add aria-labels to buttons
The approach is the same for all four buttons. This is an example for the “previous-page” button:
Original code:
createElement(“button”,{className:“previous-page”,onClick:r.loadPrevious,disabled:!r.hasPrevious()},o().createElement(yu,{icon:“angle-left”})),o()
New code:
createElement(“button”,{“aria-label”:“Got to previous page”, className:“previous-page”,onClick:r.loadPrevious,disabled:!r.hasPrevious()},o().createElement(yu,{icon:“angle-left”})),o()
I am wondering if my approach is way to complicated. Maybe it is helpful for someone.
Furthermore I would like to suggest to include aria-labels for the buttons of dash-table by default.