Is it OK to hide an item using `opacity`, `pointer-events`, `aria-hidden` and `tabindex` ?
Can you hide an item using
opacity: 0 + pointer-events: none + aria-hidden="true" + tabindex="-1" instead of using display: none or the hidden attribute ?
Specifically in the context of accessible tabs: https://youtu.be/fI9VM5zzpu8Kevin Powell
YouTube
Create Accessible Tabs with HTML, CSS & JS
Creating tabs takes a bit of work, and making sure they’re accessible can be a little tricky. First, you should ask if you even need tabs in the first place, but assuming you do, this video looks at creating some progressively enhanced tabs.
🔗 Links
✅ The finished code: https://codepen.io/kevinpowell/pen/oNQgRKm
✅ Accessibility guidelines for ...
9 Replies
no, that's not enough
depending on the use, throw it outside the viewport with position absolute and a clip-path to hide it
Why wouldn't that be enough ?
because it takes space anyways
In my case I want it to take space, I'm stacking every panel over each other using grid
grid-row: 1/-1;
grid-column: 1/-1;
This way the document doesn't shift height even if one panel is taller than another
then use
visibility: hidden insteadNice I didn't know about this property, should I just use
visibility: hidden or do I need to mix it with tabindex="-1", etc ?i would mix it too
opacity alone doesn't work since the stuff is still there, but had a different color
thanks
you're welcome