Design for A11y, hide accordion section with css or javascript ?
This is for an application that requres log in.
I wonder if what I see visually on the page should be same as what does exist in the DOM?
Is it ok to hide some sections with css? They will be visible to screen readers if they exist in the DOM.
This is about components like accordions or similar where you see more content after clicking a button.
So what is best/recommended practice.
Any opinions?
18 Replies
Hiding stuff with CSS only hides it for common user. A smart one may have a look into the code.
Same for hiding using js, though it's a bit harder
basically it isn't a security concern, its more of what is good UI. For reasons of security, information should never leave backend if user have no right to access it.
Then it doesn`t matter, really. As long as it is not blocking or slowing down, I would not bother much.
Make sure it's also hidden from screen readers though
I'm going to disagree with this...
The problem, from an accessibility POV, is it's very dependent on the context (as is everything 😅).
So, say it is a tabbed component... users will be interacting with the site to get to that tabbed component... when they get to it, what's the experience for them? The code is there, so the screen reader technically has access to it, but is there a way for the user to reach that content if they can't click on the tab? If they use a keyboard to interact with it, how do they then get into the content inside the tab itself? (tabs are one of the hardest things to get right).
But the same goes for an accordion, or a modal where you have to click a button first. You need to make sure they can access the control to open/close/toggle things, and that when they are on that control, they know what it does and how it works.
It's a lot more complicated than "the content is in the DOM", just because it's there doesn't mean it's easy for them to get to it.
Going back to the tabs, since they're a bit more complex, let's say they activate the second tab... do they have to then navigate over each of the other tabs before they reach the content they were trying to access? Visually, we can just look down, but in the DOM, you probably have 6 buttons in a row, one for each one... how do they skip those to get to the content they want?
It is a matter of cost/benfits ratio most of the time. At the moment, EU
s and Googles new consents policies are far mor grave than conformin to a tiny minoity of disabled visitors. Sorry, reality striking.the percentage of people that benefit from proper accessibility practices is much higher than you'd think
If you do it right the first time, the extra cost in minimal. if you do it wrong the first time, you build up technical dept and then it's expensive to fix.
Also, while there will be times of "just ship it", when people are asking questions and learning, telling them to avoid best practice because "real world ain't like that" isn't the right way to do it.
In this case, they're question is "how do I do this properly". Saying "it doesn't matter" is just wrong 🤷
And like @Jochem said... the cost is more than just the time to implement it, if you do it wrong, there's an inherit cost to the users who won't use your site, which might be more than you expect.
A properly accessible component isn't just for blind people. Every time I do a video where I talk about making keyboard navigation better (which benefits users of screen readers) there are replies from people who use vim who are very thankful I'm talking about that as well.
I'm very grateful for good keyboard nav, because mouse use hurts my hands if I do it too much. I use shortcuts in discord constantly just so I can keep both hands on the keyboard
Yes. And likewise I can always return a couple of steps and make the code more ellegant. And then come up with a completely new approach (to learn something new), while getting stuck on an unforseable obstacle. And then watch an excellent video on UX and revamp the whole thing ... having to explain the customer that it is what it needs to be and his idea is crap (all while he pays for that crap and is not quite interested in paying for advanced usability).
Does usability matter? Theoretically, by all means. In practice? Bottom of the list.
Yes, I have seen that video, it was a good one. Still, are screen readers important business-wise? A niche at the bottom of the list. Prefer giving that time to, dunno, improving my Schema knowledge or developing an instand ideas. Or sleeping, for that matter.
I'll still stand by, if someone asks "how do I do this properly", replying with "it doesn't matter" isn't very helpful.
Maybe they'll get a good answer and see that the scope is much bigger than they anticipated, and that might end up with them coming to that conclusion, but let them get there by seeing what it involves, rather than just saying it's not important.
The contextual point was "focus on fundamentals first, leave nice-to-haves for later". Should I have referred to BEM resources too, as it presumably is a good dev practice? I do not think so, prefer recommending that scroll had better be disabled once mobile menu is open.
may be I should provide more context. I work as angular developer in governmental organisation. I do component design so other developers can use these in the projects efficiently, without taking a deep dive into angular and accessibility. We have many components from before, but they are confusing screen readers. So I do redesign of those components. We must make web site accessible by the law. So my job is to create best possible components for all users.
May well be, yet I stand on my own, just as Kevin does. Just last night I was responding to another peer vaguely interested in accessibility (which is good) ... yet with comparably more blatant UI flaws and images of 2.6MB ("Why is it so glitchy,? What could be the problem? How do iI optimize imges?"). So my point is,fix ripped liver first, then broken arm and only when you are no not dying anymore, worry about dirt on your face.
I leave those high level decision about task priority to management. I simply pick a jira issue and work with it.
In my work I use https://www.w3.org/WAI/ARIA/apg/patterns
I think this is a very good collection of recommendations how to implement several known patterns.
I am still new to accessability issues, so this is why I was asking my question because I could not find an answer on that page.
Web Accessibility Initiative (WAI)
Patterns
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).