KP-C

Kevin Powell - Community•12mo ago•

13 replies

ne3zy

Is it OK to hide an item using `opacity`, `pointer-events`, `aria-hidden` and `tabindex` ?

Can you hide an item using opacity: 0opacity: 0 + pointer-events: nonepointer-events: none + aria-hidden="true"aria-hidden="true" + tabindex="-1"tabindex="-1" instead of using display: nonedisplay: none or the hiddenhidden attribute ?
Specifically in the context of accessible tabs: https://youtu.be/fI9VM5zzpu8

YouTubeKevin Powell

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