Question

我的问题是这个问题的续集

Keyboard accessible web dropdown menus?

虽然上述问题说明了

我们想出了如何显示菜单用键盘快捷键，但我不是确定如何选择其中一个条目

我已经想出如何使用accesskeys选择单个菜单项（并通过加下划线键字母），但我不知道如何在按键上弹出菜单。

菜单是仅XHTML / CSS菜单，XHTML是

<ul>
    <li>Menu 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

Answer 1

你不能。

使用accesskey将激活或聚焦链接（取决于浏览器）。

一旦链接具有焦点，您就可以使用以下内容显示菜单：

ul#mainMenu > li > a:focus + ul { display: block }

但是，你将无法与菜单内的任何内容互动，因为一旦焦点移开它就会消失。

CSS是一个很好的描述演示文稿的工具 - 这是它的设计目的 - 它是一个非常糟糕的工具，用于描述交互逻辑。 JavaScript就是为此而设计的，因此请使用正确的工具。

我遇到的问题最少的下拉菜单脚本是UDM4，但我通常会try to avoid drop downs entirely。

Answer 2

Spudley：焦点不像悬停那样工作的原因是悬停动作被分配给包含链接的ul或li。弹出菜单是ul / li中的一个子项，因此您仍然将鼠标悬停在ul / li内的元素上。焦点只能放在键盘交互式对象上，如链接和表单域。这意味着当链接具有焦点时，您可以使用Quentin提到的CSS3选择器显示您的菜单，但菜单不是锚标记的子项，为了使它成为子菜单，您的子菜单必须位于一个标签。您可能会想到这会导致子菜单中的链接出现问题。尝试将悬停标记放在a而不是包含a的元素上，您将获得与焦点方法相同的结果。

昆文：我目前正在研究的一个原因是响应式设计和可访问性的结合。我的全屏尺寸菜单已完全展开，但当您缩小屏幕时，菜单将成为页面上的一个小按钮，可在悬停/焦点上展开以节省移动/电话屏幕上的屏幕空间。我也试图避免使用javascript，并根据可访问性要求使其键盘可访问。由于您列出的原因，我认为现在没有办法做到这一点。所以我的后退是使用javascript隐藏菜单和显示，当它未启用时总是显示菜单。对移动用户不太友好（js已禁用），但他们仍然可以访问所有内容以获取可访问性要求。

键盘友好的CSS菜单

2 个答案: