EVN アクセシビリティ

クイックスタート（3ステップ）

EVN accessibility は、1行の <script> タグを貼り付けるだけで導入できる、ウェブアクセシビリティウィジェットです。最新の技術で作られた軽量なウィジェットで、独自の分離技術によりホストサイトの CSS と干渉しないため、見た目を崩す心配がありません。

このページでは、最短 3 ステップで EVN accessibility をサイトに設置する方法を説明します。所要時間は数分です。

導入の流れ

ステップ 内容
1 管理ダッシュボードで site-id を取得する
2 スクリプトタグを </body> の直前に貼り付ける
3 ページを再読み込みし、右下のボタンをクリックする

ステップ 1：site-id を取得する

管理ダッシュボードにサインインし、対象サイトの site-id を確認します。

  1. ダッシュボードの /login からサインインします。
  2. サイト一覧から設置したいサイトを開きます。
  3. そのサイトの site-id（st_xxxxxxxx の形式）を控えます。

この site-id によって、どのサイトの設定をウィジェットに反映するかが決まります。

ステップ 2：スクリプトタグを貼り付ける

下記の 1 行を、ページの </body> タグの直前に貼り付けます。data-site-id の値は、ステップ 1 で取得したご自身の site-id に置き換えてください。

<script src="https://cdn.evn-a11y.com/a11y@2/a11y.js" data-site-id="st_xxxxxxxx" defer></script>
  • どんな技術スタックでも動作します。 Vue・React・Nuxt・WordPress など、サイトの構成を問いません。
  • ビルド作業は不要です。 HTML に 1 行追加するだけで導入が完了します。

ステップ 3：再読み込みして確認する

スクリプトを設置したら、ページを再読み込みします。画面の 右下に丸いボタン が表示されるので、クリックしてみてください。アクセシビリティ用のパネルが開けば、設置は成功です。

ボタンが表示されない場合は、スクリプトタグが正しく貼り付けられているか、site-id が正しいかをご確認ください。

パネルでできること

丸いボタンを押すと開くパネルには、次の機能があります。

  • アクセシビリティボタンのサイズ：丸いフローティングボタンの大きさを 大 / 標準 / 小 の 3 段階から選べます。
  • 言語切り替え：日本語 / ベトナム語 / 英語。
  • ワンタップ設定（プリセット）：1 タップで設定一式が切り替わる 7 種類のプリセット（同時にオンにできるのは 1 つだけ）。
  • カスタマイズ：「メイン」「サブ」の 2 つのタブから、個別の機能を調整できます。
  • リセット：パネル最下部のボタンで、すべての設定を初期状態に戻します。

訪問者の設定は、その人のブラウザ（localStorage）に保存されます。リセットを押すとすべてクリアされます。なお、ウィジェットがホストサイトのコードや内容を恒久的に書き換えることはありません。適用されるのは表示上の効果だけです。

次のステップ

クイックスタート（3ステップ） — EVN accessibility