html - HTML 中的 <s> 与 <del>

Question

所以我正在用 HTML 编写待办事项列表。其中一些待办事项已经完成。

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

现在我想知道标记和设计这些项目的最佳方式是什么。完成后，我可以用 <s> 标记每个项目。 , which seems much more acceptable these days ，因为它“不再相关”:

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

我可以去 <del>因为，在某种意义上，用户已经编辑了列表并将此项设置为删除(有点):

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

我可以添加一个类来说明这个项目的含义:

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

或三者的某种组合。或者完全是其他东西。

我关心的是可访问性和语义 - 我希望标记能够传达“已完成”项目的含义。

这样做的最佳方法是什么？

Answer 1

两个答案都很棒。 s和 del确实是语义标签，所以它有利于可访问性。不幸的是，没有浏览器在可访问性树中显示这些标签，因此屏幕阅读器无法传达有关标签的任何信息。但是您可以使用 CSS 解决它。有一个 simple blog谈论<mark>元素，它也是语义的，但不会向屏幕阅读器传达信息，但博客提供了一种解决方法。您可以使用 s 做类似的事情或 del .也就是说，使用 s或 del 而且使用 CSS 为屏幕阅读器用户增加标签。