可访问性和绝对定位？

Question

我们有一个看起来像

的“烧烤菜单”

当您单击它时，将显示一个弹出窗口（class“打开”被添加到 div）。

这是通过固定定位完成的。然而，可访问性程序似乎会对这种定位元素做出反应。我们试用 SortSite 5。

这真的是个好东西吗？

其实定位是“固定”的，也叫“绝对”。可能是同样的事情，因为原因是屏幕 readers 对这些元素有问题。

我们真的希望通过这种方式让菜单像弹出窗口一样，当您单击 bbq 按钮时，文档不应以奇怪的方式增长。例如，当我们尝试浮动弹出窗口时，丑陋发生了。

如何让这些程序开心？
我应该自己尝试使用屏幕 reader 吗？
我应该有一个 <nav> 元素吗？

html

<div id="drawer">
  <table role="presentation" class="buttons" style="width: 100%">
    <tr>
       <td class="bbq-parent">
         <div class="bbq"></div>
       </td>
       <td class="logo-parent">
         <div class="logo"
           onclick="javascript:location='.'; event.stopPropagation();"
           onkeypress="javascript:location='.'; event.stopPropagation();"
           tabindex="0"></div>
       </td>
     </tr>
   </table>
   <ul>
     <li><a href="item1.html">item 1</a></li>
     <li><a href="item2.html">item 2</a></li>
     <li><a href="item3.html">item 3</a></li>
     <li><a href="item4.html">item 4</a></li>
   </ul>
</div>

css

#drawer
{
  position: fixed;
  z-index: 1;
  top: 5px;
  left: 5px;
}

#drawer ul
{
  padding-left: 0;
  display: none;
  list-style: none;
  margin-top: -10px;
}

#drawer.open ul
{
  display: block;
}

#drawer .bbq
{
    background: url("Images/bbq.svg") no-repeat;
    background-size: 100% auto;
    width: 23px;
    height: 25px;
    cursor: pointer;
}

Answer 1

认为这或多或少是标记问题，而不是 css 问题。

查看 Chrome 插件 Wave and Axe 并查看他们报告的内容。
查看 w3.orgs: wai-aria-practices examples for menubutton for suggestions on how to comply with WCAG in this case. The example at the bottom of that page 显示完整标记。

似乎 this post on mobile menu accessibiliy from a11ymatters 也是这个问题的好读物...

Answer 2

按钮应该有一个 button 角色，或者（最好）它应该是一个合适的 <button> 元素（它给你 tabindex 和基本的键盘操作 'for free'), 尽管您可能需要删除一些用户代理样式以保持现在的外观。

您还应该向按钮添加 aria-haspopup="true"，因为它会打开一个弹出菜单。在菜单打开时添加 aria-expanded="true" 以及在菜单关闭时再次删除它会很有用。辅助技术了解这些属性，并使用它们来传达按钮的状态。您还可以在属性选择器中使用它们来更改样式。这比使用自定义 class 名称（例如 open）要好得多，因为它一石二鸟。

还有另一个 ARIA 属性，用于将控件连接到它所控制的对象。它有许多概念和实施问题，使其不可取。更多 details about the failures of aria-controls are available from heydonworks.

鉴于aria-controls有这么多问题，菜单应该紧跟在源顺序中打开它的按钮之后，这将在两者之间建立联系。这种模式得到了辅助技术的良好支持。但我不确定这是否适合您的介绍 table.

顺便说一句，您可以通过 CSS display 值在不使用 <table> 的情况下获得 table-layout。有 table、table-row、table-cell、flex、grid 等。所有这些都比现在使用 table 标记更可取。 flex 可能是最容易使用的。

按钮必须有一个可访问的名称（即文本标签）。这不一定是可见的。 'hamburger icon' 习惯用法已为菜单按钮建立了良好的基础。可以使用 aria-label="toggle menu" 或任何表达按钮功能的内容来实现不可见标签。

并且是，如果这是一个导航菜单，一定要把它包裹在<nav>元素中，或者在[=29上使用role="navigation" =].这为辅助技术提供了访问链接的替代机制，尽管我会考虑通过将关闭的菜单移动到负坐标而不是使用 display:none; 来隐藏关闭的菜单，这样即使没有使用菜单按钮，这些机制也能工作.

我会支持乔纳斯·卡尔鲍姆 (Jonas Carlbaum) 的建议，看看 w3 咏叹调练习页面。他们有一个导航菜单的例子，使用了这里提到的许多建议，并有适当的焦点处理，您可以从中得到启发。

可访问性和绝对定位？

Accessibility and absolute positioning?

html

wcag

wcag2.0

web-accessibility

sortsite

html

css