EVN アクセシビリティ

サイトごとのカスタマイズ

EVN accessibility は、1 行のスクリプトタグを貼り付けるだけで使えるウェブアクセシビリティウィジェットです。1 つの会社で複数のサイトを管理でき、それぞれのウィジェットは管理ダッシュボードからリモートで設定できます。このページでは、管理者がサイトごとに調整できる設定について説明します。

<script src="https://cdn.evn-a11y.com/a11y@2/a11y.js" data-site-id="st_xxxxxxxx" defer></script>

設定はすべて管理ダッシュボードから行います。サイトのコードに変更を加える必要はなく、保存するだけでそのサイトのウィジェットに反映されます。

管理ダッシュボードにサインインする

設定を変更するには、まず管理ダッシュボード(/login)にサインインします。ログインすると、自分の管理するサイトの一覧が表示されます。設定したいサイトを開くと、そのサイト専用の設定画面が開きます。

フリープランでは 1 サイトまで管理できます。

トリガーボタンとパネルの位置

ウィジェットは、画面の隅に表示される丸いトリガーボタンと、それを押すと開くパネルで構成されています。表示位置は、横方向(左/右)と縦方向(上/下)の 2 つの軸で指定できます。

横の位置は次のとおりです。

設定 説明
右(right) トリガーボタンとパネルを画面の右側に表示します(既定)。
左(left) トリガーボタンとパネルを画面の左側に表示します。

縦の位置は次のとおりです。

設定 説明
下(bottom) トリガーボタンを画面の下端に表示します(既定)。
上(top) トリガーボタンを画面の上端に表示します。

縦の位置はおもにトリガーボタンが付く位置(上端/下端)を切り替える設定です。スライドして開くパネルは画面の高さいっぱいのサイドドロワーのため、縦の位置を変えてもパネル自体は上下に動きません。

また、端からの距離(画面の上端/下端からの距離)を調整して、トリガーボタンの余白を細かく設定できます。

サイトのデザインや、他の固定要素(チャットボタンなど)と重ならないように選んでください。

カラーテーマ(ライト / ダーク)

ウィジェットのパネル自体の見た目を、ライトテーマかダークテーマのどちらかに設定できます。

テーマ 説明
ライト(light) 明るい背景のパネル。明るいサイトになじみます。
ダーク(dark) 暗い背景のパネル。暗い配色のサイトになじみます。

これはウィジェットのパネルの配色設定です。サイト全体の配色を変える「ライトモード」「ダークモード」機能とは別のものです。各機能については 機能ガイド(全16機能) をご覧ください。

メインタブとサブタブに表示する機能

ウィジェットのパネルには「カスタマイズ」エリアがあり、そこに メインサブ の 2 つのタブがあります。メインタブには「文字サイズの変更」と 6 つの色モード、サブタブにはそれ以外の 9 つの機能が並びます。

管理者は、16 個ある機能をそれぞれ表示するかどうかを設定できます。タブ内の機能をすべて非表示にすると、そのタブ自体が自動的に隠れます。

  • メインタブの機能:文字サイズの変更、ライトモード、ダークモード、色の反転、モノクロ、低彩度、高彩度。
  • サブタブの機能:文字の間隔(縦)、文字の間隔(横)、画像の非表示、リンクに下線、カーソルの拡大、部分読み上げ、フォントの変更、ページ構造の表示、動画の停止。

機能の一覧と内容については 機能ガイド(全16機能) を参照してください。

プリセットの有効化

パネルには、ワンタップで設定一式をまとめて適用できる ワンタップ設定(プリセット) セクションがあります。プリセットは全部で 7 種類あり、管理者はサイトごとにどのプリセットを表示するかを選べます。

プリセット 効果
老眼 文字サイズ 114% + 行間 2.1 + フォントの変更 + 動画の停止 + カーソルの拡大 + 高彩度 + リンクに下線
認知と学習 画像の非表示 + 動画の停止 + リンクに下線 + カーソルの拡大
弱視 文字サイズ 121% + 高彩度 + 動画の停止 + リンクに下線 + フォントの変更 + カーソルの拡大
色弱 高彩度
光覚 モノクロ + 画像の非表示 + 動画の停止
てんかん 低彩度 + 動画の停止
失読症 フォントの変更 + 動画の停止

サイトの利用者層に合わせて、必要なプリセットだけを表示することをおすすめします。プリセットの詳しい内容は ワンタップ設定(プリセット) をご覧ください。

訪問者が選べる表示言語

ウィジェットのパネルには言語切り替えがあり、各訪問者が自分で表示言語を選べます。選べる言語は次の 3 つです。

  • 日本語(ja)
  • ベトナム語(vi)
  • 英語(en)

訪問者が選んだ言語は、その人自身のブラウザ(localStorage)に保存されます。これは訪問者ごとの設定なので、管理者が決めるサイトの設定とは独立しています。ある訪問者が英語に切り替えても、他の訪問者の表示には影響しません。

訪問者がパネルで選んだ機能の状態も同じくブラウザに保存され、再訪問時にも引き継がれます。パネル内の リセット ボタンを押すと、それらの設定はすべて消去されます。

関連ページ

サイトごとのカスタマイズ — EVN accessibility