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

Question

(导航布局图)

我有选项卡和子标签的导航布局，我想通过文本阅读器/lynx访问这些选项卡。它包括主页"Startseite“、”M“、"Interessant”、"Orte“以及子页”Link ping“、"München”和"Baustelle“。因此，逻辑结构是：

• 星光石
• 比伯
• 干预型
  • 林克平
  • 明辰
  • 鲍斯特尔

​

• 奥特

但是，由于我使用了几个div标记的布局，所以它只生成了lynx：

星光石

比伯

干预者

林克平

明辰

鲍斯特尔

奥特

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

(1)如何改进布局，使其可通过文本阅读器/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:内联块}的样式：

    <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

实现这一目标的一种方法是绝对定位子菜单--当然，这要求您事先知道有足够的空间，这样项目就不会超过多行(resp )。您可以通过媒体查询来选择更小的屏幕)。

因此，您可以将外部ul (或nav本身) relative定位到:hover上，然后在主菜单项上将子ul定位为可见的，这绝对是以这样的方式放置在主菜单项线下的--比如：http://jsfiddle.net/0rpyLqtn/。

其他细微的变化是很容易想象的；如果你不想在主菜单项的单行下面出现“空白”，你可以使用f.e。给该ul一个border-bottom而不是margin-bottom，并使它的边框颜色在任何时候都可见，如下所示：http://jsfiddle.net/0rpyLqtn/1/

由于您考虑到了可访问性，您可能还需要注意这种菜单在没有“鼠标”作为输入设备的设备上的行为。让这样的菜单可以通过键盘访问是很困难的，而在触摸屏上，基于:hover的菜单也可能不太好用。无论如何，这些问题已经在网上讨论过了，所以只要稍微研究一下，就可以找到解决这些问题的办法/解决办法。

Answer 2

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

下面是一个完整的动态ARIA菜单示例组件/a11yfy/示例/menu.html的链接

您需要确保每个菜单项都是可用于键盘的，使用锚标记上的href属性将为您做到这一点，只要您查找“click”事件，并且不要对mousedown/mouseup做任何奇怪的事情。