# 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>
