表現を広げるアクセシビリティ：3つの理由と12のコツ

こんにちは！

今回は「アクセシビリティって、デザインの表現を狭めませんか？」というモヤモヤに向き合います。
やるべきだと言われるけれど、正直テンションが上がらない。デザイナーやエンジニアのそんな気持ちは自然なものです。更に、アクセシビリティという言葉や内容はふんわり分かってるけど、表現やグラフィック、プログラミングを中心に学んできた人たちにとってはちょっと億劫な内容かもしれません。

ここで伝えたいのは一つです。
アクセシビリティはブレーキという制限ではなく、方向性を定めていくハンドルに近いということです。コントロールが効くほど、好きな方向に曲がれるようになります。やることは意外と地味ですが、仕上がりの説得力は確実に上がります。

一方通行の表現には留まらない、多様の表現や選択を可能とするのがアクセシビリティというものではないでしょうか。

要約
「表現が狭まる」という誤解にやさしく反論
今やるべき3つの理由
ユーザビリティとアクセシビリティの違い（ざっくり）
Webアクセシビリティは「レベルA」を取りにいくところからコツコツと
レベルAのコツ12（現場向けに要点だけ）
よくある反論と折り合いの付け方
今日から始める最短5ステップ
動画で学ぶならここから
まとめ
参考リンク

要約

2024年から合理的配慮が事業者にも義務化され、取り組みの見える化が評価されやすくなりました（内閣府リーフレット：令和6年4月1日から合理的配慮の提供が義務化されました。
https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html
最短ルートがほしい方は公的ガイドの活用です。特にデジタル庁のウェブアクセシビリティ導入ガイドブックは参考になりますし、対外的にも説得材料に使いやすいです。
とはいえ、ビジネス的な効果を示せと言われた場合はまた別となります。
https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
AIとSEOの文脈でも相性が良いです。意味の通る構造や反応の良さは、Page ExperienceやINPの指標にも効果が出てきます。
https://developers.google.com/search/docs/appearance/page-experience

「表現が狭まる」という誤解にやさしく反論

色に頼るな、音の自動再生を始め提供側による操作の自動化や制限は避ける。
言葉だけ聞くと、表現が削られるように感じます。

でも、ここで問われているのは「禁止」ではなく「選べること」です。
色は使っていい。けれど色だけにしない。動画もOK。けれど止められるようにする。点滅は強い刺激になり得るので別の演出に置き換える。

この「選択肢を増やす」設計は、狙った体験を壊しません。むしろ、忙しい人・音を出せない人・支援技術を使う人など、いろいろな状況に寄り添えるようになります。結果として、「伝わる範囲」が広がります。

スクロールを制限したり、ユーザーがスクロールできなくするような制御をしてくるWebサイトやUIが存在したりしますが、あれもまたユーザーによる操作の自由を奪う行為です。

今やるべき3つの理由

理由1：法制度の後押しが強まったこと
令和6年4月1日から、事業者にも合理的配慮の提供が義務化されています（内閣府：令和6年4月1日から合理的配慮の提供が義務化されました。罰則で脅すよりも、「やっている姿勢」を社会に示すことが大事になりました。取り組みの公開は、広報や採用の観点でも効いてきます。
https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html

理由2：公的ガイドと教材が揃い、迷わず始められること
仕様書を最初から読むのは骨が折れます。ここは近道になる参考書のような存在を使いましょう。デジタル庁のウェブアクセシビリティ導入ガイドブックは、図やチェックの観点が整理され、最初の共通言語づくりに最適です。JIS X 8341-3:2016の解説も国内実務の地図として便利です。
https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
https://waic.jp/docs/jis2016/understanding/

理由3：AIとSEOの波にうまく乗れること
セマンティックなHTML、意味の通る見出し、妥当なリンク文言、読みやすいフォーム。これらは人の使いやすさに加え、機械が正しく要約や抽出をする土台になります。検索ではPage ExperienceやINPの評価にもつながります。
https://developers.google.com/search/docs/appearance/page-experience
https://web.dev/blog/inp-cwv-launch?hl=ja

ユーザビリティとアクセシビリティの違い（ざっくり）

ユーザビリティは「特定の利用者が特定の状況で、目標を有効に、効率的に、満足とともに達成できる度合い」。
アクセシビリティは「多様な利用者が困らずに到達できるか」。

両者は仲が悪いわけではありません。
また、アクセシビリティの話題でよく使われる「困らずに」と「手段にばかりフォーカスが行くこと」がちょっと混乱を引き起こしている気がします。
個人的には「困ったとしても多様な選択が可能で、目標に到達できる」みたいなところでしょうか。
現実でもエレベーターが使えないとしても階段やエスカレーターを使えたり、階段じゃなくても坂道のスロープがあれば足が不自由な方だったりしても上の階に上がれたりします。
手段が一つしかなかったり、制限された場合はその手段で目標に到達できない場合は諦めるしか無いなど、機会の損失に繋がります。
しかし、こうした手段に対する例だとしても「そもそもこの内容が理解できるか」「知覚できるか」こうした問題がでてきたりします。
情報の関係をコードにも表現すること、意味の通る読み順を守ること、意外な挙動を避けること。これらの基本は、両方の点数を同時に上げます。

https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html

Webアクセシビリティは「レベルA」を取りにいくところからコツコツと

Web Content Accessibility Guidelines（WCAG）はA、AA、AAAの3ランクです。
実務では、まずAを固め、それからAAへ広げる流れが現実的です。

最新はWCAG 2.2です。変更点の俯瞰は「What’s New in WCAG 2.2」が読みやすいです。日本の実務ではJIS X 8341-3:2016も参照されます。
https://www.w3.org/TR/WCAG22/
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
https://waic.jp/docs/jis2016/understanding/

完璧主義は手を止めます。
Aを回収しながら、影響の大きい導線からAAへ広げるのが、無難です。

レベルAのコツ12（現場向けに要点だけ）

画像に代替テキストを入れる
装飾画像は空のalt、意味がある画像は簡潔な説明を。根拠はNon-text Content。
https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
動画や音声にテキストの入口を用意
字幕、トランスクリプト、要点の要約のどれかから始める。手引きはMaking Audio and Video Media Accessible。
https://www.w3.org/WAI/media/av/
セマンティックHTMLを素直に使う
見出しはh1→h2→h3、ボタンはbutton、リンクはa。divでボタンを作らない。
見た目の並びと読み順を一致
CSSで散らしても、HTML上は意味の通る順に。Meaningful Sequence。https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html
色だけで伝えない
必須なら「必須」の文字やアイコンも添える。Use of Color。
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
自動音声は短く、または止められるように
いきなり鳴らさない。Audio Control。
https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html
キーボードだけで操作できること
Tabでたどれ、フォーカスが見えること。Keyboard。
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
フォーカストラップを作らない
モーダルから抜け出せる道を必ず用意。No Keyboard Trap。Dialog。
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
動くものは止められる
カルーセルや背景動画は停止や一時停止の手段を。Pause, Stop, Hide。
https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html
点滅は3回/秒を超えない
Three Flashes or Below Threshold。別のモーションで魅せると安全です。
https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
タイトル、見出し、スキップリンクを整える
Page Titled
https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html
Bypass Blocks
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html
Link Purpose
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html
言語とフォームの分かりやすさ
html要素のlangを指定
https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html
フォームはラベル、エラーの位置と直し方を明示
https://www.w3.org/WAI/WCAG22/Understanding/error-identification
Labels or Instructions
https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html
Error Suggestion
https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html

よくある反論と折り合いの付け方

対応するとダサくなるのでは、という声があります。
ここは「最小限」を合言葉にします。停止ボタンは目立たせすぎず、でも見つかる場所に。必須表記は短いラベルで。リンクは「詳しくはこちら」を使ってもよいが、直前の文で行き先を具体化しておく。小さな追加で多くの誤解が防げます。

動画の要約は野暮では、という声もあります。
逐語は不要です。見どころ、数字、結論の3点を短く添えるだけで、通勤電車のようなギュウギュウづめの中でなおかつ音声が聞けない状態でも内容を掴めます。

キーボード対応が面倒、という懸念には、APGのサンプルをそのまま叩き台にする方法が有効です。
https://www.w3.org/WAI/ARIA/apg/

今日から始める最短5ステップ

サイト方針を1ページで公開
「当社はWCAG 2.2のレベルAを目標に…」のように目標と進め方を明記。法対応の見える化にもなります。
https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html
テンプレの骨格を固定
タイトル、h階層、ランドマーク、スキップリンク、リンク文言の基本をテンプレに入れてしまう。
メディア運用のルール化
画像altの書き分け、動画の字幕と要約、自動再生の扱いをチームで決める
https://www.w3.org/WAI/media/av/
マウスをぶち抜いて操作が可能かチェックを定例化
キーボードでゴールまで行けるか、モーダルから抜けられるかを短いテストに。DialogとTabsはAPG準拠の実装から始める
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
体感と数値をセットで見る
読了率や離脱と合わせて、Page ExperienceとINPの数値も見るhttps://developers.google.com/search/docs/appearance/page-experience
https://web.dev/blog/inp-cwv-launch

動画で学ぶならここから

Web Accessibility Perspectives Videos：
https://www.w3.org/WAI/perspective-videos/
Video Introduction to Web Accessibility and W3C Standards：
https://www.w3.org/WAI/videos/standards-and-benefits/ja
デジタル庁公式YouTube
https://www.youtube.com/watch?v=KNsjNU8OTKg

まとめ

アクセシビリティは、派手さを奪うためのルールではありません。
足す、整える、選べるようにする。これだけで、伝わる範囲は広がり、AIや検索にも強くなります。

完璧主義は置いておき、まずはレベルAを回収。
次に影響の大きい導線からAAへ。今日の12コツのうち、どれか一つを次の案件に入れてみてください。レビューが少し静かになり、仕事が少し楽になります。

参考リンク

法制度・公的情報
・令和6年4月1日から合理的配慮の提供が義務化されました（内閣府）
https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html
・事業者による障害のある人への合理的配慮の提供が義務化（政府広報オンライン）
https://www.gov-online.go.jp/article/202402/entry-5611.html

ガイド・一次仕様
・ウェブアクセシビリティ導入ガイドブック（デジタル庁・案内ページ）
https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
・ウェブアクセシビリティ導入ガイドブック（PDF, 2024/03/29）
https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf
・JIS X 8341-3:2016 解説（WAIC）
https://waic.jp/docs/jis2016/understanding/
・WCAG 2.2（W3C 勧告）
https://www.w3.org/TR/WCAG22/
・What’s New in WCAG 2.2（W3C/WAI）
https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
・WAI-ARIA Authoring Practices Guide（W3C/WAI）
https://www.w3.org/WAI/ARIA/apg/
・Dialog（Modal） Pattern（WAI-ARIA APG）
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
・Tabs Pattern（WAI-ARIA APG）
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

検索・パフォーマンス
・Understanding Page Experience in Google Search（Google Search Central）
https://developers.google.com/search/docs/appearance/page-experience
・INP is officially a Core Web Vital（web.dev）
https://web.dev/blog/inp-cwv-launch