简单介绍HTML5 Landmark
最近在进行无障碍相关文档翻译的时候遇到了 landmark
的概念,在网上搜了下发现没有相关的中文资料,因此写一篇博客简单介绍一下。
什么是 Landmark
Landmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块
以一个视频网站为例,网页的最上方是一条banner,左侧是一个导航栏,右侧显示视频。网页可以通过这种切分方式来分割出不同的功能区。当然在一个功能区内也可以递归地进行切分,这里先不展开。
对于一个视力障碍者,他无法像常人一样理解从视觉角度传达出的网页结构信息,那么就需要网页开发者预先将网页的结构规划好,并将结构信息写在HTML代码里,最终将网页的结构信息通过读屏软件表达出来。
而landmark就是连接网页结构信息和读屏软件的桥梁。网页开发者通过landmark对网页区域进行标注,读屏软件读取landmark信息并传达给视力障碍者。
如何使用 Landmark
事实上,在HTML5 landmark出现之前,就已经有landmark的概念了。
landmark有以下几种main,navigation,complementary,banner,contentinfo,form,region,search
。通过使用<div role="main">
就定义了一个main
landmark。
而在HTML5中定义了一些全新的标签,并赋予他们隐式的landmark语义。
HTML5 Landmark主要有以下几种
HTML Element | Landmark Role |
---|---|
<main> | main |
<nav> | navigation |
<aside> | complementary |
<header> | banner |
<footer> | contentinfo |
<form> | form |
<section> | region |
这些标签本身就隐含着landmark的含义,也就是说<main>
和<div role="main">
是完全等价的。
对于search
landmark没有定义专用的HTML标签,通常使用<form role="search">
来实现。
也就是说,在上一节引用的网页中
- 对于1号区域,应当把所有的内容放到一个
<header></header>
中,标识该部分是banner - 对于2号区域,应当把所有的内容放到一个
<nav></nav>
中,标识该部分是导航栏 - 对于3号区域,应当把所有的内容放到一个
<main></main>
中,标识该部分是网页的主要内容
读屏软件会生成一系列的跳转链接来帮助视力障碍者确定网页的结构并迅速跳转至需要的部分。
在HTML5之前,只能通过role属性来定义landmark,HTML5推出的新标签能够在保持可访问性的情况下简化标记。但并不是每个用户使用的辅助工具都支持最新的标准,因此许多教程推荐使用
<main role="main">
的写法来同时兼容两种标准。W3C的标准不鼓励在已经含有隐式语义的情况下使用role
属性,因为两者语义冲突的情况下可能导致无法预计的表现。
区分同类型的 Landmark
有时候页面中可能会有多个导航栏,分别有不同的作用。比如一个电商网站有一个主导航来跳转到购物车、收藏夹等不同的页面;还有一个产品导航来跳转到电子产品、婴儿产品。如何对两者进行区分呢,这里需要使用aria-label
或者aria-labelledby
属性。
<nav aria-label="主导航">
<ul>
<li>主页</li>
<li>购物车</li>
<li>收藏夹</li>
</ul>
</div>
<nav aria-label="产品导航">
<ul>
<li>婴儿产品</li>
<li>电子产品</li>
<li>体育产品</li>
</ul>
</div>
这样读屏软件会分别生成以下两个链接
- 导航,主导航
- 导航,产品导航
这样就将不同的landmark区分开了。
使用读屏软件读取 Landmark
为了更好地理解landmark,我尝试使用读屏软件来测试网页上的landmark。这里我使用的是Windows系统自带的讲述人。
按下Caps Lock + F5
来显示网页中所有的landmark。
按下Caps Lock + N
,可以看到讲述人光标移动到了网页的主要内容部分。
使用D
或Shift + D
可以在landmark间切换,同时会朗读出每个landmark的信息。
这里可以看到有一个search
landmark,它在banner
landmark的内部,这就是landmark嵌套的情况。对于landmark嵌套有一系列的规则,感兴趣的读者可以自己了解。
总结
和单词的原意一样,landmark就像是一个网页的许多个“入口”或“地标”。通过landmark标注网页结构的信息,可以帮助视力障碍者通过读屏软件了解网页的结构,并迅速到达需要的部分。
然而正如并非所有的读屏软件都支持HTML5 Landmark一样,并非所有视力障碍者都了解landmark的概念并知道如何使用landmark。因此提供传统的跳转链接来跳过导航直接跳转到内容仍然是有必要的。
简单介绍HTML5 Landmark的更多相关文章
- WebSocket简单介绍
Java后端WebSocket的Tomcat实现 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSoc ...
- Android发展简单介绍
Android一词的本义指“机器人”,同一时候也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动 ...
- React 简单介绍
React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...
- WebSocket简单介绍(1)
HTML5作为下一代WEB标准,拥有许多引人注目的新特性,如Canvas.本地存储.多媒体编程接口.WebSocket等等.今天我们就来看看具有“Web TCP”之称的WebSocket. WebSo ...
- 2、Cocos2dx 3.0游戏开发找小三之引擎简单介绍
尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简单介绍 Cocos2d-x 的 ...
- [原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
- 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍
一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
- yii2的权限管理系统RBAC简单介绍
这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...
随机推荐
- Python使用pyexecjs代码案例解析
针对现在大部分的网站都是使用js加密,js加载的,并不能直接抓取出来,这时候就不得不适用一些三方类库来执行js语句 execjs,一个比较好用且容易上手的类库(支持py2,与py3),支持 JS ru ...
- Bytom 储蓄分红 DAPP 开发指南
储蓄分红DAPP 储蓄分红合约简介 储蓄分红合约指的是项目方发起了一个锁仓计划(即储蓄合约和取现合约),用户可以在准备期自由选择锁仓金额参与该计划,等到锁仓到期之后还可以自动获取锁仓的利润.用户可以在 ...
- Oracle 存储过程 批量插入测试数据
有时候需要做DB的效率测试时,需要模拟大量数据.可以根据一条原始数据,通过执行存储过程拷贝出大量数据: CREATE OR REPLACE PROCEDURE proc_msw_strsql IS i ...
- C#LeetCode刷题之#566-重塑矩阵( Reshape the Matrix)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3720 访问. 在MATLAB中,有一个非常有用的函数 resha ...
- 运放引脚悬空危害大,单片机PWM信号进入运放需要考虑避免运放引脚悬空
1 问题电路 在没有烧录程序时,单片机的PWM引脚无信号,导致运放的3脚悬空,从而导致运放输出3.5V电压,从二导致后面驱动电流非常大,容易对驱动器件造成损坏 2 改进电路 通过在单片机输出增加下拉电 ...
- 多次调用Promise的then会返回什么?
//做饭 function cook(){ console.log('开始做饭.'); var p = new Promise(function(resolve, reject){ //做一些异步操作 ...
- 图论算法(一)存图与STL第六弹——vector容器
图论算法(一)存图 我发现我的博客阅读量贼低,问小伙伴们,ta们都说这些博客太长了QAQ! 今天来个短亿点的(也短不了多少……) 进入正题,图论究竟是什么? 图论就是给你一张图,让你在这张图上进行各种 ...
- HashMap 21问!!
1:HashMap的数据结构? A:哈希表结构(链表散列:数组+链表)实现,结合数组和链表的优点.当链表长度超过8时,链表转换为红黑树. transient Node<K,V>\[\] t ...
- 【算法•日更•第二十八期】图论:强连通+Tarjan算法(一)
▎前言 一直都想学习这个东西,以为很难,结果发现也不过如此. 只要会些图论的基础就可以了. ▎强连通 ☞『定义』 既然叫强连通,那么一定具有很强的连通性. 强连通:就是指在一个有向图中,两个顶点可以互 ...
- [NOIP2019] 划分
题目 题解 首先YY一个最简单的dp $dp[i][j]=min(dp[j][k]+(sum[i]-sum[j])^2 (sum[i]-sum[j]>=sum[j]-sum[k])$ $dp[i ...