Skip to content

Create account

DEV Community

Tobias Schächtelin

Posted on Jan 30, 2020

1

CSS <label> pseudo-content trick

#a11y #inclusivedesign #webcomponents

Inspired by the Inclusive Components by Heydon Pickering and the pseudo-content trick for inclusive card components, I implemented this approach with radio buttons:

https://codepen.io/tschach/full/PowvmRK

I would be very interested in discussing whether this is a valid option and what could be improved. So if you have any feedback on the semantics, let me know!

I also tweeted about it, so feel free to leave your feedback there:

Top comments (0)

Subscribe

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

DEV Community

CSS <label> pseudo-content trick

Top comments (0)

Create up to 10 Postgres Databases on Neon's free plan.

TS1329: '{0}' accepts too few arguments to be used as a decorator here. Did you mean to call it first and write '@{0}()'?

TS1338: 'infer' declarations are only permitted in the 'extends' clause of a conditional type

TS1345: An expression of type 'void' cannot be tested for truthiness

TS1340: Module '{0}' does not refer to a type, but is used as a type here. Did you mean 'typeof import('{0}')'?

Create up to 10 Postgres Databases on Neon's free plan.

Read next

TS1329: '{0}' accepts too few arguments to be used as a decorator here. Did you mean to call it first and write '@{0}()'?

TS1338: 'infer' declarations are only permitted in the 'extends' clause of a conditional type

TS1345: An expression of type 'void' cannot be tested for truthiness

TS1340: Module '{0}' does not refer to a type, but is used as a type here. Did you mean 'typeof import('{0}')'?

Okay