DEV Community

Discussion on: How to make Button CSS Hover Effect. Pure CSS Wavy Design. Html button.

Collapse
 
shikkaba profile image
Me

While this looks cool, it's not a great idea. Screen readers will see and read the row of a.

Collapse
 
jamesthomson profile image
James Thomson

This. At least use aria-hidden="true" on those elements or use pseudo-elements (but I believe even those sometimes can be interpreted by screen readers).

Collapse
 
themodernweb profile image
Modern Web • Edited

Well then there is no issue if reader read this just instead of typing "aaaaa" type something meaningful like "wave_pattern" this design will still work

Thread Thread
 
jamesthomson profile image
James Thomson

No. Just no.

Try turning your screen reader on and navigate through some websites. Now imagine you rely on this assistive technology to navigate through various pages. Now imagine every single time you focus on a button and it reads out "WAVE UNDERSCORE PATTERN" "WAVE UNDERSCORE PATTERN" "BUTTON". Now imagine you have to tab through several of these to try and find the button you are hoping to find.

I hope you can imagine how incredibly frustrating this would be to users that rely on assistive technology.

Thread Thread
 
themodernweb profile image
Modern Web

Yeah that could be very frustrating. But I made this effect only to show a way to do this with pure CSS. We can also use Image instead of using spans to create this effect and screen readers will ignore the image. I was just making this effect with pure CSS.

I hope you understand

Thread Thread
 
shikkaba profile image
Me

Thing is, just because it can be done, doesn't mean it should. Accessibility is very important, and should be considered especially as on here there are people who do not know better and will just use code without knowing there is something flawed with that usage.

Thread Thread
 
themodernweb profile image
Modern Web

Yeah I am sorry I didn't thought about readers as well. But after thinking for a solution. I think I have one. We can use CSS media query to check for readers and in case of readers we can change spans display property to none. As readers ignores the elements having display none property.

I hope you understand

Thread Thread
 
shikkaba profile image
Me

That's a bit much. If you have to use media queries for a decorative item, then that is overcomplicating and adding unnecessary code for the sake of a visual effect that can be done another way not requiring text.

Consider something like what is used here: codepen.io/btargac/pen/JGOGoj