CODEWITHSUNDEEP
htmlsemanticsw3csemantic-markup
codepleb
codepleb

Reputation: 10571

Is it bad practice to use spans as "buttons"? W3Schools is doing that

Consider this modal example (and a lot of other examples from them): https://www.w3schools.com/howto/howto_css_modals.asp

They use a span tag, that acts as a close button for the modal. Isn't this semantically incorrect? Or is there some legitimisation to do that?

It is kind of weird that the "web standardisation consortium" is putting out examples like that. But maybe I am missing something here.

Upvotes: 1

Views: 641

Answers (2)

Quentin
Quentin

Reputation: 943207

Is it bad practice to use spans as “buttons”?

Yes. They are, by default:

  • Not announced as being interactive by screen readers
  • Not in the tab order so are inaccessible to keyboard users

It's possible to hack around that by use of tabindex and ARIA, but using a real <button> is much simpler and better supported.

You can get a much deeper dive into this subject from Inclusive Components by Heydon Pickering.

W3C is doing that

No, they aren't.

W3Schools is a low-quality advert-ridden tutorial site that happens to have good SEO because they've been around forever.

They've picked a name which lets them be confused with the W3 Consortium. Note, however, that "Consortium" and "Schools" are not the same word!

Upvotes: 4

NoSkill
NoSkill

Reputation: 768

It isn't a bad practice if you add there at least tabindex attribute. Users should reach the button via keyboard too:

<span tabindex="0">Button</span>

Also a good practice is to adding ARIA - attributes:

<span tabindex="0" role="button" aria-pressed="false">Button</span>

Upvotes: 0

Related Questions