设置元素的语义 HTML

Question

我正在尝试使用 HTML 和 CSS 制作一个设置页面。单个设置左侧有一个标签，右侧有一个交互元素/多个交互元素。

我不知道哪种 HTML 标签最适合左侧标签、右侧交互元素的单一设置。 我也不知道如何在语义上更正分组并标记交互式计数器元素（加号和减号按钮以及当前值的范围）。

我不想仅使用 div 来对元素进行分组，但我不确定此用例的正确 HTML 标签是什么。

我写的HTML：

<section>
  <h1>Settings</h1>

  <div>
    <span>Automation</span>
    <button>Start automation</button>
  </div>
  <div>
    <span>Number of votes</span>
    <div>
      <button>-</button>
      <span>5</span>
      <button>+</button>
    </div>
  </div>
  <div>
    <span>Max votes on card</span>
    <div>
      <button>-</button>
      <span>3</span>
      <button>+</button>
    </div>
  </div>
</section>

我尝试为我的设置编写语义正确的 HTML，但我很难找到正确的标签等。

Answer 1

有多项语义改进来提高可访问性。

首先，您应该使用语义列表来设置或选项：

<menu>

。
然后将所有“行”包装到

<li>

列表项中，默认情况下将创建行。

如果您有

<button>

，那么您还应该使用连接到它的

label

，以便屏幕阅读器知道该按钮的用途。 A

<span>

不是 合适的替代品。

如果您有 2 个用于递增和递减的按钮，那么您应该使用

role="spinbutton

，它正是针对这种情况而存在的。我链接的官方文档还指出可以使用

input type="number"

，但 not 没有明确表示应该优先使用它。有关其他属性（例如

aria-labeldby

、

tab-index

和

aria-valuenow

）的进一步说明，您应该阅读相同的文档。注意，文档还特别指出

aria-valuenow

需要用JS更新。

即使是语义标签，

input type="number"

也没有专门提高可访问性的原因是屏幕阅读器的使用以及这些用户如何使用这些输入。

input type="number"

的优点是它们有一个默认的递增和递减按钮。然而，滥用辅助技术的用户不使用 mcies 而是使用键盘进行导航。它们不会通过单击这些按钮来增加或减少，而是通过使用键盘输入（例如直接在其中键入数字）来更新值。另请注意，您需要

aria-valuemin

和

aria-valuemax

来设置该“输入”元素的限制。

menu {
  padding-left: 0;
  max-width: 20em;
}
menu li {
  list-style: none;
  display: flex;
  border-bottom: 1px solid black;
  padding: 0.5em 0;
  gap: 0.5em;
}

menu li :first-child {
  margin-right: auto;
}

<section>
  <h1>Settings</h1>

  <menu>
    <li>
      <label for="btn-automationStart">Automation</label>
      <button id="btn-automationStart">Start automation</button>
    </li>
    <li>
      <span id="label-numberOfVotes">Number of votes</span>
      <button tabindex="-1" aria-label="decrease by one">-</button>
      <span role="spinbutton" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10" aria-labeldby="label-numberOfVotes">5</span>
      <button tabindex="-1" aria-label="increase by one">+</button>
    </li>
    <li>
      <span id="label-maxVotesOnCard">Max votes on card</span>
      <button tabindex="-1" aria-label="decrease by one">-</button>
      <span role="spinbutton" tabindex="0" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" aria-labeldby="label-maxVotesOnCard">3</span>
      <button tabindex="-1" aria-label="increase by one">+</button>
    </li>
  </menu>
</section>