使文本阅读器可以访问导航

Question

我有选项卡和子选项卡的导航布局，我想通过 text-reader/lynx 访问它们。它由主页面"Startseite"、“Über”、"Interessant"、"Orte"以及子页面"Linköping"、"München"和[=64组成=].因此，逻辑结构为：

开始网站
超级
有趣
- 林雪平
- 慕尼黑
- 鲍斯特尔
奥尔特

但是因为我使用了几个 div 标签的布局，它只在 lynx 中产生这个：

开始网站
超级
有趣
林雪平
慕尼黑
鲍斯特尔
奥尔特

现在的问题（或我还不知道如何实施的解决方案）是：

(1) 如何改进我的布局以使其可通过 text-reader/lynx
访问 ... 或
(2) 如何调整无序列表和子列表（见代码）的布局，让它看起来像我当前的选项卡式导航布局？

    <nav>
    <ul id="mainpages">
        <li><a href="./">Startseite</a></li>
        <li><a href="./">Über</a></li>
        <li><a href="./">Interessant</a>
                <ul id="sub1">
                    <li><a href="./">Linköping</a></li>
                    <li><a href="./">München</a></li>
                    <li><a href="./">Baustelle</a></li>
                </ul>
        </li>
        <li><a href="./">Orte</a></li>
    </ul>
</nav>

请记住，我的主要任务是使其 text-reader/lynx 易于访问。我虽然使用这样的布局，因为它很容易用 #some_ul_id {display: inline-block}:

设置样式

    <nav>
    <ul id="mainpages">
        <li><a href="./">Startseite</a></li>
        <li><a href="./">Über</a></li>
        <li><a href="./">Interessant</a></li>
        <li><a href="./">Orte</a></li>
    </ul>

    <ul id="sub1">
        <li><a href="./">Linköping</a></li>
        <li><a href="./">München</a></li>
        <li><a href="./">Baustelle</a></li>
    </ul>
</nav>

我的第三个问题是：

(3) 这是好的做法吗？我应该这样做吗？

这是最简单的方法，但解决方案 (2) 会更好，因为它更符合逻辑。

Answer 1

实现此目的的一种方法是绝对定位子菜单——当然，这需要您事先知道有足够的空间 space，这样项目就不会跨越多行（相应地，对于较小的屏幕，您手头有一个替代方案，即通过媒体查询）。

因此，您可以将外部 ul（或 nav 本身）放置在 relative，然后在 :hover 上的主菜单项上放置子- ul 可见，其绝对定位使其位于主菜单项行下方 – 如下所示：http://jsfiddle.net/0rpyLqtn/

其他细微的变化很容易想象；如果您不想在单行主菜单项下方显示“空白 space”，您可以 f.e。将 ul 设为 border-bottom 而不是 margin-bottom，并使其边框颜色始终可见，如下所示：http://jsfiddle.net/0rpyLqtn/1/

考虑到可访问性，您可能还想注意这种菜单在没有“鼠标”作为输入设备的设备上的表现。让这样的菜单可以通过键盘访问可能很棘手，在触摸屏上，基于 :hover 的菜单可能也不太好用。无论如何，这些问题已经在网上讨论过了，所以通过一些研究你应该也能找到这些问题的solutions/workarounds。

Answer 2

从可访问性的角度来看，标记解决方案以使其在语义上代表您要实现的目标的方法是使用 WAI-ARIA menubar、menu 和各种 menuitem 角色。您还应该使用 aria-haspopup="true" 属性来显示子菜单，并使用 aria-expanded 属性来跟踪菜单何时展开。为了实现层次结构的语义标记，您将需要层次结构列表，因为这是以可理解的方式表示层次结构的最简单方法。

这是一个 link 到完整的动态 ARIA 菜单示例 http://dylanb.github.io/bower_components/a11yfy/examples/menu.html

您需要确保每个菜单项都是键盘可聚焦的，只要您查找 'click' 事件并且不做任何时髦的事情，使用锚标记上的 href 属性就可以为您做到这一点mousedown/mouseup 等等

使文本阅读器可以访问导航

Make Navigation accessible for text readers

html

navigation

accessibility

list

html-lists