VoiceOver on Safari can not find tables on web pages

user_813000 0
Viewed 309

I have several tables on a web page I'm working on. However - when I try to walk the tables with VoiceOver on Safari (Ctrl + Cmd + Opt + T) it can't find most of them. And we have about ten different tables on the page total.

The two tables it finds are simple ones. So - through the browser's inspector - I've tried:

  1. Copying other tables next to the ones it finds. It can't find the newly copied ones.
  2. Copying one of the tables it finds - on other places on the page. It finds them fine.
  3. Modified the HTML of other tables to be same as the ones it finds - same result.
  4. Modified the HTML of the two tables it finds to be as other tables - it still can find them.

Any ideas what could be wrong?

(If I remove the two tables from the page - it gives me Table not found when I try to walk the tables only. On other browsers it's fine.)

=====

PS: One other thing that I tried is to run the tables through the W3C validator. Some of them really had problems, most commonly the Table column has no cells beginning in it. However, I fixed them and still had the same results.

PS2: I just created a very simple JS Fiddle where from the first time I got the same case - VoiceOver can't find the tables. It's this one: https://jsfiddle.net/k09cfm7e/2.

PS3: The versions I'm using are Safar 14.0.1 on macOS Catalina 10.15.7.

voiceover accessibility safari html-table
2 Answers

After a lot of struggle - I figured out a solution to the problem - even though I couldn't understand the reason :D

So - as @GrahamRitchie pointed in the fiddle he created - when we add a element in the table - then in the fiddle the problem doesn't occur.

I tried to add the on my page - with no success. Then I tried a lot of things with still no success.

Then I decided to do some changes in the code that generates the tables - cause until then all I'd tried was through the dev tools of the browser. And in my case the tables are generated client side with a framework (Backbone) and added dynamically to the DOM.

So - I added to each table - from the very beginning - and voila! - now VoiceOver finds all of them. ... Probably Safari "registers" the tables the first time they are added to the DOM and then no other changes affect them.

And actually - with we have better control over what VoiceOver will read at the end :)

And last, but not least - the two tables that VoiceOver was able to find initially didn't have as well ... so I don't know what the cause was indeed.

=====

PS: One possibility I thought about is the Wave addon error Possible table caption that I was getting on one of the tables. For that error there is explanation:

A data table (has at least one table header) that does not already have a caption has: - A colspan attribute value of 3 or greater on the first cell of the table. - A element immediately before the table that contains less than 50 characters or contains less than 100 characters and is bold and/or centered.

But there were identical tables which were not getting the Wave error ... so I can't really say.

user_8130000

For anyone else who has this issue, the fiddle I created included a <caption>. For some reason there appears to be a long standing bug that makes some tables not register, but a <caption> seems to fix this.

I believe this is down to Safari trying to correct for developers using tables for layout.

user_27028940
Related