小技巧，提升读屏操作体验

文介绍在Web前端中为读屏提供补充信息的一种小技巧，并简单分析了此技巧的应用场景和注意事项，适当使用本技巧可以在网页浏览中有效提升读屏的操作体验。

在WordPress主题的css中，有一条这样的class定义：

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; /Many screen reader and browser combinations announce broken words as they would appear visually. */}

那么这个screen-reader-text可以用来做什么呢？从名称上，我们很容易看出，它是针对读屏的文本样式定义。具体表现如何，让我们来做下面一个实验：

<p>你爱吃的<span class="screen-reader-text">水果</span>都在这里</p>

通过上面的实验，我们发现我们在P标签中设置的“你爱吃的水果都在这里”中的“水果”二字，视觉上不可见了。让我们在使用读屏阅读上面的文字试试看。没错，当你使用读屏阅读的时候，读屏却完整的读出了P标签中的内容“你爱吃的水果都在这里了”。

现在我们清楚了，screen-reader-text样式，用以隐藏那些视觉不需要展现儿对读屏有价值的内容。

我们在来看一个实际可被应用的例子：

<div class="news-list"> <div class="news-list-area"> <h2><a href="javascript：void(0);">军事</a></h2> <ul> <a href="javascript：void(0);">新闻标题1</a> <a href="javascript：void(0);">新闻标题2</a> ... </ul> <a class="more" href="javascript：void(0);">更多</a> </div> <div class="news-list-area"> <h2><a href="javascript：void(0);">科技</a></h2> <ul> <a href="javascript：void(0);">新闻标题1</a> <a href="javascript：void(0);">新闻标题2</a> ... </ul> <a class="more" href="javascript：void(0);">更多</a> </div></div></div>

我们使用读屏Tab键，遍历上面的内容，可以发现，读屏是按照代码书写的元素的线性顺序进行导航的，也就是说，先读分类标题，在读新闻标题，最后是“更多”链接。这里存在一个问题，当我们按键盘Tab键导航到“更多”链接，读屏只会读出“更多链接”，对于不熟悉这个页面布局的读屏用户，可能会难以判断这个“更多”是哪一个分类的“更多”。

让我们用screen-reader-text来解决这个问题。修改“更多”链接的代码为：

<a href="javascript：void(0);">更多<span class="screen-reader-text">军事新闻</span></a>...<a href="javascript：void(0);">更多<span class="screen-reader-text">科技新闻</span></a>

这样，当我们使用读屏，Tab键定位到“更多”链接的时候，就能读出“更多军事新闻”、“更多科技新闻”，可以清楚区分“更多”链接到底属于哪一个分类了。

到这里，已经很清楚了，screen-reader-text样式，可以使应用了此样式的内容视觉不可见，读屏却能朗读，是一种为一些元素添加补充内容信息的方法。

与此相同的，还可以使用WAI-ARIA中的aria-label等属性，但aria-label属性在不同读屏上表现略有差异，比如下面的代码，在NVDA和争渡读屏上就有不同：

<a aria-label="更多军事新闻" href="javascript：void(0);">更多</a>

NVDA朗读：链接更多军事新闻

争渡工艺版朗读：更多更多军事新闻

NVDA朗读采用aria-label值替代原有的链接文本，争渡工艺版则是链接文本+aria-label值。

这主要是不同读屏对于WAI-ARIA支持程度和处理策略的不同所导致的，使用screen-reader-text却能解决这种差异问题，使用此样式，读屏朗读基本上体验是一致的了。但需要注意，WAI-ARIA属于标准，具有更广泛的普适性，所以我们还是仍然推荐首先考虑使用WAI-ARIA标准，紧在使用WAI-ARIA无法满足需求的情况下，才使用screen-reader-text技巧来实现。

最后，我们再来谈谈使用screen-reader-text样式的注意事项。

这里，我总结了两点：

补充信息明确、简洁

应用screen-reader-text的信息应该足够的明确、简洁，冗余的内容将会耗费读屏朗读的时间，影响操作效率。

紧在需要的时候使用

合理使用screen-reader-text样式，因为应用它的元素是不可见的，这对使用读屏的用户和视觉浏览的用户在交流网页呈现内容的时候，可能存在一定的困扰，双方接收到的信息是不完全相同的。另一方面，增加朗读的内容，会使得读屏用户听渠道更多的内容，影响操作效率。我们可以仅在提供的内容信息无法满足读屏用户理解的情况下，提供应用了screen-reader-text的补充内容，用以清晰的传达预期传递的信息。

以上就是我们队screen-reader-text的介绍，希望可以对您有所启发。如果您有什么好的想法，也欢迎与我们交流！

刘彪

刘彪信息无障碍专家

信息无障碍研究会

. 对 HTML 语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；

对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰地看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

2. DOCTYPE(?档类型) 的作?

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类行定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚?JavaScript 脚本的解析。它必须声明在 HTML?档的第??。

浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是 CSS1Compat）：

CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

3. script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观地看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；

脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。

4. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong；

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储的资源。

6. Canvas 和 SVG 的区别

（1）SVG：

SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

（2）Canvas：

Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是

一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

7. 说一下 HTML5 drag API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

文主要内容

html 的常见元素
html 元素的分类
html 元素的嵌套关系
html 元素的默认样式和 CSS Reset
html 常见面试题

html 的常见元素

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。

1、head 区域的 html 元素

head 区域的 html 元素，不会在页面上留下直接的内容。

meta
title
style
link
script
base

base元素的介绍：

<base href="/">

base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。

2、html 元素（body 区域）

body 区域的 html 元素，会直接出现在页面上。

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表单元素：form、input、select、textarea、button

div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，div 是比较通用的元素，这也决定了 div 的的语义并不是很明确。

常见标签的重要属性：

a[href,target]
img[src,alt]
table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
form[target,method,enctype]
input[type,value]
button[type]
selection>option[value]
label[for]

html 文档的大纲

我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。

同样，html 网页也可以看成是一种文档，也有属于它的大纲。

一个常见的html文档，它的结构可以是：

    <section>
        <h1>一级标题</h1>

        <section>
            <h2>二级标题</h2>
            <p>段落内容</p>
        </section>

        <section>
            <h2>二级标题</h2>
            <p>段落内容</p>
        </section>

        <aside>
            <p>广告内容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>

查看网页大纲的工具

我们可以通过 http://h5o.github.io/ 这个工具查看一个网页的大纲。

使用方法：

（1）将网址 http://h5o.github.io/ 保存到书签栏

（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。

这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。

html 元素的分类

按照样式分类：

块级元素
行内元素
inline-block：比如form表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

按照内容分类：

html 元素的嵌套关系

块级元素可以包含行内元素。
块级元素不一定能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的；但是在 html 4.0.1 中， a > div 仍然是不合法的。

html 元素的默认样式和 CSS Reset

比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。

同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。

如果我们不需要默认的样式，这里就需要引入一个概念：CSS Reset。

常见的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS

方案二：

雅虎的 CSS Reset

我们可以直接通过 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href=">

方式三：（比较有争议）

*{
    margin: 0;
    padding: 0;
}

上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。

Normalize.css

上面的几种 css reset 的解决思路是：将所有的默认样式清零。

但是，Normalize.css 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。既然不同浏览器的默认样式不一致，那么，Normalize.css就将这些默认样式设置为一致。

html 常见面试题

doctype 的意义是什么

让浏览器以标准模式渲染
让浏览器知道元素的合法性

HTML、XHTML、HTML5的区别

HTML 属于 SGML
XHTML 属于 XML，是 HTML 进行 XML 严格化的结果
HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。

HTML5 有什么新的变化

新的语义化元素
表单增强
新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。

em 和 i 的区别

共同点：二者都是表示斜体。

区别：

em 是语义化的标签，表示强调。
i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。

语义化的意义是什么

开发者容易理解，便于维护。
机器（搜索引擎、读屏软件等）容易理解结构
有助于 SEO

哪些元素可以自闭和

自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。

表单元素 input
图片 img
br、hr
meta、link

form 表单的作用

直接提交表单
使用 submit / reset 按钮
便于浏览器保存表单
第三方库（比如 jQuery）可以整体获取值
第三方库可以进行表单验证

所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。

在线咨询

上一篇：css实现渐变色圆角边框
下一篇：佛山这些镇街将设临时年花销售点！买花地图上线，一键导

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商