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.
This is great, just swap the opacity: 0.01 trick for a proper screen reader only class and maybe steal my text-shadow trick to give the stars a darker border (so contrast is high enough for a control at 3:1) and this gets an A++!
I actually think yours behaves better than mine too!
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.
Oh I just noticed something else (minor tweak) your stars need to have aria-hidden=true instead of role=presentation as they are still screen reader accessible. Presentation basically says “this has no role” (think of it like turning it into a div or span if it was button for example) but doesn’t remove it from the accessibility tree. Not sure how I missed that!
This is great, just swap the
opacity: 0.01trick for a proper screen reader only class and maybe steal my text-shadow trick to give the stars a darker border (so contrast is high enough for a control at 3:1) and this gets an A++!I actually think yours behaves better than mine too!
Have all of the ❤🦄 and bookmark love I can give!
I've made a slight edit, I use text-stroke though rather than the shadow trick.
Oh I just noticed something else (minor tweak) your stars need to have
aria-hidden=trueinstead ofrole=presentationas they are still screen reader accessible. Presentation basically says “this has no role” (think of it like turning it into a div or span if it was button for example) but doesn’t remove it from the accessibility tree. Not sure how I missed that!Fixed