I recently ran into an issue with firefox not rendering a table correctly for use with a screen reader.
The table was rendered correctly visually on the screen. However, when using a screen reader, the entire body of the table, i.e. all the rows and columns in the table, appeared as a single line of continuous text to the screen reader and no table navigation commands were possible within the text.
The same table was exposed correctly to the same screen reader in Internet Explorer though.
Firefox, however, tried to interpret the tags and messed up the table for screen readers where, in my opinion, Firefox should have simply ignored the tags if it did not understand them.
Typical accessibility issues are caused because of a lack of ARIA markup or things like missing alt text, invalid or missing closing tags etc. This was peculiar because this was caused because of extra ARIA tags and not because of a lack of them.
This issue could not be captured by any accessibility tool out there. Neither would an average developer who is simply aware of the W3C accessibility guidelines and is consciously trying to stick to the standards would have found this out without a screen reader user actually reporting the issue.
In the end, i wasted a lot of time trying to figure out what was going on here.
In the next few days, I will collect some resources on ARIA tags and their correct usage and post them here. Hopefully that will help people spot tags that shouldn’t be there.