Accessibility for Tables

For some reason, the screen reader doesn’t seem to read tables unless there are blanks in the tables. Is there a way to get the screen reader to read the tables? I also created header rows and columns since this is typically what is needed for accessibility purposes in other contexts, such as Word Documents and such. Is there something else I need to do to get those cells to read to a screen reader? It won’t even navigate to the table by pushing “Tab”.

What screen reader are you using? We can take a look on our end to see how we can help.

Any other information you can provide like browser and operating system versions might be helpful too. Thanks!

I’m using NVDA. Also, I am using a PC with Windows 10 and Google Chrome.

Thanks for that. Here’s some info provided by Stephen Clower, who leads accessibility here at Desmos:

Thanks for your question. When working with tabular data, the general expectation from the W3C et al is that non-interactive elements (e.g. read-only math) is rendered but not accessed by pressing Tab or Shift + Tab. Editable content, or anything requiring user input, should be available when pressing Tab. If your experience differs from either of these cases, then there may be a bug that we need to address.
Generally speaking, a table should always be available to NVDA by pressing T or Shift + T (while Browse Mode is active) followed by the Ctrl + Alt + Arrow keys to traverse its content (e.g. Up and Down navigate by Row, and Left and Right move by column).
If the table is totally blank, NVDA may be interpreting this as a layout table and doesn’t show it to the user by default. This setting can be adjusted in the Browse Mode section of the NVDA settings dialog.
If you are still unable to find the table with NVDA, then please submit an example of the problem, and our accessibility team will investigate it.

Thank you so much for your response! I am new to using screen readers and it looks like T and shift + T works.

One thing I noticed is that the screen reader announced that there was a card sort or graph on the page, but didn’t announce the table. It announced the graph because of my added narration and I didn’t have to do anything for it to announce the card sort. The screen reader was very specific with regards to the card sort and made it easy for me to group the cards with those instructions. When tabbing to the graph, there were also very specific instructions with regards to how to trace the graph.

There were no instructions for a table though. A visually impaired student wouldn’t know that a table exists unless they are told so in the note. And if they are told there is a table in the note, I’m not sure they would know to press T to access the table since tabbing doesn’t work. Is there a way to get the slide to announce that there is a table and also how to access the table since tabbing doesn’t announce the table if there are no editable cells? It’s possible this is already a feature, but since I am new, I am not sure.

I appreciate your help so far!

We provide the usage instructions for graphs and card sorts because they are custom elements that we’ve built from scratch. Tables, on the other hand, have been written to be recognized and traversable by software like screen readers. That also means the way someone may locate and interact with elements is going to depend entirely on the tool they are using at the time. For instance, it’s common that Ctrl + Alt + Arrow key presses will move between cells using JAWS and NVDA, or that Capslock + Arrow keys may do so on a Mac. However, it is possible that some screen readers provide different shortcuts, or the user might have changed the default assignments. In addition, touch-based devices have their own navigation mechanisms that may or may not require a physical keyboard.

Where practical, we code our components to adhere to existing roles and behavior so that a student can leverage the existing web skills he or she already possesses. The techniques used to navigate tables on other sites will apply to Desmos lessons, and vice versa. What those techniques are, however, depends on the tech the student has available.