最近在进行无障碍相关文档翻译的时候遇到了 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. 对于1号区域,应当把所有的内容放到一个<header></header>中,标识该部分是banner
  2. 对于2号区域,应当把所有的内容放到一个<nav></nav>中,标识该部分是导航栏
  3. 对于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,可以看到讲述人光标移动到了网页的主要内容部分。

使用DShift + D可以在landmark间切换,同时会朗读出每个landmark的信息。

这里可以看到有一个search landmark,它在banner landmark的内部,这就是landmark嵌套的情况。对于landmark嵌套有一系列的规则,感兴趣的读者可以自己了解。

总结

和单词的原意一样,landmark就像是一个网页的许多个“入口”或“地标”。通过landmark标注网页结构的信息,可以帮助视力障碍者通过读屏软件了解网页的结构,并迅速到达需要的部分。

然而正如并非所有的读屏软件都支持HTML5 Landmark一样,并非所有视力障碍者都了解landmark的概念并知道如何使用landmark。因此提供传统的跳转链接来跳过导航直接跳转到内容仍然是有必要的。

简单介绍HTML5 Landmark的更多相关文章

  1. WebSocket简单介绍

    Java后端WebSocket的Tomcat实现 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSoc ...

  2. Android发展简单介绍

    Android一词的本义指“机器人”,同一时候也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动 ...

  3. React 简单介绍

    React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...

  4. WebSocket简单介绍(1)

    HTML5作为下一代WEB标准,拥有许多引人注目的新特性,如Canvas.本地存储.多媒体编程接口.WebSocket等等.今天我们就来看看具有“Web TCP”之称的WebSocket. WebSo ...

  5. 2、Cocos2dx 3.0游戏开发找小三之引擎简单介绍

    尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简单介绍 Cocos2d-x 的 ...

  6. [原创]关于mybatis中一级缓存和二级缓存的简单介绍

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  7. 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍

    一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...

  8. 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍

    一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...

  9. yii2的权限管理系统RBAC简单介绍

    这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...

随机推荐

  1. Make Windows 10 Comfortable

    在 StartUp 目录中(在当前用户目录下), 创建.bat, 里面可以写希望登录指定的命令(如使用subst进行映射, 将常用的目录映射为磁盘驱动器) 在 %USERPROFILE%(也就是用户家 ...

  2. Java 基础 —— 注解 Annotation

    简介 Annotation 是从 JDK 5.0 引入的. 注解使得我们可以以编译器验证的格式存储程序的额外信息.注解可以生成描述符文件,甚至是新的类定义,并且有助于减轻编写"样板" ...

  3. 学长小清新题表之UOJ 31.猪猪侠再战括号序列

    学长小清新题表之UOJ 31.猪猪侠再战括号序列 题目描述 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫\(\_CallMeGGBond\). 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领 ...

  4. Python 常用的操作文件代码

    1:统计list中相同的个数,并按大小排序. original_list = ['a', 'b', 'b', 'a', 'd', 'd', 'b', 'z', 'c', 'b', 'r', 's', ...

  5. jqgrid 自定义文本框、选择框等查询

    要实现jqgrid的自定义查询可通过表格获取查询的条件,再给jqgrid表格发送postData参数. HTML: <table id="querytable" border ...

  6. node.js 模拟自动发送邮件验证码

    node.js 模拟自动发送邮件验证码 引言 正文 1. QQ邮箱设置 2. 安装nodemailer 3.配置信息 4.综合 5.讲解 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号 ...

  7. 大整数加法C++(计蒜客)

    求两个不超过 200200 位的非负整数的和. 输入格式 有两行,每行是一个不超过 200200 位的非负整数,可能有多余的前导 00. 输出格式 一行,即相加后的结果.结果里不能有多余的前导 00, ...

  8. java十进制二进制互转

    1. 十进制转二进制 原理:给定的数循环除以2,直到商为0或者1为止.将每一步除的结果的余数记录下来,然后反过来就得到相应的二进制了. 比如8转二进制,第一次除以2等于4(余数0),第二次除以2等于2 ...

  9. MySql安装后在服务管理器里边找不到MySql服务项的解决办法(win10)

    问题描述: 成功安装MySql后,使用mysql的时候,在CMD中输入net start mysql,提示服务名无效,查看服务列表也找不到mysql服务. 解决办法: 首先用管理员身份打开CMD命令, ...

  10. 如何获取东方财富文华新浪财经实时行情数据API接口

    BIGI行情期货外汇股指A股期权实时行情数据文华新浪财经API接口新浪财经并非实时行情数据源,所以获取的行情数据源也并非实时的.以下介绍的方法和新浪财经获取行情数据源的方法是一致的.需要实时行情数据源 ...