Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Wasn’t meant to be a dig by the way (well not a mean dig, just a playful one!😜), Temani and I have good banter that is all and your timing was just too good releasing that post!
If you want I can have a look at your post and offer some suggestions on how you could make it accessible and keep you current design (or close to it).
Or better yet why not take the principles from this design and Use the revealing-module-pattern to turn into a component, more than happy to link to it / include your fiddle in this post if you do and happy to help if you need any guidance from an accessibility perspective! ❤️
I will try to understand the principles of your design first. And surely leave a comment for any help needed to understand accessibility. I am trying to learn it by reading blogs from web.dev and other online content. Let's see if I get a chance to make a revamped accessible one using same pattern :D.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
The key principle is using radio buttons with properly associated labels from an accessibility perspective (that are within a fieldset to group them). That covers 80% of the accessibility!
Once you have that as a base the only other thing that is a bit unusual is the way I hide the inputs (and the label text) so that is the key thing to investigate. If you search google for “screen reader only text” or “visually hidden text” the first articles should explain that technique in detail. this article explains the principles reasonably well to get you started
Once you have had a fiddle and poke around then let me know if anything still doesn’t make sense!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Wasn’t meant to be a dig by the way (well not a mean dig, just a playful one!😜), Temani and I have good banter that is all and your timing was just too good releasing that post!
If you want I can have a look at your post and offer some suggestions on how you could make it accessible and keep you current design (or close to it).
Or better yet why not take the principles from this design and Use the revealing-module-pattern to turn into a component, more than happy to link to it / include your fiddle in this post if you do and happy to help if you need any guidance from an accessibility perspective! ❤️
I will try to understand the principles of your design first. And surely leave a comment for any help needed to understand accessibility. I am trying to learn it by reading blogs from web.dev and other online content. Let's see if I get a chance to make a revamped accessible one using same pattern :D.
The key principle is using radio buttons with properly associated labels from an accessibility perspective (that are within a fieldset to group them). That covers 80% of the accessibility!
Once you have that as a base the only other thing that is a bit unusual is the way I hide the inputs (and the label text) so that is the key thing to investigate. If you search google for “screen reader only text” or “visually hidden text” the first articles should explain that technique in detail. this article explains the principles reasonably well to get you started
Once you have had a fiddle and poke around then let me know if anything still doesn’t make sense!