Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

So from what I understand this works by displaying data on a JS canvas. How does that work for accessibility? Do screen-readers read the data as if it was an html table?


Hi, it does not use canvas. It uses HTML. Sure, DGXL contains one or two canvas elements, but they're used for measuring strings length and drawing cell background colors.

The actual values are all in HTML. The benefit is that you can use CTRL+F and values are found and selected. You can zoom the page and text will remain crisp.

The values are not in a <table> tag however. <table> values are sorted y,x (rows first, columns second). DGXL sorts values x,y (columns first, rows second). I have to admit that I am not sure what that means for screen readers: I am not an accessibility-expert at this stage. What I do know is that HTML is better than canvas by default in this regard.


Unfortunately screen reader support isn't great at the moment, but using HTML instead of canvas is definitely going to make it easier for you to improve. I'd encourage you to download the free NVDA screen reader (https://www.nvaccess.org/download/) and compare DataGridXL with Excel, or Google Sheets with screen reader support enabled (Tools > Accessibility settings). Announcing the column, row and cell content as you navigate the sheet with the keyboard would be a great start. Google Sheets does this by updating the content of a visually hidden ARIA live region (https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) as you navigate.


That you for this valuable advice! I have to admit that I have never worked on accessibility before (apart from writing meaningful HTML). Will definitely look at improving screen reader support when I get to it.


It uses <canvas>, but also has hacks for screen readers: open the demo and look for elements with the class of dgxl-innerColumn.


I haven't dug very deeply, but from what i can tell google sheets also uses a canvas too and it works with screen-readers somehow.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: