ウィジェット自体のアクセシビリティ
EVN accessibility は、サイトを訪れる方を支援するツールです。だからこそ、ウィジェットそのものが誰にとっても使いやすくあるべきだと考えています。このページでは、EVN accessibility のパネルがどのようにアクセシブルに設計されているかをご紹介します。
EVN accessibility は WCAG 2.1 AA への準拠を目標として設計されています。
キーボードだけで操作できます
マウスを使わない方のために、パネルのすべての操作はキーボードだけで完結します。
| キー | 動作 |
|---|---|
Tab / Shift + Tab |
パネル内の項目を順番に移動します |
Enter / Space |
ボタンやスイッチを操作します |
矢印キー |
スライダー（「文字サイズの変更」「文字の間隔（縦）」など）の値を調整します |
Esc |
パネルを閉じます |
右下の丸いトリガーボタンも、Tab でフォーカスして Enter で開けます。
正しい ARIA ロールとラベル
スクリーンリーダーをお使いの方にも、各項目が何であるかが正しく伝わります。
- パネルは dialog（ダイアログ） ロールを持ち、開いたことが読み上げられます。
- 各機能のオン／オフは switch（スイッチ） ロールを持ち、現在の状態（オン／オフ）が読み上げられます。
- すべてのボタン・スイッチ・スライダーには、スクリーンリーダー向けのラベルが付いています。
- ラベルは表示言語（日本語／ベトナム語／英語）に合わせて切り替わります。
フォーカスの管理
- パネルを開くと、フォーカスはパネル内に移動します。
- パネルが開いている間、
Tabキーのフォーカスはパネル内に閉じ込められます（フォーカストラップ）。背後のページに迷い込むことはありません。 - パネルを閉じると、フォーカスは元のトリガーボタンに戻ります。操作を続けやすい設計です。
アニメーションの抑制（reduced-motion）
OS や ブラウザで「視差効果を減らす」「アニメーションを減らす」を設定している方には、パネルの開閉などのアニメーションが自動的に控えめになります（prefers-reduced-motion に対応）。動きに敏感な方も安心してお使いいただけます。
ホストサイトに影響しません
EVN accessibility は 独自の分離技術 で構築されているため、ウィジェットのスタイルがサイト側の CSS と衝突することはありません。また、ウィジェットがサイトのコードや内容を恒久的に書き換えることはなく、適用されるのは見た目の効果だけです。設定はお使いのブラウザ内（localStorage）にのみ保存され、「リセット」ボタンですべて元に戻せます。
どの機能がどなたの役に立つか
EVN accessibility の機能やプリセットは、さまざまな利用者の困りごとに対応しています。代表的な組み合わせをご紹介します。
| 利用者 | 役立つプリセット／機能 |
|---|---|
| 高齢の方 | プリセット「老眼」（文字サイズ 114%・行間 2.1・フォントの変更・動画の停止・カーソルの拡大・高彩度・リンクに下線） |
| ロービジョン（弱視）の方 | プリセット「弱視」（文字サイズ 121%・高彩度・動画の停止・リンクに下線・フォントの変更・カーソルの拡大） |
| 色覚に特性のある方 | プリセット「色弱」（高彩度） |
| 光に敏感な方 | プリセット「光覚」（モノクロ・画像の非表示・動画の停止） |
| 認知・学習に特性のある方 | プリセット「認知と学習」（画像の非表示・動画の停止・リンクに下線・カーソルの拡大） |
| 光感受性発作のある方 | プリセット「てんかん」（低彩度・動画の停止） |
| ディスレクシア（読み書き困難）の方 | プリセット「失読症」（読みやすいフォント・動画の停止） |
| 全盲・スクリーンリーダー利用の方 | 「部分読み上げ」機能、「ページ構造の表示」機能 |
各機能の詳しい説明は 機能ガイド（全16機能）、プリセットの一覧は ワンタップ設定（プリセット） をご覧ください。