用于菜单或 UI 选择序列的语义 HTML5

如何解决用于菜单或 UI 选择序列的语义 HTML5

在编写 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，但并非所有浏览器都能正确实现.