landmark浅析

作为WAI-ARIA中的一个角色,landmark作为页面的路标可以使辅助技术客户端方便快捷的在相应的区域

间进行快速切换,并读出辅助信息。

以NVDA为例子,按D或者shift+D可以顺序或者逆序的在这些标记了landmark的role的元素间切换,比如

下列代码:

<div role="navigation"><!--导航区书签-->

<ul>

<li><a href="#">news</a></li>

<li><a href="#">books</a></li>

</ul>

</div>

会读成:导航区书签,列表有二个项目,链接news,链接books,推出列表。

landmark有8个值,在NVDA除了application和form没有读出辅助信息,其余6个值对应辅助信息如下(xp

ie7环境/7 ie9环境):

banner:横幅区书签

navigation:导航区书签

search:搜索区书签

main:工作区书签/主内容区书签

complementary:补充区书签/补充内容区书签

contentinfo:内容信息书签

遇到的问题:

1.最开始看到contentinfo的时候,下意识认为是标注给文章的,其实是应该标注给版权和隐私信息区

域。

2.如果一个页面里有多个role="navigation"的话,可使用arai-labelledby来进行关联。推荐的导航标准结构是:

<h2>主导航</h2>

<ul>

<li><a></a></li>

...

<li><a></a></li>

</ul>

那么添加role和arai-labelledby之后的样子应该是:

<h2 id="mainNav">主导航</h2>

<ul role="navigation" aria-labelledby="mainNav">

<li><a></a></li>

...

<li><a></a></li>

</ul>

<h2 id="subNav">副导航</h2>

<ul role="navigation" aria-labelledby="subNav">

<li><a></a></li>

...

<li><a></a></li>

</ul>

3.如果一个表单里只有跟搜索相关的东西,那么这个表单的role设置为search要好与设置为form。

4.complementary和main的层级关系,原文如下:A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.有上下文中对此层级的描述并没有涉及到SHOULD和MUST等关键词,所以如果可以的话尽量保证一个平行的兄弟层级关系,如果不能的话,也不必纠结。

读屏软件支持情况:

国内,不支持,本地测试环境:争渡公益,永德6.3,另外争渡团队成员也告诉我永德最新版也不支持。

国外,支持,本地测试环境:NVDA

landmark算是成本最小见效最快的一种无障碍的优化方式了,据悉争渡下个版本也要开始支持landmark了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏KK的小酒馆

几个作品

3.拥有置于前台的服务,实现Notification的播放、暂停按钮与其他界面同步。

883
来自专栏微信终端开发团队的专栏

iOS微信小视频优化心得

image.png 小视频是微信6.0版本重大功能之一,在开发过程中遇到不少问题。本文先叙述小视频的产品需求,介绍了几个实现方案,分析每个方案的优缺点,最后...

5847
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

1195
来自专栏李成熙heyli

腾讯新闻React同构直出优化实践

按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

6005
来自专栏hightopo

HT图形组件设计之道(二)

934
来自专栏星流全栈

Announcing Vue.js 2.0

1074
来自专栏java技术学习之道

史上最全的前端资源大汇总

5756
来自专栏互联网杂技

20个为前端开发者准备的文档和指南

1.Keyboard Event Viewer(键盘事件可视器) 它是一个可配置的交互式的工具,可以让你观察键盘事件的数据,它可以像在UI事件说明书里显示离线的...

44413
来自专栏葡萄城控件技术团队

程序员Web面试之前端框架等知识

基于前面2篇博客: ? 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门。 但是要动手干,还需要了解一些已有的前端...

2165
来自专栏HTML5学堂

HTML5征程前的准备工作

HTML5学堂:在开启学习HTML5知识之前,一些知识是需要掌握的。推荐在正式学习HTML5的知识之前把如下罗列出的任务搞定。良好的基础知识能够让日后对专业知识...

3433

扫码关注云+社区