互換性とパフォーマンス
EVN accessibility は、どんなサイトや技術スタックにもそのまま組み込める1行のアクセシビリティウィジェットです。このページでは、対応環境やホストサイトへの影響、表示速度について説明します。
あらゆるサイト・スタックで動作します
EVN accessibility は <script> タグを1行貼り付けるだけで動作します。サイトの構築方法を問わず、次のような環境でそのまま利用できます。
- プレーンな HTML で作られたサイト
- Vue / React / Nuxt などのフレームワークで構築されたアプリ
- WordPress などの CMS で運用されているサイト
特別な設定やビルド作業は不要です。HTML の </body> の前に次のスニペットを貼り付けてください。
<script src="https://cdn.evn-a11y.com/a11y@2/a11y.js" data-site-id="st_xxxxxxxx" defer></script>
設置方法のくわしい手順は 導入ガイド を参照してください。
独自技術によるCSSの分離
EVN accessibility は最新の技術で作られています。ウィジェットの見た目や動作はすべて独立した描画領域の内側に閉じ込められているため、ホストサイトの CSS とぶつかることがありません。
| 項目 | 動作 |
|---|---|
| ホストサイトのCSS | ウィジェットに影響しません |
| ウィジェットのCSS | ホストサイトに漏れ出しません |
| サイトのコード・コンテンツ | 永続的には変更されません |
ウィジェットが行うのは、訪問者が選んだ視覚的な効果(文字サイズの変更や配色の調整など)を一時的に適用することだけです。サイト本体のソースコードやコンテンツが書き換えられることはありません。
軽量で、表示速度への影響はほとんどありません
スクリプトは非常に軽量です。defer 属性付きで読み込まれるため、ページ本体の表示をブロックしません。
- 読み込み方式:
defer(ページ表示を妨げない) - 体感できるページの遅延:ありません
訪問者がウィジェットを開いて操作するまで、表示への影響はほぼ発生しません。
設定は訪問者のブラウザに保存されます
訪問者が選んだ設定は、その人自身のブラウザ(localStorage)に保存されます。サーバーに個人の設定を送ることはありません。同じサイトを再訪したときには、前回の設定がそのまま引き継がれます。
設定をすべて消したいときは、パネル内の「リセット」ボタンを押すと初期状態に戻ります。
対応ブラウザ
EVN accessibility は、主要なモダンブラウザに対応しています。
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
いずれも最新版での利用を推奨します。これらのブラウザでは、16種類すべての機能と7つのプリセットが利用できます。