Search code examples
htmlaccessibilitysemantic-markup

<s> vs <del> in HTML

So I'm writing a list of todos in HTML. Some of these todos are, well, done.

<h1>TODO</h1>
<ul>
  <li>I'm still to be done</li>
  <li>I'm done</li>
</ul>

Now I'm wondering what the best way to mark up and style these items. When it's done, I could mark up each item with <s>, which seems much more acceptable these days, as it's 'no longer relevant':

<li><s>I'm done</s></li>

I could go for <del> as, in some sense, the user has edited the list and set this item for removal (kinda):

<li><del>I'm done</del></li>

I could add a class to say what this item means:

<li class="todo done">I'm done</li>

Or some combination of the three. Or something else entirely.

My concerns are accessibility and semantics - I want the markup to convey the meaning of a 'done' item.

What's the best way of doing this?

Solution

  • Both answers are great. s and del are indeed semantic tags so it's good for accessibility. Unfortunately, no browsers surface those tags in the accessibility tree so screen readers cannot convey any information regarding the tags. But you can work around it with CSS. There's a simple blog that talks about the <mark> element, which is also semantic but does not convey info to screen readers but the blog gives a workaround. You can do something similar with s or del. That is, use either s or del but also use CSS to augment the tag for screen reader users.