语义html-组合框中的自动完成结果

问题描述 投票:0回答:1

我有一个role="combobox",当键入内容时,它会打开一个role="listbox"listbox具有项目列表,其中<li>标记为role="presentation",子元素标记为role="option"。在这种情况下,列表项具有2位信息,即主要文本和次要文本。这些列表项应该仅仅是div,还是有一个更好的语义元素可以使用?

<input role="combobox" aria-haspopup="true" aria-autocomplete="list" ... />
<ul role="listbox">
  <li role="presentation">
    <div role="option">
      <div> primaryText </div>
      <div> sencondaryText </div>
    </div>
  </li>
</ul>

是否有更多语义方法来表示主要和次要文本?在类似的情况下,显示搜索结果时,我看到每个搜索结果都是<article>,标题是<header><h1>,辅助文本是常规<div>。这种结构在这里有意义吗?

[此外,在某些情况下,结果需要带有标题,例如:“结果”在这种情况下,我通常将结构更改为:

<input role="combobox" aria-haspopup="true" aria-autocomplete="list" ... />
<div class="container">
  <div> Results </div>
  <ul role="listbox">
    <li role="presentation">
      <div role="option">
        <div> primaryText </div>
        <div> sencondaryText </div>
      </div>
    </li>
  </ul>
</div>

在这种情况下,使用这样的<section>是有意义的

<input role="combobox" aria-haspopup="true" aria-autocomplete="list" ... />
  <section class="container">
    <header> Results </header>
    <ul role="listbox">
      <li role="presentation">
        <div role="option">
          <div> primaryText </div>
          <div> sencondaryText </div>
        </div>
      </li>
    </ul>
  </section>

UPDATE:

如此处所述:https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role任何具有role =“ option”角色的孩子都会表现出好像已应用了role =“ presentation”的行为,因此,不管它们是div还是span还是heading标签,语义都将被删除。

html accessibility semantic-markup web-accessibility document-outline
1个回答
1
投票

这些列表项应该简单地是div,还是可以使用更好的语义元素?

© www.soinside.com 2019 - 2024. All rights reserved.