Question

我的一些用户是盲人，因此使用辅助技术 - 主要是屏幕阅读器。由于我在Mac上工作，我也可以访问VoiceOver，我用它来查看我的网站＆＃34;听起来＆＃34;喜欢。最明显的一件事是下拉。

当我突出显示一个菜单条目时，它会宣布文本，并说“＆＃34; Link＆＃34; - 这是非常误导的。我必须提供什么role=""才能正确宣布元素？

顺便说一下，我已经在使用Paypal的辅助功能插件。

Answer 1

我使用来自smartmenus.org的Smartmenus。他们有关于如何添加他们的javascript以便制作引导菜单（navbar）辅助的示例。您可以在下载的ZIP中找到示例。

您还可以通过访问他们的网站来测试这是如何工作的。如果他们的菜单看起来像你想要的那样，那么这个解决方案可能是最容易的。

我主要使用它来获得一个完全由键盘操作的菜单系统，一旦我掌握了它，很容易复制新网站的使用。但他们表示，如果我没有弄错的话，他们会为网站支持“全部”辅助技术。

我将它与jquery 1.11.1和bootstrap navbar一起使用。它需要你为你的

添加一个类和一个id

我在

下使用jquery选择器

<nav>
    <div class="nav-inner">
    <ul> <!-- my ul li list is here-->
    </div>
</nav>
    <script>
    $("nav ul").first().addClass('myownclass-for-styling sm sm-simple').attr('id', 'main-menu');            
    </script>

在头部我添加了jquery 1.11.1和bootstrap css + smartmenus所需的css：

<link href="myCDN/smartmenus/css/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="myCDN/smartmenus/css/sm-simple/sm-simple.css" rel="stylesheet" type="text/css" />

我使用sm-simple.css，我为我的用户提供了很多帮助。他们有一个与Bootstrap css合作的CSS，所以试试那个。

在页面的最底部，我加载了所需的javascript（对于我认为的所有辅助技术）：

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="http://cdn2.flexweb.no/smartmenus/jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Keyboard Addon -->
<script type="text/javascript" src="http://myCDN/smartmenus/addons/keyboard/jquery.smartmenus.keyboard.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
    $(function() {
        $('#main-menu').smartmenus({
            subMenusSubOffsetX: 1,
            subMenusSubOffsetY: -8
        });
        $('#main-menu').smartmenus('keyboardSetHotkey', '123', 'shiftKey');
    });
</script>
  <script type="text/javascript">
    addonScriptSrc = [ ['SmartMenus jQuery Keyboard Addon', 'http://myCDN/smartmenus/addons/keyboard/jquery.smartmenus.keyboard.js'] ];
    addonScriptInit = "\t\t$('#main-menu').smartmenus('keyboardSetHotkey', 123, 'shiftKey');\n";
  </script>

我希望这会有所帮助。

在Bootstrap3中创建可访问的下拉列表

1 个答案: