2

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?

2
  • 1
    You have already been very thoughtful on stating your question . The three alternatives seem semantically correct to me. It's a matter of personal taste. I would go to the done class solution, because its easier to implement as a toggle class.
    – PA.
    Aug 31, 2018 at 11:04
  • I agree, this is kind of a retoric question. Use whichever you feel most comfortable with. style classes are easiest to add and remove with javascript.
    – Penguin9
    Aug 31, 2018 at 11:07

3 Answers 3

3

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.

2
  • This is the best answer I was able to find on the internet. Thank you. I did implement a version of the solution mentioned in the blog you posted. Much appreciated.
    – Josh
    Nov 29, 2018 at 15:30
  • Glad it worked. I gather you (or someone) tested your solution with a screen reader? As noted in the blog, Internet Explorer doesn't honor the CSS content property. That's a bug with IE because it goes against the accessibility spec, w3.org/TR/accname-1.1/#step2, at step 2.F.ii, so your solution might not work on that browser. Please mark the answer as accepted if you want to use it as the main answer (gray checkmark below the up/down vote). Nov 29, 2018 at 21:30
2

A class has no semantic meaning, so if accessibility and semantic are important for you, then you have to use del or s.

If you should use s or del is not easy to say. For s the specs have this example:

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

So you want to show the reader the old information, but also tell the the information is not relevant anymore.

Your TODO example is covered in the specs in the del section 4.6.2 The del element

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

I think the main difference is that you have more possibilities to add semantic information to del then to s. So del is more about if the information that something was deleted is really important, e.g. the tracking of changes (diff tool), a TODO list, that a part od a specification was removed, ... . And s is some kind of informally additional information.

2

In plain HTML, class values don’t convey any meaning. You can make use of classes in addition to making use of semantic elements (classes can be useful for CSS, JavaScript, documentation purposes etc.), but you should not use classes instead of semantic elements.

With del and s, you found the two relevant elements that can make sense in this context. Which one to use? It, most likely, doesn’t make a practical difference.

The semantic differences are subtle:

  • With del, you convey that the content was removed from the document (semantically, it doesn’t matter if the content is still visible or if you visually hide it with CSS). It represents the actual edit to the document.

  • With s, you convey that the content is no longer relevant.

I guess the purpose why you show the done items can help in making the choice which element to use:

  • If the todo list could work as well without showing the done items (so showing them has the purpose of tracking changes, or detecting errors), go for del. In theory, a user agent could offer viewing the list at a specific point in time (making use of the datetime attribute), and a default view could only show the actual current content (i.e., without any content in del).

  • If it’s relevant for the meaning of the todo list to show what has already been done, go for s.

  • If there is a relevant difference in your case between removing an item (e.g., because it was added by accident, or didn’t make sense etc.) and marking an item as done, then you might want to use del for the former and s for the latter. You can ignore this if there is no relevant difference (e.g., if you would not keep showing items from the former case anyway).

(Side note: If using del, it would make sense to also use ins for adding new todo items.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.