我有一个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标签,语义都将被删除。
这些列表项应该简单地是div,还是可以使用更好的语义元素?