Clickable < span >s or < div >s are bad because they are "meaningless" tags. There is no indication to the user agent that they do anything, they're just meant to be containers, therefore without using the proper aria attributes, screen readers and other accessibility technology will not be able to tell their users that the element is clickable. This also goes for assigning scripts to any other non-button element. The way of making a < div > or < span > (or any other element) "look like" a button to the user agent is by setting aria-role="button". This will tell screen readers to read that element as a button!
I found a button style reset here, which will work for all User Agents. That being said, setting border=none, padding=0, and margin=0, makes it basically a blank slate. Additionally, I found a nice CSS Tricks article which sums up all of the ways of doing it better than I could.
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.
Clickable < span >s or < div >s are bad because they are "meaningless" tags. There is no indication to the user agent that they do anything, they're just meant to be containers, therefore without using the proper aria attributes, screen readers and other accessibility technology will not be able to tell their users that the element is clickable. This also goes for assigning scripts to any other non-button element. The way of making a < div > or < span > (or any other element) "look like" a button to the user agent is by setting aria-role="button". This will tell screen readers to read that element as a button!
I found a button style reset here, which will work for all User Agents. That being said, setting border=none, padding=0, and margin=0, makes it basically a blank slate. Additionally, I found a nice CSS Tricks article which sums up all of the ways of doing it better than I could.