# Webアクセシビリティへの対応

Ptengine Experienceでは、Webサイト内のユーザー体験を向上することを目的としたポップアップやページ編集機能を提供しております。

下記でご紹介するキーボード入力や代替テキストの編集機能を活用いただくことで、Webサイトのアクセシビリティ向上、および、より効果的かつ効率的なサイト運営をサポートしてまいります。

## Webアクセシビリティとは <a href="#id-0-toc-title" id="id-0-toc-title"></a>

Webアクセシビリティは、利用者の障がいの有無やその程度、年齢や利用環境にかかわらず、Webで提供されている情報やサービスを利用できること、またはその到達度を意味しています。

Webサイトのアクセシビリティを向上することで、検索エンジン上でもクローラーによるページの内容理解を促進し、SEO強化にも繋がるとされています。

また、日本国内においては、法改正により2021年6月4日から起算して3年以内に民間企業が運営するWebサイトにおいて、Webアクセシビリティへの対応が義務化されました。

{% hint style="success" %}
**Note：**&#x57;ebウェブアクセシビリティが確保できている状態とは、具体的に次のような状態になることが望まれます。\
・ 目が見えなくても情報が伝わる・操作できること\
・ キーボードだけで操作できること\
・ 一部の色が区別できなくても情報が欠けないこと\
・ 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること
{% endhint %}

※デジタル調「ウェブアクセシビリティ導入ガイドブック」(<https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/>) より

## キーボード入力 <a href="#id-1-toc-title" id="id-1-toc-title"></a>

Ptengine ExperienceのWeb接客機能で設置したポップアップや固定バーにおいて、以下のアクションをキーボード操作が可能です。

* ポップアップを閉じる
* フォームに回答する

これによりサイト訪問者は、マウスを使用しなくてもWeb接客コンテンツを閲覧・操作できます。

本機能は、Ptengineユーザー様側で行う設定はなく、すべてのポップアップ・固定バーにて利用可能です。

### **フォームの回答手順**

1. Escキーを押して、ポップアップを表示します。
2. Tabキーを押して、選択した入力欄にフォーカスを移動します。
3. 上下矢印キーを使用して、ドロップダウンメニューの項目を選択し、Enterキーで確認します。

![](https://devhelp.ptengine.jp/wp-content/uploads/2023/03/form.gif)

### **ポップアップを閉じる手順：**

1. EscキーとTabキーを使用して、右上の閉じるボタンにフォーカスを移動します。
2. Enterキーを押してポップアップを閉じます。

![](https://devhelp.ptengine.jp/wp-content/uploads/2023/03/close.gif)

### キーボード入力の詳細

* **Tabキー：**&#x30DD;ップアップ/固定バー上の要素に対してフォーカスを移動したり、選択したりすることができます。<br>

  <figure><img src="https://devhelp.ptengine.jp/wp-content/uploads/2023/03/fullkeybw-1.png" alt="" width="563"><figcaption></figcaption></figure>
* **Shift + Tabキー：**&#x54;abキーで行なった操作を戻すことができます。<br>

  <figure><img src="https://devhelp.ptengine.jp/wp-content/uploads/2023/03/fullkeybw-2.png" alt="" width="563"><figcaption></figcaption></figure>
* **Enterキー：**&#x30DE;ウスでの左クリックと同じように機能します。確認に使用されます。

<figure><img src="https://devhelp.ptengine.jp/wp-content/uploads/2023/03/fullkeybw-3.png" alt="" width="563"><figcaption></figcaption></figure>

* **上下矢印キー：**&#x30C9;ロップダウンメニューの項目を選択することができます。<br>

  <figure><img src="https://devhelp.ptengine.jp/wp-content/uploads/2023/03/fullkeybw-4.png" alt="" width="563"><figcaption></figcaption></figure>
* **Escキー：**&#x73FE;在表示されているポップアップや固定バーにフォーカスを移動することができます。

<figure><img src="https://devhelp.ptengine.jp/wp-content/uploads/2023/03/fullkeybw-5.png" alt="" width="563"><figcaption></figcaption></figure>

## 代替テキスト(Alt)の設定

Web接客やページ編集のエディターにて、画像要素に代替テキスト(altタグ、alt属性)を設定することができます。設定方法は、[こちら](https://ptmind-1.gitbook.io/ptengine-helpcenter/experience/campaign/inline_gudie/editor#notekisuto)の記事をご覧ください。

代替テキスト(altタグ、alt属性)とは、Webサイト上の画像の意味や置かれている文脈を説明するテキストで、設定することで以下の利点があります。

* ネットワークやリソースのエラーにより画像の読み込みに失敗した場合に表示されます。
* 画面読み上げソフトを利用してWebサイトを閲覧することを可能にします。
* 検索エンジン上でクローラーによるWebページの内容理解を促進し、SEO強化に繋がるとされています。<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/faq/experience-edit/web-accessibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
