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?

2 comments

2 Comments

brown.susan11d 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.

tyler50611d 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.