> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/faq/experience-edit/web-accessibility.md).

# Web无障碍访问支持

Ptengine Experience 投放的弹窗和悬浮条**原生支持键盘操作**，图像元素也可以设置替代文本。这两件事都有助于提升站点的无障碍访问性。

{% hint style="success" %}
**键盘操作不需要你做任何设置** —— 所有弹窗和悬浮条默认就支持。
{% endhint %}

***

## 什么是Web无障碍访问 <a href="#what-is-web-accessibility" id="what-is-web-accessibility"></a>

指无论访客是否有身心障碍、年龄大小、使用什么设备和环境，都能获取网页上的信息和服务。

具体要达到的状态：

* 看不见也能获得信息、完成操作
* 只用键盘就能操作
* 分不清某些颜色也不会丢失信息
* 音视频内容在听不到声音时也能理解内容

提升无障碍访问性还有个副作用：**有利于搜索引擎爬虫理解页面内容**，一般认为对 SEO 有帮助。

{% hint style="info" %}
**面向日本市场的站点请注意**：根据日本 2021 年 6 月 4 日起施行的法律修订，民营企业运营的网站需在 3 年内完成 Web 无障碍访问支持。

参考：日本数字厅《Web无障碍访问导入指南》 <https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/>
{% endhint %}

***

## 键盘操作 <a href="#keyboard-input" id="keyboard-input"></a>

弹窗和悬浮条上的这些操作都可以只用键盘完成：

* 关闭弹窗
* 填写表单

访客即使不用鼠标，也能浏览和操作这些内容。

### 按键对照 <a href="#keyboard-input-details" id="keyboard-input-details"></a>

| 按键              | 作用                  |
| --------------- | ------------------- |
| **Esc**         | 把焦点移到当前显示的弹窗或悬浮条上   |
| **Tab**         | 在弹窗/悬浮条内的元素之间依次移动焦点 |
| **Shift + Tab** | 往回退一个，撤销上一次 Tab 的移动 |
| **↑ ↓**         | 在下拉菜单里选项之间移动        |
| **Enter**       | 等同于鼠标左键点击，用于确认      |

{% hint style="warning" %}
**Esc 不是“打开弹窗”**，是把焦点**移到**已经弹出来的弹窗上。弹窗本身什么时候出现，由[展示时机](/cn/experience/campaign/create-new-1/display-timing.md)决定。
{% endhint %}

### 填写表单 <a href="#form-response-steps" id="form-response-steps"></a>

{% stepper %}
{% step %}

### 按 Esc 把焦点移到弹窗上

{% endstep %}

{% step %}

### 按 Tab 移到要填的输入框

{% endstep %}

{% step %}

### 下拉菜单用 ↑ ↓ 选，按 Enter 确认

{% endstep %}
{% endstepper %}

### 关闭弹窗 <a href="#steps-to-close-popups" id="steps-to-close-popups"></a>

{% stepper %}
{% step %}

### 按 Esc 把焦点移到弹窗上，再用 Tab 移到右上角的关闭按钮

{% endstep %}

{% step %}

### 按 Enter 关闭

{% endstep %}
{% endstepper %}

***

## 替代文本(Alt)设置 <a href="#setting-alternative-text-alt" id="setting-alternative-text-alt"></a>

弹窗、悬浮条和页面编辑的编辑器里，都可以给图像元素设置**替代文本**（alt 属性）。设置方法见[创意编辑](/cn/experience/campaign/create-new-1/creative-editing.md)。

替代文本是用来说明图像内容和它所处语境的文字，设了有三个好处：

* 图像因网络或资源问题**加载失败时**，位置上会显示这段文字
* **屏幕阅读器**能把图像的内容读给访客听
* **搜索引擎爬虫**更容易理解页面内容，一般认为对 SEO 有帮助

***

## 相关页面 <a href="#related-pages" id="related-pages"></a>

* [创意编辑](/cn/experience/campaign/create-new-1/creative-editing.md) — 替代文本在哪里设
* [创建弹窗/悬浮条的方法](/cn/experience/campaign/create-new-1/popup-bar-creation.md)