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

相关文章

来自专栏iKcamp

翻译 | 使用A-Frame打造WebVR版《我的世界》

原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是...

4079
来自专栏腾讯大数据的专栏

iOS9的新特性3D-Touch

Apple在iphone6s中推出了的新特性:3D-Touch,由于相关的文档还比较少,我在学习中总结了一下可能有用的功能点。 1. 什么是3D-Touch ...

18810
来自专栏smy

video.js支持m3u8格式直播

为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接...

41612
来自专栏软件开发

前端机试面试题

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

1103
来自专栏腾讯IVWEB团队的专栏

NOW 直播和微信小程序那些事

微信小程序从发布开始,可谓赚足了眼球,一度引发了开发界“全民学JavaScript”的梗。为了跟上时代步伐,我们NOW直播团队也在发布后第一时间尝鲜,本文就来扒...

2.7K2
来自专栏快乐八哥

使用jQuery UI的draggable和droppable完成拖拽功能--介绍

第一部分--拖拽介绍 在https://code.csdn.net/2013ossurvey中最后一个开源项目就是zTree,一方面是因为自己看到有项目中使用了...

1725
来自专栏大数据学习笔记

Flink学习笔记:2、Flink介绍

2、Flink介绍 Some of you might have been already using Apache Spark in your day-to-...

3295
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南:(三、性能篇)

 卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements、Network、Resources基础功能部分和Sources进阶功...

442
来自专栏Android开发经验

工作中一些细小的经验总结随时继续记录

1413
来自专栏web前端教室

本周末的QQ群视频--还是电商网站的事

主要讲了如何开发“点击某商品,进入商品详情页”。 产品列表页,就是这个电商网站的首页,也是一般多数电商网站的首页,在首页上尽量多的把商品展示出来。 一般来讲,它...

1775

扫码关注云+社区