layouts that are visually different to the dom
Hey, if you have a layout that is visually different to the way it’s written in the dom, perhaps some elements have been moved around for a design, how would you go about making that accessible for screen readers so they still recite it in the correct order etc. and if the tab order gets mixed up, is there a way to get around that or should you avoid that design all together? Perhaps any rules of thumb for this type of thing? Thanks in advance.
8 Replies
Tab order can be changed, but not sure I understand, can you show the example?
Best is just test
No way to theorize everything
You can do best practices but they are a lie most the times
Yeah sure, the only example I have is this one, I asked a similar question about it in the fem discord and they said this example was okay as long as there wasn’t any links being moved around, i then queried what would happen if there were and was told that they don’t allow things like links, buttons or interactive elements as children for this reason which I didn’t quite understand. I’m looking mainly for rule of thumb type stuff with these things.
Yea so things is this.... Visual order and Dom order def matter how it is read out. But again test it I think people make up reasons not to do designs
Like if it's read out of order in so many cases does not matter
It's it a 123 type of deal .. then yea maybe it needs to be in order
Best to just start using a screen reader to test
And tabbing through visually (most screen reader users are not tabbing btw)
So my rule of thumb is test don't guess.
You wouldn't guess if your sites are responsive you test them.
Ah I see now, thanks. Whilst testing them, how do you know if something is an issue regarding the way it’s read out?
If it sounds wrong?
xD
if things are repeated
Like you would be able to make your own mind up not some best practice
just like "does this look good" you would ask "does this read out well"
Bigger deal is how the SR lists work (semantic html)
Heading levels, region roles, etc (as these are used for navigation most)
Oh it’s just that haha, I thought it was more fancy. I’ll start doing that then, I appreciate the help
https://discord.com/channels/436251713830125568/1252306815711187040
If you need help getting setup this is a great guide.
Sara has a great course too for accessibility, I've been to broke to get it yet though xD
Oh nice, I didn’t know that was here, I’ll take a look at both of those, thank you