[csswg-drafts] [css-grid] Masonry layout in CSS Grid 3 has potential to cause accessibility problems with reading order. (#5675)

nattarnoff has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Masonry layout in CSS Grid 3 has potential to cause accessibility problems with reading order. ==
Assuming all authors code their masonry grid in a valid reading order, screen reader user who are non-visual will have no problem with it. But once we introduce visual screen reader users, low vision with no assistance, magnification software users, and users with cognitive problems, the layout begins to cause problems in focus order and reading order. 

If we have
`<div>`
  `<item>The quick</item>`
  `<item>brown fox</item>`
  `<item>jumped</item>`
  `<item>over</item>`
  `<item>the lazy</item>`
  `<item>dog</item>`
`</div>`

The screen reader user will hear "the quick brown fox jumped over the lazy dog." When we add the CSS and visual layout, the reading order could be realistically be:

![Slide1](https://user-images.githubusercontent.com/379104/97451856-2b2e0f80-1902-11eb-9a06-6ef7ef2b609e.JPG)
_Image description: 6 blocks laid out using masonry reads, "The quick brown fox jumped dog over the lazy"_

If these have active controls, the focus order would match the visual as well. I think using a simple sentence quickly demonstrates the damage and problems that could happen for users with cognitive issues, zoom users, and the dissonance a sighted screen reader user would encounter. This gets even more amplified if the author improperly uses tabindex set to a positive number.

I'm not clear on a solution. But I am clear that while the masonry may initially be targeted for photos and other visual pages, we have to expect it to be used by others for different things. If the individual items are standalone, like articles in a newspaper, then this isn't an issue, but we need to provide a way to control the focus/reading order to make sure the content doesn't become inaccessible.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5675 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 28 October 2020 14:54:23 UTC