功能详细说明

缩放

  1. 缩放整个文档，原始、1.1 - 2.0倍
  2. 使用transform-scale方案，这种方案放大的元素不会影响到已确定盒模型的尺寸，比如一个确定了的50px * 50px的元素，元素放大后的尺寸不变，但是容器内部的元素已经放大了，为了避免这种情况在实现时把所有的元素放置到了body下一个容器中，然后通过对这个容器再进行缩放实现

配色

  1. 变更页面的配色，提供四种配色方案，每种方案对普通元素，超链接元素，输入框元素进行分别样式覆盖
  2. 配色时会先复原元素的样式，再进行配色
  3. 移动端中的变更文字大小也是同样的实现逻辑

十字线

  1. 标注出当前页面鼠标的位置，通过鼠标移动事件修改两条线的坐标实现
  2. 在缩放后，两种策略下坐标的计算方式有所不同
  3. 和业内竞品不同的是，额外增加了对iframe内区域的支持

大鼠标

  1. 没有需要注意的

大字幕

  1. 没有开启语音时，大字幕会自动进行定时的文字滚动
  2. 开启语音后，读完了当前语句，再触发翻页
  3. 工具条对一个元素进行语音取字和大字幕取字的策略略有差异，比如大字幕下快捷键提示Ctrl + Alt + A，实际传到TTS中是Ctrl加Alt加A
  4. 上述情况在极少数的用例中会出现大字幕与文本阅读的位置存在差异，所以尽量不要对一个元素的两种取字造成太大的差异

可读元素

脚本如何认为一个元素是可读的：

  1. 是否配置了config.extraElementReadingFunc，如果配置了会调用此方法取得元素类型与文本，如果没有配置方法或返回为false继续判断是否是工具条中的元素，工具条中的元素不可读
  2. 如果元素不是末级节点，判断元素是否是p，a，h1，h2，h3，h4，h5，h6中的一种，如果是则依次按[aria-label]，[title]，[alt]，元素内部文本取值，存在文本就是可读元素；如果不是其中的一种，则按[aria-label]，[title]，[alt]，[value]取值，存在就是可读元素
  3. 如果元素是末级节点，只有在对元素的类型和文本取值都为空时，视为不可读元素

阅读元素

页面元素会被三种方式阅读：指读、连读、tab键触发：

  1. 指读是通过鼠标 mouseover 事件中取得的元素，如果它是可读的，取得它的可读文本交给TTS api
  2. tab键触发阅读与指读相似，但并不是所有的元素都可以被tab键触发到焦点，浏览器只会给默认元素标记焦点
  3. 连读功能的收集节点的方式与前两种方式不同，在鼠标悬停2秒后，阅读那个元素与之后的下一个元素，再判断那个元素是否可读

阅读元素类型

  1. 指读与连读模式触发的元素不同，两种方式的触发元素都是鼠标事件、但是连读在寻找下个元素的时候会优先寻找p，a，h1，h2，h3，h4，h5，h6，这些元素下面的可读元素会被忽略；指读模式基于mouseover实现，事件会发送到最深的可读元素上
  2. 一个可读元素的阅读分成两部分，元素的类型和元素的正文
  3. 元素的类型会根据元素的[role]，标签名判断，前者的优先级更高，例如：
    <div role="a">这是一个链接</div>
<a role="img">这是一张图片</a>
  4. 递归查询元素的上级祖先中，是否存在a元素，如果存在则把此a元素作为被读元素
  5. input类型的元素会额外判断type，完整的元类型名称映射为：
    const commonTagTypes: Record<string, string> = {
  img: '图片',
  button: '按钮',
  input: '输入框',
  textarea: '输入框',
  option: '下拉框',
  a: '链接',
  video: '视频',
  audio: '音频',
  qrcode: '二维码',
};

const inputTagTypes: Record<string, string> = {
  button: '按钮',
  checkbox: '复选框',
  color: '拾色器',
  date: '日期选择器',
  'datetime-local': '日期时间选择器',
  email: '邮箱框',
  file: '文件框',
  month: '月份选择器',
  number: '数字框',
  password: '密码框',
  radio: '单选',
  range: '区间输入框',
  reset: '重置按钮',
  tel: '电话输入框',
  text: '文本框',
  time: '时间输入框',
  url: '网络地址输入框',
  week: '周输入框',
};
  6. 没有类型对应就为空

阅读元素文本

脚本是如何阅读一个元素文本的：

  1. 优先寻找改元素的 a 祖先，如果存在就取 a 的类型与文本
  2. 指读按[aria-label]，[title]，[alt]，[value]，元素内部文本取值
  3. input元素的文本为空时额外取placeholder

全键盘操作（建议从无障碍后台中使用标签管理实现）

  1. 建议通过后台来配置，以下为旧方案：
  2. 浏览器本身对默认元素实现了可聚焦，当按下Tab键就会依次在页面中循环聚焦元素
  3. 对于一些会产生元素变更的交互组件，例如Popup、Tab、Dropdown等常见的UI组件，提供了一种通用的键盘操作解决方案
  4. 在会产生元素变化的触发元素上，增加自定义属性wza-role="list"，工具栏监测到这个元素，就会对这个元素的类型进行变更为下拉框，同时增加键盘操作的提示
  5. 需要注意的是，这个元素必须时可读元素，如果不是可读元素可以手动设置aria-label来控制
  6. 无论是鼠标移动触发，还是点击触发显示对应的窗口，工具栏需要一个顶级作用域下的active函数与hide函数，分别设置到wza-popup-activeFn="functionName"、wza-popup-hideFn="functionName"
  7. 当用户通过键盘操作进入到下一层，工具栏就会调用activeFn，然后把焦点放置在第一个设置上wza-role="listitem"的属性上
  8. 当使用键盘操作返回上一层级，工具栏就会调用hideFn，然后把焦点放置回wza-role="list"的下一个元素

CMS 文档段落自动可聚焦（建议从无障碍后台中使用标签管理实现）

  1. 建议通过后台来配置，以下为旧方案：
  2. 通过配置focusableDocumentSelector属性，工具栏在页面变化过程中收集到匹配的节点，对匹配的节点下级的h1、h2、h3、h4、h5、h6、p节点设置tabindex属性

移动端变更文字大小

  1. 因为工具条需要获取元素本身的字体大小，所以不能把修改的样式通过内联样式覆盖到原始元素上
  2. 工具条会根据缩放元素后的动态字体大小自动生成类，比如.font-by-wza-192px: { font-size: 19.2px !important; }，并把设置到对应的元素上
  3. 但是会存在一些场景导致生成的类优先级不够，而原始页面的样式优先级又比较高，导致字体大小没有生效，这时候可以通过配置config.mobileFontSizeClassPrefix来解决，例如：
    // 页面加载时，注意后面的空格
wza2.config({ mobileFontSizeClassPrefix: '.TRS_Editor ' });
// 启动适老化时
wza2.config({ mobileFontSizeClassPrefix: '.web_older .TRS_Editor ' })
  4. 默认的缩放等级是1.2、1.4，可以通过配置config.mobileFontSizeLg，config.mobileFontSizeXl来修改，例如：
    // 1.1/1.2
wza2.config({ mobileFontSizeLg: 1.1, mobileFontSizeXl: 1.2 });