Question

（navigation layout picture）

我有标签和子标签的导航布局，我希望通过text-reader / lynx进行访问。它包括主页“Startseite”，“Über”，“Interessant”，“Orte”，以及子页“Linköping”，“München”和“Baustelle”。因此逻辑结构是：

首页
Über
Interessant
- 林雪平
- München的
- 巴斯特尔
奥尔泰

但是由于我使用了几个div-tags的布局，它只能在lynx中产生这个：

首页
尤伯杯
Interessant
林雪平
慕尼黑
巴斯特尔
奥尔泰

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

（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>

请记住，我的主要任务是使文本阅读器/ 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

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

以下是完整动态ARIA菜单示例http://dylanb.github.io/bower_components/a11yfy/examples/menu.html

的链接

你需要确保每个菜单项都是键盘可聚焦的，使用锚标记上的href属性只要你找到'click'事件并且没有做任何与mousedown / mouseup有关的事情就会为你做这件事等

Answer 2

实现这一目标的一种方法可能是绝对定位子菜单 - 当然要求您事先知道会有足够的空间，以便物品不会超过多行（相反，你有一个通过媒体查询为小屏幕提供替代方案）。

因此，您可以将外部ul（或nav本身）relative定位，然后在:hover上定位您创建的主菜单项ul 1}}可见，它绝对定位在主菜单项的下方 - 就像这样：http://jsfiddle.net/0rpyLqtn/

其他轻微的变化很容易想象;如果您不希望在主菜单项的单行下面有“空白区域”，则可以f.e.给ul一个border-bottom而不是margin-bottom，并使其边框颜色始终可见，如下所示：http://jsfiddle.net/0rpyLqtn/1/

由于您有可访问性，您可能还需要注意这种菜单在没有“鼠标”作为输入设备的设备上的行为方式。通过键盘访问这样的菜单可能会非常棘手，而在触摸屏上，基于:hover的菜单也可能无法正常工作。无论如何，已经在网上讨论过这样的问题，所以通过一些研究，您应该能够找到解决这些问题的解决方案/解决方法。

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

2 个答案: