内容简介:有的同学会说了:img、heading 也有语义化?其实语义化并不只是 HTML5 中新增加的
有的同学会说了:img、heading 也有语义化?其实语义化并不只是 HTML5 中新增加的 <header>
、 <main>
等标签,它们更多的算是结构语义化。
图片语义化
依靠着 img
标签中的 alt
和 title
属性,其中 alt
用于图片描述,这个描述是给搜索引擎和屏幕阅读器使用。并且当图片无法显示时,页面会显示alt中的文字。
标题语义化
包括了从 h1
到 h6
的标题,在没有 HTML5 新增加的结构标签时,更多的是由 heading
来表示页面的结构。
还有 表格语义化
包括 table、caption、thead、tbody、tfoot、th 标签,等等语义化相关标签就不在这里赘述了很多的文章都讲得非常好。
换位思考
一千个人眼里有一千个哈姆雷特
多姿多彩的世界中也包括了一部分 特殊群体
,其中也包括了 盲人
、 弱视
等群体。今天一起扮演一位 视力障碍用户
,站在他的角度来看看这个 互联网
世界,小二使用的是 Mac 便用 VoiceOver 下面是常用快捷键:
-
control+option+右箭头/左箭头
:切换导航,相当于焦点中的tab
。 -
control+option+shift+下箭头/上箭头
:进入或退出当前导航选中的内容。 -
control+option+command+h
:阅读网页内容中的heading
。 -
control+option+space
:模拟鼠标点击事件。 -
control+option+u
:使用转子。
图片
入困境
从一张图片来了解 盲人世界
,代码如下:
<img src="https://user-gold-cdn.xitu.io/2019/4/11/16a0b73404feaca5"> 复制代码
显示的效果如下,作为正常用户可以很清楚的便理解了图片上的内容:
而通过 VoiceOver
模拟盲人查看图片会得到这么一段语言:
16a0b73404feaca5, 图像 复制代码
视障用户
:咦 16a0b73404feaca5
是什么呀?听不懂也理解不来。
出困境
这是因为没有给图片加上 alt
属性,导致 VoiceOver 在读取页面信息的时候只能去读取 src
最后一个斜杠后的内容 16a0b73404feaca5
,因为链接资源里最后的部分为它的文件名,解决的方法很简单加上 alt
属性描述。
<img src="https://user-gold-cdn.xitu.io/2019/4/11/16a0b73404feaca5" alt="一只叫做土土的小猫咪相亲中,正在看一只漂亮的小猫咪。"> 复制代码
这个时候再使用 VoiceOver
模拟盲人查看图片会得到这么一段语言:
土土相亲中,正在看一只漂亮的小猫咪, 图像 复制代码
视障用户
:哦哦,原来是小猫咪在相亲啊。
学习角度
看到这里又有不同的学习方式:
图片描述字段
最后这个问题问得非常好:
- 不写上
alt
属性会被读取src
中的文件名。 - 写上
alt
又会导致过多信息出现,使得视力障碍用户难以理解。 - 解决方法:将
alt
设置为空字符串
,这样屏幕阅读 工具 就会跳过它。
更多内容可以阅读img の 小九九
Heading
在浏览网页的时候,正常用户可以通过鼠标滚动或者键盘的上下键。而视力障碍用户 看不到
网页内容,那通过什么来在网页内容搜索中上下滚动浏览页面呢?答案便是 Heading
国外的网站大多无障碍体验多做得比较好,毕竟在法律政策下必须做好 无障碍体验
。这里选用谷歌搜索来演示 Heading
对视力障碍群体的帮助:
使用 control+option+command+h
在标题之间进行跳转,你会发现右下角分别显示着:
- 标题级别 1 无障碍功能链接。
- 标题级别 1 搜索模式。
- 标题级别 1 搜索结果。
- 标题级别 2 网络搜索结果。
- 彭于晏-维基百科,自由的百科全书 彭于晏,超级链接。
- 彭于晏_百度百科,彭于晏,超级链接。
- 更多内容就不描述了。
可以发现一开始的 4 个标题,都是在页面上 看不到
标题标签。这是谷歌搜索为视力障碍用户提供的页面锚点,方便视力障碍用在页面上通过 heading
跳转和浏览内容区域,接下来的几个标题便是利用 heading
配合 a
标签来实现搜索项目的浏览。
heading
的效果在页面上显而易见,视力障碍群体也可以很方便的浏览网页。
更多内容可以阅读H1 的小秘密
label
入困境
标签也是在开发中经常被忽略的内容结构如下:
<div class="row"> 用户名:<input type="text" name="username"> </div> 复制代码
表单显示效果如下:
作为正常用户看着没什么问题,可是作为视障用户在使用 VoiceOver
会听到:
编辑文本,空白 复制代码
这下又让视障用户陷入沉思了,空白指的是什么?
出困境
这是因为没有给 input 配上指定 label,屏幕阅读器并不能很好的去识别 input 所表达的含义。
<div class="row"> <label for="username">用户名</label> <input type="text" name="username" id="username"> </div> <label> <input type="text" name="address" id="address"> 用户地址 </label> 复制代码
这个时候再使用 VoiceOver
模拟盲人查看会听到:
用户名,编辑文本,空白 用户地址,编辑文本,空白 复制代码
这下盲人用户很容易就能理解表单信息。
结构语义化
再来看看结构语义化能带来的好处:
<header> <div class="container"> <h1>PushMeTop</h1> <nav> <a href="#">主页</a> <a href="#">文章</a> <a href="#">视频</a> </nav> </div> </header> <main> <div class="card"> <form> <div class="row"> <label for="username">用户名</label> <input type="text" name="username" id="username"> </div> <div class="row"> <label for="password">密码</label> <input type="password" name="password" id="password"> </div> <div class="row"> <button type="submit">登录</button> </div> </form> </div> </main> <footer> <div class="container"> <div class="col-1"> <a href="#">联系我们</a> </div> <div class="col-1"> <a href="#">加入我们</a> </div> </div> </footer> 复制代码
在 VoiceOver
使用转子功能可以看到如下效果:
转子通过语义化标签,很轻松的便把网页的结构识别出来了。在 文章
功能下可以看到横幅、导航、主题内容、页脚 和他们内部相关的元素,而在 地标
中也可以通过 横幅、导航、主题内容快速浏览网页。
无障碍树
浏览器在渲染的时候会构建 DOM 树,而无障碍工具在理解页面的时候则通过 无障碍树
来让 特殊群体
理解页面。其实开发过程中离 无障碍树
相当近只不过大家一直都没有注意,打开控制台选择 Accessibility
即可看到:
无障碍树的构建便是通过 语义化
来实现的,点开 banner、main、contentinfo 进行具体内容查看,而构成无障碍树节点由:Role, Name, State, Value 组成。
反应快的同学就会想到上面提到的 用户名表单
:
- Name: 用户名
- Role: 编辑文本
- Value:空白
- State:无
当 VoiceOver
在阅读页面节点便会读出:
用户名,编辑文本,空白 复制代码
这里只对 无障碍树
做一个简单的介绍, 无障碍树
和 语义化
关系紧密,细心的同学还会发现截图中 WebArea
的 Name
值中有出现 aria-*
相关字段,其实 ARIA
是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的)的一套机制,对 html
标签的一个补充。
更多内容可以阅读ARIA - 无障碍 。
总结
其实被 KPI 和 需求的追赶下并不能很好的做到 语义化
,这也是现实世界的无奈。本文着重讲了 heading
、 img
、 label
这些开发中最简单也是最触手可及的一些语义化,大家可以在开发时稍加使用,虽然不能做到百分比语义化,但是能提供到一部分的帮助也是挺好的。
最推荐的方式还是使用 无障碍
做得好的框架来开发,可以帮助我们快速的实现 无障碍
,这里引用 二哲
的一句话:
无障碍我就服 material ui
。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 消息队列的消费语义和投递语义
- 剑桥构建视觉“语义大脑”:兼顾视觉信息和语义表示
- 新瓶装旧酒:语义网络,语义网,链接数据和知识图谱
- 超强语义分割算法!基于语义流的快速而准确的场景解析
- 语义分割领域开山之作:Google提出用神经网络搜索实现语义分割
- 语义网络
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UNIX 时间戳转换
UNIX 时间戳转换
HSV CMYK 转换工具
HSV CMYK互换工具