用于菜单或 UI 选择序列的语义 HTML5 [关闭]

Question

在编写 HTML5 内容时，向读者描述如何在 UI selection path 中导航（例如菜单、选项卡和对话框，每个步骤都有多种选择），例如：

选项 ▸ 配置... ▸ 键盘快捷键

• 标签应该是什么样的元素？

• 分隔符是什么类型的元素（如果有）？ （还是应该用 CSS 插入它们？）

• 整个序列应该包含在什么样的元素中？

请注意，这不是关于formatting 的问题，也不是关于交互元素的问题。它纯粹是关于静态描述性文本中语义正确的标记。

Answer 1

有些事情仍将取决于实际用例，但基本上，您使用的是<nav>，然后是一堆<ul><li>。

• 打开/关闭部分菜单的开关应为<button>，其中aria-expanded 设置为"true" 或"false" 用于打开和关闭状态。

• 如果它们重定向到不同的屏幕，则最终项目应该是 <a>，或者如果它们只是开/关切换（根据状态改变 aria-pressed），则应该是 <button aria-pressed="true">。

• 如果整个菜单的焦点和/或可见性远离应用程序的其余部分（有点像弹出窗口），您可能希望将其包装在 <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> 的这种“递归”结构，而 <button aria-expanded> 应该是直接的其次是 <ul> 他们正在扩展。

额外问题：您不能使用 CSS display: contents 否则浏览器将失去语义。

---

严格回答您的问题：

标签应该是什么样的元素？

基本上，<button type="button"> 具有正确的 aria 属性。有时<a> 用于将用户重定向到另一个页面的最终项目。

分隔符是什么类型的元素（如果有）？ （还是应该用 CSS 插入它们？）

CSS 可能是最好的，从语义的角度来看，DOM 将足够分离。如果您需要在标记中使用分隔符，请尝试添加 aria-hidden="true"，如果它们包含一些“可读”元素（span、svg、img、...）。

整个序列应该包含在什么样的元素中？

它应该是 <nav role="navigation">，尽管规范声明 nav 不应该有 role 属性，因为它本质上是 navigation，但并非所有浏览器都能正确实现。