Skip to main content

mastodon - Link to source

*sigh*

Just because someone claims a _thing_ is “accessible” does not make it so.

Failing WCAG, the bare minimum, can be confirmed with a quick automated check: nested interactives (1.3.1/4.1.2), not dismissable (1.4.13), hidden items get focus (2.4.7), state not conveyed (4.1.2), heading mismatch (1.3.1/2.4.6).

This demonstrates why CSS-only widgets are inaccessible: adrianroselli.com/2023/03/css-…

#a11y #accessibility

Email: CodePen Spark. Glowing Dropdowns, Three.js Tile, and Many Challenges Accepted. This week's CodePen community highlights include a trio of glowing dropdown menus crafted with accessibility in mind by REDACTED, a truly trippy Three.js recreation of azulejos tile from Tom Hinton, and CodePen community responses to a design challenge from Edoardo Mercati, a CSS riddle challenge from Kevin Powell's YouTube channel, and our very own #CodePenChallenge.
Chrome dev tools open to show the menu is made up of a div with tabindex holding a button, no aria-expanded, a CSS variable of --a11y, and an accessible name made up of the text from all the nested nodes instead of just the visible label.

CSS-only Widgets Are Inaccessible

Usually. I originally titled this InacCSS-onlyible. I even made this typographically, er, distinct image. Then I realized it was silly and will instead use the neologism in a talk so I can hear the groans IRL.
Adrian Roselli
#a11y #Accessibility
⇧