浅析HTML5 Landmark


Posted in HTML / CSS onSeptember 11, 2020

最近在进行无障碍相关文档翻译的时候遇到了 landmark 的概念,在网上搜了下发现没有相关的中文资料,因此写一篇博客简单介绍一下。

什么是 Landmark

Landmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块

浅析HTML5 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
navigation
complementary
banner
contentinfo
form
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系统自带的讲述人。

浅析HTML5 Landmark

按下Caps Lock + F5来显示网页中所有的landmark。

浅析HTML5 Landmark

按下Caps Lock + N,可以看到讲述人光标移动到了网页的主要内容部分。

浅析HTML5 Landmark

使用D或Shift + D可以在landmark间切换,同时会朗读出每个landmark的信息。
这里可以看到有一个search landmark,它在banner landmark的内部,这就是landmark嵌套的情况。对于landmark嵌套有一系列的规则,感兴趣的读者可以自己了解。

总结

和单词的原意一样,landmark就像是一个网页的许多个“入口”或“地标”。通过landmark标注网页结构的信息,可以帮助视力障碍者通过读屏软件了解网页的结构,并迅速到达需要的部分。
然而正如并非所有的读屏软件都支持HTML5 Landmark一样,并非所有视力障碍者都了解landmark的概念并知道如何使用landmark。因此提供传统的跳转链接来跳过导航直接跳转到内容仍然是有必要的。

以上就是浅析HTML5 Landmark的详细内容,更多关于HTML5 Landmark的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 #HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 #HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 #HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 #HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 #HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
js编写选项卡效果
2017/05/23 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python __slots__的使用方法
2020/11/15 Python
大众服装店创业计划书范文
2014/01/01 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
思想道德自我评价2015
2015/03/09 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS