Search code examples
angularjsfirefoxsafariaccessibilityvoiceover

accessibility of angular table in Safari and firefox


In my web page i need to use angular table. i have made it accessible and screen reader both nada and jaws are reading it fine in IE. however, in Mac OSx voiceover is not able to identify any data in table and whenever focus reach to table voiceover read the caption of table and inform that empty table. As a developer it is becoming bit frustrated . any idea how to make angular table accessible in safari?

Thanks Anubhav


Solution

  • Have you inspected the html that angular generates? Sometimes these third party libraries create separate tables for the column headers, row headers, and the data area. So you really have 3 tables when visually it looks like one table.

    Also, check the CSS that's associated with the data table. If it's using the display style to change it from the inherited table (eg display:inline), then that can prevent the screen reader from thinking it's a table.

    It's also possible that something like role=grid is being used but OSx is not supporting it.

    Did you try VoiceOver on OSx in Safari, Chrome, and Firefox? Do any of those browsers work?

    What about VoiceOver on iOS? Is your table read on an iPad?