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 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

VScode编辑器神插件!让你入门前端轻松打怪升级!

4304
来自专栏程序员的碎碎念

Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com 在这个官方网站里有关于...

3635
来自专栏技术翻译

使用Java制作Facebook Messenger机器人的7个简单步骤

我们今天将使用JBot制作Facebook Messenger Bot,因为我们之前使用JBot制作Slack Bot。

661
来自专栏转载gongluck的CSDN博客

SAPI SDK的介绍

我们都使用过一些某某词霸的英语学习工具软件,它们大多都有朗读的功能,其实这就是利用的Windows的TTS(Text To Speech)语音引擎。它包含在Wi...

3497
来自专栏freesan44

python 携程爬虫开发笔记

最近购买了《Python3 爬虫、数据清洗与可视化实战》,刚好适逢暑假,就尝试从携程页面对广州的周边游产品进行爬虫数据捕捉。 因为才学Python不够一个星期...

1211
来自专栏Python专栏

自制微信机器人:群发消息、自动接收好友

这些使用客户端工具都无法解决,因为客户端工具的一个特点就是native,需要你直接操作电脑,不方便。

554
来自专栏静晴轩

Html<a>标签href的困惑记载

近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

3415
来自专栏逍遥剑客的游戏开发

UE4学习笔记(四): 开发体验

2346
来自专栏简书专栏

基于bs4+requests的安居客爬虫

1.代码可以直接运行,请下载anaconda并安装,用spyder方便查看变量 或者可以查看生成的excel文件 2.依赖库,命令行运行(WIN10打开命令...

1021
来自专栏ShaoYL

iOS定位--CoreLocation框架

36410

扫码关注云+社区