Search code examples
iframeaccessibilitywai-ariajaws-screen-reader

How to make JAWS recognize and read a table inside TINYMCE editor

I am trying to make JAWS read tables in a html page (Confluence page in edit mode). The tables are inside iframe and I think that's the reason JAWS is not recognizing tables.

I have added few attributes to the table after the table is rendered 

<caption>
<table role="grid" aria-live="polite" tabindex="0">
<tr role="row"></tr>
<th role="columnheader"></th>
<td role="gridcell"></td>
</table>

This table is in edit mode. So user is able to edit this table and add more rows. What else I need to do to make JAWS recognize the table and read all the cells. Please find the below image which shows the whole html structure.

enter image description here UPDATE: This page is using wysiwyg (tinymce) editor. The body is contenteditable = true in which table is residing and that's what causing the problem. To validate it, I removed the contenteditable properties from the body and JAWS is able to recognize the table but then I cannot use the editor at all. So now the question is how to make JAWS read table inside content editable element. enter image description here

Thank you in advance.

Solution

  • I have tables in iframes all the time and have no problems with JAWS. My first recommendation is getting rid of all the superfluous aria attributes. You're way overusing them and are actually breaking the spec. You are not supposed to specify a role for native elements. (The w3.org site is down at the moment. I can provide a url when the site is back up.)

    1. remove role='grid' from <table>
    2. remove role='columnheader' from <th>
    3. remove role='gridcell' from <td>
    4. remove colspan=1 from the third <th>. One column is the default.
    5. remove colspan=1 from all the <td>s

    And for testing, I would also

    1. remove aria-live from <table> and <tbody>
    2. remove tabindex from all cells and the table

    Then add

    1. scope=col to <th>

    Then test JAWS with the virtual PC cursor. Use 'T' to navigate to the table. Then you can use ctrl+alt+arrow to move around within the table. (Or you can use the table layer commands, ins+space,T, and then use a simple arrow key to move around).

    If you navigate into the table and then move left and right, you should hear your column headers read before the data values (if you added scope=col to your <th>, although JAWS will probably announce the column header even if you don't have scope=col).