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

I  slightly disagree with the premise of this issue.  You really shouldn't use (default) masonry layout in the first place if the item placement matters to the _semantic meaning of the content_.  So I think the original example doesn't make sense, for anyone, sighted or not.  (There is however `masonry-auto-flow: ordered` that could be used for content where the item order matters, but then you sacrifice optimal packing.)

I agree with the later points though, that taking input both visually and from a screen reader simultaneously could be slightly disorienting since the order may not completely match (they are typically somewhat close for default masonry layout though).  This is a general problem with Grid and other layout that can place boxes in arbitrary positions.

I don't think adding more HTML/CSS features and relying on authors to use those features is a tenable solution.  For two major reasons: 1, authors rarely take the time to do that extra work, and 2, predicting the visual layout is very hard in responsive designs. Instead, I think it should be solved by browser implementations and AT.  For example, a browser could provide the visual box order of a Grid container (masonry or regular) to an AT.  This could be used by the AT to offer DOM order or visual order as an option to the user.  Visual order might be preferred by users that consume both visual and screen reader information simultaneously.

Browsers need to have a concept of visual order anyway to implement selection in a way that makes sense. For example, selecting text with the mouse from an item in the top-left corner of a grid into its neighboring item on the right should really just select the text in those two items, not the entire DOM range in-between. (We don't implement that in Firefox yet, but [we intend](https://bugzilla.mozilla.org/show_bug.cgi?id=1516672#c3) to.)

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5675#issuecomment-718288636 using your GitHub account


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

Received on Thursday, 29 October 2020 00:43:15 UTC