该技巧的目的是为页面上区域提供编程式访问。路标角色(或“landmark
”)编程式标识页面区域。路标帮助辅助技术用户导航页面,并且帮助用户更容易的导航到页面中的不同区域。
路标为辅助技术用户提供一个简单方式跳过在多个页面上重复的内容块,并且告知他们页面的编程式结构。例如,如果在每个页面上都有一个通用导航菜单,路标角色可以用来跳过导航菜单并在区域间导航。这将会减少辅助技术用户和键盘用户的困扰和用来tab浏览大量页面内容的时间,有点像传统跳转链接机制。视障用户可能对新网站的菜单很熟悉,且只对页面中主要内容感兴趣,想要能够简单地导航到“主内容”路标,跳过复杂地菜单链接。在另一种情景下,视障用户可能想要快速找到导航菜单,并且可以通过跳转到“导航”路标实现。
路标也可以帮助视觉纯键盘用户使用浏览器插件导航到页面中区域。
使用role
属性将路标插入到页面中标记区域。该属性的值是路标名称。role
的值如下:
banner:
包含主要标题或页面内部标题的区域。
contentinfo:
包含父文档信息的区域,例如版权和隐私声明链接。
form:
呈现表单相关联元素集合的文档区域,里面某些部分呈现的可编辑值可以被提交到服务器处理。
main:
文档中的主内容。在几乎所有的页面中,只有一个main
角色。
navigation:
适用于导航文档或相关文档的链接集。
search:
web文档的搜索工具。
application:
(注意:应用角色应该只能被用在警告中,因为它给屏幕阅读软件一个信号来关闭正常web导航控件。小程序应该通常不给application:
角色,除非它用起来不像个网页,且很多用户不使用辅助技术测试。)
存在这样的情况,一个特定的路标可以在一个页面上使用多次,例如一级和二级导航菜单。在这种情景下,标识角色应该可以相互区分,使用有效技术标识区域(详见以下样例)。
路标应该支持原生语义标记,例如HTML标题、列表和结构标记。路标被WAI-ARIA-aware辅助技术解释,且不能被浏览器直接呈现给用户。
最好将页面中内容都是用路标标记,这样依靠路标的屏幕阅读器用户可以在区域间导航且不会漏过内容。
以下样式展示了路标可能被天机到HTML4或XHTML1.0文档中:
效果
aria-labelledby
以下样例展示了怎样最好地在同一个网页文档中添加超过两个的相同路标。例如,如果导航路标在一个页面中使用多次,每一个实例可能使用aria-labelledby
添加一个不一样的标签。
效果
以下样例展示了怎样最好地在同一个网页文档中添加超过两个的相同路标。例如,如果导航路标在一个页面中使用多次,且页面中不存在可以作为标签的文本。
效果
以下样例展示了一个具有“search
”路标的搜索表单。搜索觉得一般会去到表单区域或包裹搜索表单的div
。
效果