4 ms·

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 ht

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?

kanobo 6y ago
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.
lights0123 6y ago
It uses <canvas>, but also has hacks for screen readers: open the demo and look for elements with the class of dgxl-innerColumn.
robbiejs 6y ago
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.
- whylo 6y ago
  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/ 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/ARIA/ARIA_Live_Regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) as you navigate.
  - robbiejs 6y ago
    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.

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?

kanobo 6y ago

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.

lights0123 6y ago

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

robbiejs 6y ago

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.

whylo 6y ago
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/ 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/ARIA/ARIA_Live_Regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) as you navigate.
- robbiejs 6y ago
  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.