Page MenuHomePhabricator

VoiceOver does not read table structure when using the Minerva skin
Closed, DuplicatePublic

Description

First of all: I'm not very familiar with screen readers and associated markup. I just use VoiceOver to see how accessible a page is, but that's it.

One thing I noticed is that VoiceOver reads the structure of a table when going through the cells. This can be observed e.g. with the vector skin, or more generally for tables on other sites. For instance, if I go to this section with Vector and let VoiceOver read the first table, it will read:

election, row heading, column heading, row 1 column 1; table start, 8 rows 7 columns
house, column heading, row 1 column 2
constituency, column heading, row 1 column 3

etc. Note: these may not be 100% accurate. Because the language of my device is set to Italian, VoiceOver uses a weird mix of Italian and English when reading the interface; I've translated some words.

But if I open the same page with Minerva and let VoiceOver read the same table again, it'll say:

election house constituency party votes result

That is, it doesn't say anything about the table structure, and it reads all the headers at once without pauses.

Another thing I noticed is that this only seems to be the case for simple tables; for instance, VoiceOver reads the structure of the table in https://en.wikipedia.org/wiki/Quenya#Numerals with Vector as well as Minerva.

Event Timeline

This is because Minerva sets display block on its tables. A general search should bump into some discussion about it. https://css-tricks.com/accessible-simple-responsive-tables/ is a decent example of the discussion and directly references the issue.

The issue would be fixed with solutions like the one I've referenced in T66577 for Timeless by wrapping tables in a div. This task should probably be marked duplicate.

This is because Minerva sets display block on its tables.

Ohhhh right, I didn't think about that!

The issue would be fixed with solutions like the one I've referenced in T66577 for Timeless by wrapping tables in a div. This task should probably be marked duplicate.

Works for me, but I haven't read all the comments in the other task and don't know what the current proposals are.

Jdlrobson subscribed.

Yep, T66577 seems like the right solution for this and is probably the best place to invest our effort! I've incorporated this in the description so it's not lost.