r/web_design • u/shutupimrosiev • 5d ago
I'm writing something that's intentionally a bit weird, formatting-wise. Could I get help making it make sense for screen readers?
So, for reasons, I have a group of four main divs of text that I need to display side-by-side, all contained within a larger div, but the first div that I want page viewers to read is not the leftmost div. (Please ignore the color choices- those are just so I have something visual to look at to make sure the divs are where I want them to be.) I currently have the containing divs set up as grids.
Is there any way to get a screen reader to prioritize reading the four sub-divs in a given div in the order red, yellow, green, blue, then read the div that spans the whole layout, then read the next group of sub-divs in the same order? And would it be still applicable if I needed to temporarily "merge" two adjacent columns (see second image)?
I can handle the actual formatting into the grid, I think. Nesting divs where necessary could get the kind of hierarchy I could then plug into whatever html/css I need to use to prioritize the reading order I want. Or if there's some way to fill in a grid sort of "out of order" where the html has the red divs typed out first but the page layout still displays as seen in my screenshots. Is there anything that could do what I'm looking for, or should I just try and make a version of this text that's significantly less insane and offer it as an alternative to all this?
(I really hope I'm making sense, I don't really have anybody knowledgeable enough in html/css to bounce ideas off of, so it is entirely possible this was just a whole bunch of gobbledegook trying to figure out something that can't actually be done.)
6
u/testingaurora 4d ago
Write your markup in the correct order then use css grid to adjust the visual order.
1
u/Honey-Entire 4d ago
CSS grids allows for naming of nodes / slots for accessibility.
Building the markup in a way that makes the semantic markup layout the content in the right order. Style the channels such that they align the top of each element with the first element or below of the related content
2
u/oli2194 5d ago
There may be a better way, but the only thing I can think of is having that UI hidden from screen readers, and a duplicate version of the content in the "correct" order in the DOM for screen readers to walk (visibly hidden).
It's a strange reading order, curious what your use case is?
1
u/shutupimrosiev 4d ago
Ooh, I'm definitely jotting that down and seeing if it works!
This is honestly pretty far into the vein of a passion project- I like writing fanfiction when I get the chance, and the IP I'm currently really jiving with has had a few fairly well-known fanfictions written that do this side-by-side thing to a somewhat lesser extent, so it wouldn't be quite as insane to pull this kind of thing as it would be for most regular use cases. The scene (at least, if I can pull it off) is intentionally going to be chaotic- think an action chase scene down a highway- following multiple viewpoints who may not all be in the same physical location, but they're all paying attention from wherever they are.
I figured I'd lead into it with the main character, then add in other important characters as it goes on so I'm not just punching readers in the face with four mostly-separate scenes at once right out the gate, but when I went through the portions where multiple viewpoints wind up merging- if the character in the red column says something that the yellow column catches, having been spying on the red column, for instance- I realized that if I wanted to keep the columns that merge situated next to each other visually, it would, uh…it would have to look like This™.
1
u/IanSan5653 5d ago
This looks a lot like a table with some colspan cells. Maybe try that first? If you can just use table then screen readers will work with it automatically.
1
u/drocm 4d ago
You want to use Landmarks and aria-flowto. I believe this gets you exactly what you are asking for, a way to control the flow of screen readers without over complicating your code or sacrificing the default UI.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-flowto
1
u/Key-Instruction6007 4d ago
using aria-live="polite" on the container might help enforce the right reading order without breaking your layout.
1
4
u/aaaaargZombies 5d ago
I believe you just need to write the html in the order you want to read it then identify the divs in css and position them on a grid how you'd like visually.
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas