面向外行的介绍.md 13 KB
Web页面（网页）开发基本知识
开发一个网页需要做的工作可以分为三部分：指定网页的内容，即呈现哪些东西（如标题、图片、视频、音频、文字、链接、按钮、输入框等等，下文称这些内容为元素）；指定网页各个元素的视觉效果（位置、大小、字体颜色、背景颜色、透明度等等）；指定网页在某些时刻（如被打开后某一秒钟、用户点击了某个按钮时、用户在输入框输入文字时等等）要启动哪些功能（发送网络请求、跳转到新网页、更新页面内容等等）。
通常，第一部分的工作通过编写html语言进行；第二部分的工作通过编写css语言进行；第三部分的工作通过编写js语言进行。这三种语言的功能也有部分重叠，尤其是js语言可以一定程度上取代html和css，在必要时也经常会这样做，代价则是编程工作量会大一些。
对html语言，有必要做进一步介绍：一个网页的内容由一一系列html元素来描述；这些元素之间可以嵌套，比如一个文章元素内部包含多个段落元素；每个html元素可以用多个属性（attribute）修饰，每个属性由属性名、属性值组成。
提供无障碍功能的两种方案
一种方案是在编写网页时严格遵循Web无障碍开发的国际标准（Accessible Rich Internet Applications (WAI-ARIA)），这样写出的网页，用户可以借助专门的、遵循同样国际标准的各种网页插件或软件进行无障碍浏览。固然规范性强，但也有缺点：对于网页开发者，需要掌握庞杂的无障碍开发规范知识，且开发工时多；对于网页用户，需要安装合适的网页插件或软件，往往需要付费，且这些插件、软件也有一定的入门门槛。
本网站采用的是另一种无障碍功能方案：网站开发者自行设计无障碍功能实现方案，网站本身就提供无障碍功能，并负责使用方法的介绍，用户无需额外安装任何东西。
开启/关闭网站无障碍辅助浏览工具
功能简介
浏览器首次打开本网站时，无障碍辅助浏览工具（以下简称本工具）处于关闭状态。用户可通过网页中提供的无障碍模式开关开启本工具，此时会在网页最上方固定显示本工具的操作栏，网页原始内容则整体下移以避免被操作栏遮挡。
此时，本工具各项功能尚处于默认状态。用户使用某项功能后，浏览器中所有加载了本网站的窗口均会生效。我们称这个效果为状态的多窗口同步。
用户可通过操作栏中的关闭按钮或上文提到的无障碍模式开关来关闭本工具，这会使所有加载了本网站的窗口中的操作栏隐藏，各项功能失效。在本工具或本网站被关闭时，会记录本工具的开关状态和本工具各项功能的当前状态（以下统称本工具的状态），用户再次（无论期间浏览器和是否有过关闭）打开本网站时，这些状态会立刻恢复。我们称这个效果为状态的持久化保存。
功能原理
操作栏的显隐与网页原始内容的整体移动使用网页开发的基础技术即可实现，在此不做赘述。下面对状态的多窗口同步与持久化保存原理进行说明。
这两种效果均基于浏览器的本地存储（Local Storage）功能实现。每当本工具的状态发生改变时，都会立刻将最新状态保存到浏览器的本地存储区中；每当用户打开本网站时，则会从本地存储区读取上述状态信息，作为本工具的初始状态，由此实现了状态的持久化保存。如果从本地存储区读取不到上述状态信息，说明浏览器从上一次清空本地存储区以来首次打开本网站，直接使用本工具状态的默认值即可。
由于浏览器中访问了相同域名的多个窗口会共享同一个本地存储区，因此多个窗口得以共享本工具状态的同一份记录。本网站会监听本地存储区中状态的变化，当用户并未与当前页面交互，但监听到了变化发生，意味着用户与另一个打开本网站的页面发生了交互，此时读取本地存储区中的最新状态值并应用于本工具即可。
光标十字线功能（辅助线阅读辅助功能）
功能原理
在网页中添加两个细长的矩形，分别作为十字线的横线和竖线。监听鼠标位置的移动，在移动发生时，获取鼠标指向的新位置，据此更新两个矩形的位置，达到两个矩形始终在鼠标指向处交叉的效果。
页面配色功能
功能原理
我们为每种配色方案取了名字，在切换配色方案时，将新配色方案的名字添加到网页内容展示区域的html根元素的class属性上。在css代码中，我们要求浏览器找出class属性值包含了特定配色方案的那些html元素，将其子孙元素（除了图片等不应改变配色的元素）的背景颜色和文字颜色以高优先级设置为合适的值。
网页界面放大缩小功能
功能原理
css提供了多种对元素缩放的手段，元素的子孙元素会被一同缩放。因此通过css对网页内容展示区域的html根元素做缩放即可满足需求。我们选择了兼容性较好的方案：使用transform属性的scale函数。有一个细节需要满足：缩放的中心点（指元素中一个点位，其在屏幕中的位置在元素缩放过程中始终保持不变）应该是网页内容展示区域的顶部边缘中心点（竖向顶部，横向中心）。实际测试中发现，如果直接指定缩放中心点为顶部中心，则在放大到网页左侧超出屏幕边缘后，页面的横向滚动条依然位于最左侧，无法通过向左滚动来查看网页左侧内容。因此我们采用了变通的方法，即指定缩放中心点为内容展示区域的左上角，再通过js代码横向移动内容展示区域，形成以顶部中心点为缩放中心点的效果。以放大1.5倍为例，具体代码如下：
.aria-control-target {
transform: scale(1.5);
transform-origin: left top;
}
document.documentElement.scrollLeft = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2
朗读功能
朗读功能简介
在以下几种情况发生后，需要进行朗读。
- 1.页面跳转后，朗读本页面的概述（介绍新页面是什么页面、由哪些区域构成、如何用键盘操作新页面等）；
- 2.页面某个区域被聚焦时，朗读本区域的概述。
- 3.聚焦到某个元素时，以及光标指向某个元素时，朗读本元素的类型（文字、图片、视频、输入框、按钮等等）与内容（具体文字、图片标题、视频标题等等）。
- 4.点击（或通过回车触发）无障碍菜单的某个按钮时，朗读本次操作的刚刚发生的行为。
上述几种情况中，最需要灵活性的是情况3，在此做详细介绍。
元素朗读功能原理
标记出需要被朗读的元素
在编写html代码时，对于需要被朗读的元素，为其添加一个属性：tabindex="0"，供后续处理时识别。这样做的另一个作用是，许多元素原本只是用于信息展示，并不能被用户聚焦，在被添加这个属性后，浏览器会允许用户聚焦于其上，这才使我们设计的无障碍功能成为可能。
记录需要被朗读的元素的类型和内容
html语言从页面开发角度指定了大量元素类型，而根据我们的产品设计，最终需要告知用户的元素类型只有文本、图片、链接、按钮等少数种。因此，对每个需要被朗读的元素，还需要在html代码中标记它对用户呈现的元素类型，如果省略这个标记则表示类型为文本（最常见的情况）。仿照无障碍开发的国际规范，我们用aria-label这个属性来标记元素类型，比如按钮元素标记为aria-label="Button"。
对于元素的内容，我们使用aria-description进行标记。内容具体值需要根据具体需求而定，如对于图片、视频，取其标题作为朗读内容；对于按钮，用其功能的文字描述作为朗读内容；如果不取值，则认为元素的文本内容就是其需要被朗读的内容（最常见的情况）。
在需要朗读时，获取元素的类型和内容
通过编写js代码，在元素被聚焦或指向时，进行如下操作：从该元素开始，依次考察其父元素、祖父元素……直到找到一个元素具有属性tabindex=0，提取其aria-label和aria-description属性值。
进行朗读
通过js将提取到的元素类型和内容文本发给后端服务器，后端服务器使用第三方的语音合成服务（TTS）生成音频文件并返回给浏览器中运行的网页程序，网页中进而新建一个音频元素audio，播放这个音频文件。audio元素提供了直接的方法来调整播放时的语速、切换静音状态。
特别处理
因为部分元素的朗读内容中含有由中文专有名词直接音译成的英文单词，第三方的语音合成服务无法识别这类单词并正确发音，所以对这类元素做了特别处理：对元素的朗读内容做真人朗读录音，音频文件保存在后端，给每个音频文件分配一个独有的id；html代码中用aria-audio-id="some-id"来标记这类元素（“some-id”为具体id值）；在需要朗读时，如果发现元素具有aria-audio-id属性，则将其id值发给后端服务器，后端服务器据此找到对应的音频文件返回给浏览器中运行的网页程序，网页中进而新建一个音频元素audio，播放这个音频文件。
大字幕显示屏功能
功能原理
首先，在功能启用时，我们在窗口底部添加一个大字幕显示屏，并让网页内容区域的底部边缘上移，避免网页内容被显示屏遮挡（尤其在网页滚动到底部时）。
然后，我们采用与朗读功能中相同的方法提取被聚焦或被指向的元素的类型与（纯文本形式的）内容，并通过js将这些文本设置为大屏幕显示屏元素的innerText属性，并用css保证这些文字被以合适的外观显示出来。
键盘支持
功能简介
用户可通过不断按下tab键，按照大体上从上到下、从左到右、从外到内的顺序依次聚焦到页面上提供了实质信息的元素上；在使用一些特殊的控件时还可以使用上下左右箭头按键进行操作，比如通过上下箭头按键在下拉选择框的多个候选项间切换；被聚焦的元素会用特殊的外观（被用特定颜色的矩形框住）来提醒用户当前聚焦的位置，用户可进而按下回车键，达到和按下鼠标左键相同的效果。
功能原理
可聚焦性
一部分html元素设计上就是用于用户交互操作的，如按钮、链接、单选框、多选框等等，浏览器已经为这些元素提供了用键盘聚焦的功能。因此，我们在编写html文档时优先使用了这类元素，即使这会带来外观设置上的不便。比如，虽然技术上可以用图标图片实现单选框的功能，并且可以比真正的单选框元素具有更炫丽的外观，但我们仍会使用真正的单选框元素来实现相应功能。
对于设计上不支持用户交互操作的那些元素，比如文本元素，我们为其添加了属性"tabindex"，浏览器便会将其作为可聚焦元素处理。通常，将这一属性赋值为0即可。
聚焦顺序
浏览器在对元素聚焦时，会按照html代码中各元素从上到下、从外到内的顺序进行。因此，我们在编写html代码时考虑了元素在页面中的实际位置，大体上将出现在页面上侧、左侧的元素写在前面。对于一些虽然在页面中出现的顺序靠后，但需要被首先聚焦的元素，为其tabindex属性赋予正值即可。
聚焦后外观
处于focus状态的元素，其外观由css outline属性决定。而未被聚焦的元素，其outline属性则不会生效。因此，对所有元素设置按照需求设置合适的outline值即可。
值得指出的是，一种常见的网页设计实践是，为了精美的外观效果，将所有元素的outline效果都禁用。这样设计出来的网站虽然看起来精美，但完全忽视了只能通过键盘进行交互的那部分用户的需求——因为很难判断当前聚焦到了哪个元素上，键盘操作变得非常困难。
回车等效于鼠标左键
前述的那些先天支持聚焦的元素，同样也先天支持用回车键代替鼠标左键进行操作。需要注意的是那些通过tabindex属性被赋予可聚焦性的元素，它们在被点击时执行哪些js语句，相应地也要在被按下回车键时执行同样的js语句。