Question

我正在使用一个内部管理Web应用程序的UI，该应用程序使您可以管理各种数据（在我们的示例中为人员）。一些屏幕由标题（包含人员的基本信息）和进行更改的表格组成。

示例标记（无样式）：

<header>
    <h1>John Doe</h1>
    <img src="johndoe.jpg" alt="Profile picture"/>
    <div>Group X</div>
    <div>London, UK</div>
    <div>01.01.1970</div>
    <div>some kind of ID (example: X920EDY)</div>
</header>

我想通过使用语义标记来改善应用程序的可访问性，但是无法弄清楚应在标题区域中使用哪些HTML标签。我会使用<h1>作为标题（“ John Doe”），而使用<img>作为图像，但是我不确定其余内容将使用什么。

右侧的文本（“第X组”）在外观上看起来像是标题，但在这里使用<h2>就像<h> elements should represent headings of sections那样感觉不对，并且没有分组的内容属于该文本。

标题下的文本当前定义为<div>-由于<div>s have no meaning on their own，感觉也不正确。我考虑过使用<p>，但这些文字不是段落。我考虑的另一个选项是<span>和<ul>，但它们似乎也不正确，因为第一个选项（如<div>，has no semantic value和文本不会创建{ {3}}。

有人有更好的主意吗？

Answer 1

这里列表是最好的解决方案，imo。它不会传达语义上相似的项目，但会聚集在一个引擎盖下，也就是说，所有有关John Doe的信息。
您可以执行<ul>，但是如果出于某些原因要保留div，可以这样做，并为列表添加适当的ARIA，如下所示。
还有一件事：据我所知（在有帮助的情况下），ID事物与X组有关。也就是说，数据是这样的：John Doe，伦敦，生日，x组，ID。如果我说得对，您需要更改代码中div的位置，因为大多数屏幕阅读器都会按代码中的顺序对页面进行排序。
因此，除了为列表添加外部div之外，最终的解决方案无需更改您的标记：

<div role="list">
    <div role="listitem">London, UK</div>
    <div role="listitem">01.01.1970</div>
    <div role="listitem">Group X</div>
    <div role="listitem">some kind of ID (example: X920EDY)</div>
</div>

短文本使用什么HTML元素？

1 个答案: