问题描述
在编写 HTML5 内容时,向读者描述如何浏览 UI selection path(菜单、标签和对话框等内容,每一步都有多个选择),例如:
选项 ▸ 配置... ▸ 键盘快捷键
-
标签应该是什么类型的元素?
-
分隔符是什么类型的元素(如果有)? (还是应该用 CSS 插入?)
-
整个序列应该包含在什么样的元素中?
请注意,这不是关于 formatting 的问题,也不是关于交互元素的问题。它纯粹是关于静态描述性文本中语义正确的标记。
解决方法
有些事情仍将取决于实际用例,但基本上,您使用的是 <nav>
,然后是一堆 <ul><li>
。
-
打开/关闭部分菜单的开关应该是
<button>
,其中aria-expanded
设置为"true"
或"false"
,用于打开和关闭状态。 -
结束项应该是
<a>
如果它们重定向到不同的屏幕,或者<button aria-pressed="true">
如果它们只是开/关切换(按 aria-pressed 根据状态而变化). -
如果整个菜单将焦点和/或可见性从应用程序的其余部分移开(有点像弹出窗口),您可能希望将其包裹在
<div role="dialog" aria-modal="true" aria-label="Menu"> <div role="document">
内并添加一个“关闭" 按钮作为第一个孩子。
以下是完整标记的示例:
<nav role="navigation" aria-label="Full menu">
<!--
the following is useful if the entire menu is behind a single button,otherwise,you can start directly at the <ul>
-->
<button type="button" aria-expanded="true">
<span>Menu</span>
</button>
<!-- end of "single entry point" -->
<!--
the following is in case you're making a "pop-in" that obscures the rest of the page,otherwise you can skip them
-->
<div role="dialog" aria-modal="true" aria-label="Menu">
<div role="document">
<button type="button" aria-label="Close menu">
<span>Close</span>
</button>
<!-- end of "pop-in" wrapper -->
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Options</span>
</button>
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Config</span>
</button>
<ul>
<li>
<!-- use <a> if you're redirecting to somewhere -->
<a href="/to-keyboard-config">keyboard</a>
<!-- use <button> if it's just a toggle -->
<button type="button" aria-pressed="true">toggle Off</button>
</li>
<!-- other Options > Config > * -->
</ul>
</li>
<!-- other Options > * -->
</ul>
</li>
<li>
<button type="button" aria-expanded="false">
<span>Tools</span>
</button>
<ul>
<!-- all Tools > * menu items -->
</ul>
</li>
<!-- other menu categories -->
</ul>
</div>
</div>
</nav>
Tbh,根据您需要的外观,样式可能会很麻烦,因为要使其具有正确的语义,您需要具有 <ul><li>
的这种“递归”结构和 {{1} } 应该直接跟在他们正在扩展的 <button aria-expanded>
后面。
额外问题:您不能使用 CSS <ul>
否则浏览器将失去语义。
严格回答您的问题:
标签应该是什么类型的元素?
基本上,display: contents
具有适当的 <button type="button">
属性。有时 aria
用于最终项目,如果它们将用户重定向到另一个页面。
分隔符是什么类型的元素(如果有)? (还是应该用 CSS 插入?)
CSS 可能是最好的,从语义的角度来看,DOM 将足够分离。如果您需要在标记中使用分隔符,请尝试添加 <a>
,如果它们包含一些“可读”元素(span、svg、img 等)。
整个序列应该包含在什么样的元素中?
它应该是 aria-hidden="true"
,即使规范规定 <nav role="navigation">
不应具有 nav
属性,因为它本质上是 role
,但并非所有浏览器都能正确实现.