Css 仅使用键盘时使下拉菜单可访问_Css_Drop Down Menu_Accessibility

Css 仅使用键盘时使下拉菜单可访问

css drop-down-menu

Css 仅使用键盘时使下拉菜单可访问,css,drop-down-menu,accessibility,Css,Drop Down Menu,Accessibility,目前，我的下拉菜单仅在用户滚动时出现我希望这样，如果您按下TAB键，下拉列表将以相同的方式显示我的菜单基于以下指南：我唯一更新代码的是CSS中的样式以下是我菜单的一部分： HTML: 请上传您的标记和样式。无论如何，这里有一个在tab上工作的示例菜单 .dropdown { position: relative; display: inline-block; font-size: 110%; } .dropdown ul {

目前，我的下拉菜单仅在用户滚动时出现

我希望这样，如果您按下TAB键，下拉列表将以相同的方式显示

我的菜单基于以下指南：

我唯一更新代码的是CSS中的样式

以下是我菜单的一部分：

HTML:

请上传您的标记和样式。无论如何，这里有一个在tab上工作的示例菜单

  .dropdown {
       position: relative;
       display: inline-block;
       font-size: 110%;
  }

 .dropdown ul {
      position: absolute;
      top: -100%;
      left: 100%;
      display: none;
      background-color: inherit;
      padding: 0;
      list-style: none;
      border: 1px solid #ccc; 
 }

 .dropdown ul li {
      position: relative;
      list-style: none;
      margin: 5px 0;
      background-color: inherit;
 }

 .dropdown ul li a {
      display: block;
      padding: 3px 10px;
 }

 .dropdown ul li a:hover {
      background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
      display: block;
      top: 0;
      background-color: inherit; 
  }

  .dropdown ul li:hover > a {
      background-color: #85ddff;
  }

  .dropdown:focus > ul {
      display: block;
  }

//加价

    <div class="dropdown" style="background-color: white;" tabindex="1">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>

    </ul> 
</div>


菜单


水果

苹果
橙色的
葡萄
香蕉



蔬菜

柠檬
黄瓜
甜瓜

您需要提供一个tabindex值以使元素可聚焦（默认情况下不可聚焦）。。然后在元素处于焦点时触发css3:focus选择器

如果您写下确切的要求，可能会有所帮助。请上传您的标记和样式。无论如何，这里有一个在tab上工作的示例菜单

  .dropdown {
       position: relative;
       display: inline-block;
       font-size: 110%;
  }

 .dropdown ul {
      position: absolute;
      top: -100%;
      left: 100%;
      display: none;
      background-color: inherit;
      padding: 0;
      list-style: none;
      border: 1px solid #ccc; 
 }

 .dropdown ul li {
      position: relative;
      list-style: none;
      margin: 5px 0;
      background-color: inherit;
 }

 .dropdown ul li a {
      display: block;
      padding: 3px 10px;
 }

 .dropdown ul li a:hover {
      background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
      display: block;
      top: 0;
      background-color: inherit; 
  }

  .dropdown ul li:hover > a {
      background-color: #85ddff;
  }

  .dropdown:focus > ul {
      display: block;
  }

//加价

    <div class="dropdown" style="background-color: white;" tabindex="1">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>

    </ul> 
</div>


菜单


水果

苹果
橙色的
葡萄
香蕉



蔬菜

柠檬
黄瓜
甜瓜

您需要提供一个tabindex值以使元素可聚焦（默认情况下不可聚焦）。。然后在元素处于焦点时触发css3:focus选择器

如果您写下您的确切要求，可能会有所帮助。

看看本教程，让键盘完全可访问并不是一个很好的起点。不幸的是，按下tab键不仅仅是显示下拉列表的问题

一旦你通过了每个下拉列表中的几个项目，键盘用户就不必通过每个选项

有两种主要方法可以访问此类菜单：

传统方法：使每个顶级链接进入一个登录页，其中包含菜单中的链接，并隐藏下拉菜单，不让键盘使用

HTML5（新）方法：使用WAI-ARIA标记和大量脚本来实现完全的键盘可访问性

传统的方法如果相当简单，您只需要使用

display:none正确隐藏屏幕外的菜单开始的类上的code>。下拉列表\u 1列

。这意味着键盘用户不会在子菜单中使用tab键
然后使用display:block
在悬停（非焦点）上显示子菜单，CSS从这里开始：
#menu li:hover .dropdown_1column

为了实现HTML5/新方法，我将从Adobe的开源“”开始。从头开始做这件事需要大量的工作，除非你知道如何使用各种各样的用户代理进行测试，否则它不可能像Adobe那样工作。看看本教程，让键盘完全可访问并不是一个很好的起点。不幸的是，按下tab键不仅仅是显示下拉列表的问题
一旦你通过了每个下拉列表中的几个项目，键盘用户就不必通过每个选项
有两种主要方法可以访问此类菜单：
传统方法：使每个顶级链接进入一个登录页，其中包含菜单中的链接，并隐藏下拉菜单，不让键盘使用
HTML5（新）方法：使用WAI-ARIA标记和大量脚本来实现完全的键盘可访问性
传统的方法如果相当简单，您只需要使用display:none正确隐藏屏幕外的菜单开始的类上的code>。下拉列表\u 1列
。这意味着键盘用户不会在子菜单中使用tab键
然后使用display:block
在悬停（非焦点）上显示子菜单，CSS从这里开始：
#menu li:hover .dropdown_1column

为了实现HTML5/新方法，我将从Adobe的开源“”开始。从头开始做这件事需要大量的工作，除非你知道如何使用各种各样的用户代理进行测试，否则它不可能像Adobe的一样好用。
这里是一个演示。这是与纯css最接近的
<section class="header">
        <div class="dropdown">
            <ul>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 1</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 2</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 3</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 4</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 5</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </section>

这是一个演示。这是与纯css最接近的
<section class="header">
        <div class="dropdown">
            <ul>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 1</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 2</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 3</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 4</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="radio" name="dropdown" />
                    <a>Menu 5</a>
                    <ul>
                        <li>
                            <a tabindex="1">Submenu 1</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 2</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 3</a>
                        </li>
                        <li>
                            <a tabindex="1">Submenu 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </section>

谢谢你，我现在更新了我的问题，包括要求的标记和样式。你想通过选项卡访问子菜单吗？这里我是网站：你可以看到，如果你将鼠标悬停在顶部菜单上，下拉菜单就会出现。然而，如果你与他们发生冲突，他们就不会。我想它，所以当你标签的下拉菜单出现，然后你可以继续标签下来，你不能做一个完整的标签菜单使用纯css。问题是焦点事件不会出现泡沫。因此，当孩子注意力集中时，父母就会失去注意力，变得不可见。但你可以做一个近乎完美的。给我点时间。我会放一个演示。谢谢你，我现在更新了我的问题，包括要求的标记和样式。你想通过选项卡访问子菜单吗？我在这里网站：你可以看到，如果你将鼠标悬停在顶部菜单上，就会出现下拉菜单。然而，如果你与他们发生冲突，他们就不会。我想它，所以当你标签的下拉菜单出现，然后你可以继续标签下来，你不能做一个完整的标签菜单使用纯css。问题是焦点事件不会出现泡沫。因此，当孩子注意力集中时，父母就会失去注意力，变得不那么专注