1行で導入
<script src="…/a11y.js" data-site-id="…"> を貼るだけ。Vue / React / Nuxt / WordPress どれでも動きます。
ウェブアクセシビリティ — 遠隔で設定ウェブのバリアフリー化を、
ウェブのバリアフリー化を、
たった1行のタグで。
アクセシビリティ対応のプラグイン。サイトに1行貼るだけで、文字サイズ・読み上げなどの支援機能を提供します。設定は管理画面からサイトごとにリモートで変更できます。
特長
必要なのは、たった1行のスクリプトタグだけ。
複数サイトを一元管理
1つのアカウントで複数サイトを管理。サイトごとに表示する機能を細かく設定できます。
超軽量
最新の技術で構築。サイトの CSS と衝突せず、ページ表示を重くしません。
機能テストエリア
右下のウィジェットを開き、各機能をオンにして下のサンプルの変化を確認してください。16機能の一覧はこの下にあります。 設定は 管理画面から変更できます。
サンプル見出し — 「ページ構造の表示」を確認
サブ見出し
文字サイズ・行間・字間・フォント変更を試すためのサンプル文です。ウィジェットのスライダーを動かすと文字が広がったり書体が変わります。
行間がよく分かるよう、少し長めの段落です。アクセシビリティは高齢者・弱視・ディスレクシアの方など、誰もが読みやすくするための機能です。
この段落にカーソルを置いて「部分読み上げ」をオンにし、文章をクリックすると音声で読み上げます。
カラーパレット — 色の反転 / モノクロ / 低・高彩度 / ライト・ダークを確認
画像 — 画像の非表示 / モノクロ / 彩度を確認
リンク — 「リンクに下線」を確認：
自動再生動画 — 「動画の停止」を確認
アニメーション効果
ウィジェットの「動画の停止」をオンにすると、動画とこれらの動きが止まります。
16機能の一覧
| 機能 | 効果・確認ポイント |
|---|---|
| 文字サイズの変更 | 文字の大きさを変更します |
| 文字の間隔（縦） | 行と行の間隔を広げます |
| 文字の間隔（横） | 文字と文字の間隔を広げます |
| ライトモード | 背景を白く、文字を濃くします |
| ダークモード | 背景を暗い配色にします |
| 色の反転 | 画面の色を反転します |
| モノクロ | 画面を白黒で表示します |
| 低彩度 | 色の鮮やかさを抑えます |
| 高彩度 | 色をより鮮やかにします |
| 画像の非表示 | 画像を隠して気を散らさないようにします |
| リンクに下線 | リンクに下線を引いて目立たせます |
| カーソルの拡大 | マウスカーソルを大きくします |
| 部分読み上げ | クリックした文章を音声で読み上げます |
| フォントの変更 | 読みやすいフォントに切り替えます |
| ページ構造の表示 | リンクと見出しの一覧を表示します |
| 動画の停止 | 自動再生の動画を止め、アニメーションや視差効果などの動きを停止します |