twitter-bootstrap – 为什么Bootstrap标签有role =“presentati
我正在从Bootstrap框架扩展一个设计系统.其中一个关键目标是可访问性.当实现Bootstrap选项卡时,我看到他们将role =“presentation”应用于其导航列表中的列表项.
所以我从Bootstrap模板中汇集了一小段测试HTML: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> ARIA规范说,演示文稿是一个角色:
在我看来,< li>元素与使用辅助功能设备的用户具有结构相关性,因为它们告诉您有多少个标签.例如,如果您想要发现第三个标签包含您感兴趣的信息,请浏览列表,并知道有三个选项卡可以让您更快速地找到想要的内容. 此外,当使用ChromeVox访问该测试HTML时,列表将被相同地声明.所以似乎这个角色没有任何实际的效果. 我已经google了这个问题,但没有发现任何讨论.那么有没有人知道为什么这是Bootstrap框架的一部分? 解决方法
请参阅Marco在
https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/的可访问标签
他的实现在li上有role =“presentation”,表示“屏幕阅读器应该忽略列表项本身”,然后在链接上添加“选项卡”角色,将角色映射到预期的屏幕阅读器可识别的元素类型. “ 在引导辅助功能项目(https://github.com/paypal/bootstrap-accessibility-plugin/issues/59)中的一个问题中提到的一点是(正确或错误)选项卡通常用作导航,因此总是包含角色选项卡列表和选项卡是不合适的.正如Marco的文章所指出的:“在很多情况下,选项卡不是适当的语义. 由于屏幕阅读器和浏览器的单独组合不能以相同的方式支持这一点,所以我们的工作并不容易. (见这篇文章写:http://john.foliot.ca/aria-hidden/) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |