I finally had to pick between grid-auto-flow: dense or reordering my HTML

Was working on a client's portfolio site where the image thumbnails were all different heights. The layout kept leaving weird gaps. I could either use 'grid-auto-flow: dense' to fill them automatically, or go back and restructure my markup. I went with dense, and it fixed the gaps in like 10 minutes, but I'm a little worried about the visual order on screen readers. Has anyone else run into accessibility issues with this method?

3 comments

3 Comments

brown.susan1mo ago

I used to always reorder the HTML because I thought it was the only right way. Then I worked on a gallery with hundreds of images, and the visual gaps were a real problem. Using grid-auto-flow: dense was the only practical fix, and we tested it with a screen reader user who said the logical order still made sense.

wadeyoung19d agoMost Upvoted

Last year I had a client with a masonry layout of over 300 product photos. The source order was a total mess for the visual flow. We went with grid-auto-flow: dense after checking it with NVDA and it worked perfectly. The screen reader followed the DOM order just like it should, no weird jumps. Sometimes the textbook answer doesn't fit the real problem. That fix saved us a ton of time and the client was happy with how it looked.

tyler5061mo ago

So you're worried about screen readers, but did you actually test it? The comment above shows a real test worked fine, so maybe the worry is just in your head. Sometimes the simple fix is the right one.