Search code examples
htmlsemanticsw3csemantic-markup

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.

Solution

  • 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!