Web Accessibility Guidelines
ペパボをもっとアクセシブルに
このガイドラインは、ペパボのプロダクトや情報を “すべての人に” 届けるためのWebアクセシビリティガイドラインです。
ペパボでは、すべての人が「インターネットで可能性をつなげる、ひろげる」ことができるように、プロダクトにおいて「アクセシブルであること」を原則と定めています(ペパボデザインプリンシプル)。このガイドラインでは、その原則に従ってアクセシブルなプロダクトを開発するための方法についてまとめています。
Webアクセシビリティとは
Webアクセシビリティは、WebサービスやWebコンテンツへのアクセスできる度合いを表す言葉です。アクセシビリティが低いと、一部の人にとってサービスやコンテンツの利用・理解が難しい状態となってしまいます。
アクセシビリティと聞くと「障害者・高齢者への特別対応」とイメージする人もいますが、そうではありません。怪我などによって一時的に障害を持った状態になったり、騒音などの環境的要因で一部の感覚が機能しない状況になったりと、いつも通りにWebサービスを利用できない状況に陥ることは誰しも起こり得ます。アクセシビリティを高めることで、年齢や性別、障害の有無、利用環境を問わず、誰もが十分にサービスやコンテンツを利用・理解できる状態へと近づけることができます。
ガイドラインについて
このガイドラインは、『Webアクセシビリティ確保 基本の「キ」』をベースに作成され、そこにわたしたちに必要な項目を追加しています。また、より詳しく学べる資料として「freee アクセシビリティー・ガイドライン」や「Ameba Accessibility Guideline」の参考リンクも記載しています。これらのガイドラインは国際規格であるWCAGをベースに利用しやすい粒度に再構成したガイドラインです。本ガイドラインと併せて参照することを推奨します。
活用方法
ガイドラインの活用方法は特に限定しませんが、活用例を以下の表にまとめました。
フェーズ | 活用例 |
---|---|
企画・要件定義 |
|
デザイン |
|
実装 |
|
ページのメタ情報
ページのメタ情報は、適切に設定することで検索エンジンやSNSでページの内容を理解しやすくなります。その他にも、メタ情報を適切に設定することで全盲や弱視などでスクリーンリーダーを利用する人たちが現在のページを理解しやすくなったり、適切な言語での読み上げが可能になります。
- HTMLのtitle要素には、ページの内容がわかるタイトルを記述する。
- OGPやTwitter Cardなどのメタデータを設定する。
- 個別のページタイトルとWebサイトのタイトルを併記する場合は、環境によっては末尾が省略されることを想定して、先頭に個別のページのタイトルを記述する。
- lang属性を設定する。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: ページタイトル[ページ設定]
- Ameba Accessibility Guidelines: 2.4.2 ページの主題がわかるタイトルを設定する
- 3.1.1 ページの言語を指定する - Ameba Accessibility Guidelines
- freeeアクセシビリティー・ガイドライン: 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス
マークアップ
適切にマークアップを行うことで、本来のWeb・ブラウザが持つ機能を十分に発揮することが可能になります。特に、スクリーンリーダー利用時にはボタンやリンク、リストなどの要素を正しく認識することが可能となるのはもちろんのこと、スクリーンリーダーが持つ機能(例えば、見出しなどの文書構造ごとに読み飛ばす「読み飛ばし機能」など)が正常に使用可能になり、全盲や弱視のユーザーにも使いやすいサイトを提供できるようになります。
- 見出しやリストなど、文書構造を適切にマークアップする。
- main, h1, h2…, p, ulなどのHTML要素や、role属性を適切に用いる。
- 仕様上の都合により適切なHTML要素でマークアップできない場合は、必ずaria属性(WAI-ARIA)で補足する。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: 見出し[文書構造]
- エー イレブン ワイ[WebA11y.jp]: 順不同リスト[文書構造]
- エー イレブン ワイ[WebA11y.jp]: 順序付きリスト[文書構造]
- Ameba Accessibility Guidelines: 4.1.2 HTMLの要素や属性を正しい役割で使用する
- freeeアクセシビリティー・ガイドライン: セマンティクスを適切にマークアップする重要性
- freeeアクセシビリティー・ガイドライン: アクセシビリティー・チェックのためのツール
インタラクションラベル
インタラクションラベルとは、リンクテキストや、UIの操作を導くボタンのラベルなど、そのラベルを契機にアクションを誘発するような要素、およびそのラベルのことを指します。
インタラクションラベルは、適切に設定することでユーザーの目的達成に必要な情報やアクションをわかりやすく伝えることができます。これは、全盲や弱視などでスクリーンリーダーを利用する人や上肢不自由で細かな操作が困難な人など、情報取得や操作への負担が比較的大きい人たちの負担を軽減することにつながります。
- インタラクションラベルの予測と期待を合わせる。
- リンクテキストは、リンク先のページタイトルを使用する。
- コンテキストによっては、リンク先のタイトルがユーザーの予測に必ずしもマッチしないことがある。その場合はユーザーにとって正しい予測を導くラベルを設定する。
- 「スクロール」「〜をクリック」「〜ボタンを押してください」のような自己言及的なラベルは避ける。
- 「〜について」「〜はこちら」は書いても情報が増えないので、原則使用しない。
- ボタンなどのUIラベルやマイクロコピーについての詳細は、ガイドラインを参照すること。
- このガイドラインは Inhouseの「ボタン」のガイドライン に記載される予定ですが、現在編集中です。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: リンクテキスト[テキストリンク]
- Ameba Accessibility Guidelines: 2.4.4 リンクの目的を理解できるようにする
- freeeアクセシビリティー・ガイドライン: テキスト情報の文言とアクセシビリティー
画像の代替テキスト
画像に代替テキストを設定することで、低速回線で画像の読み込みに失敗してしまっている時や音声デバイスを利用している時など、画像を視覚的に確認できない場合でも画像の内容を伝えることができるようになります。特に、全盲や弱視などでスクリーンリーダーを利用する人にとって代替テキストは、視覚情報に替わるとても重要な情報になります。
- 情報を伝えている画像には、代替テキストを提供する。
- HTMLの場合はimg要素のalt属性に指定する。
- TwitterやFacebookなどのSNS、WordPressといったツールにも、投稿するときに画像に代替テキストを指定できる機能があります。
- 代替テキストの提供に加えて、本文など隣接したテキストと情報が重複していないか確認する。
- インタラクションラベルには画像化した文字は使わず、テキストで表現する。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: 代替テキスト:画像(リンクなし)[画像]
- エー イレブン ワイ[WebA11y.jp]: 装飾画像[画像]
- エー イレブン ワイ[WebA11y.jp]: CSSの背景画像[画像]
- エー イレブン ワイ[WebA11y.jp]: 代替テキスト:画像リンク[画像]
- Ameba Accessibility Guidelines: 1.1.1 画像に代替テキストを提供する
- freeeアクセシビリティー・ガイドライン: テキストによる画像の説明
- altはつけるだけじゃなくて - 実践アクセシブルHTML 第一回
配色
適切に配色することで、屋外の眩しい環境で閲覧している時やプロジェクターで投影して閲覧している時、画面が見にくい状況でも正しく情報(文字・図)を認識できるようになります。また、色による情報伝達を適切に行うことで、全盲や弱視でスクリーンリーダーを利用する人や色覚特性によって色の違いがわかりづらい人にも正しく情報を伝えることができるようになります。
- 色の違いを知覚できなくても、情報が伝わるようにする。
- 例えばグラフなどは、色だけで区別せずに背景にパターンを敷いたり、要素と要素の間を離すことで、別の要素であることを認識できるようにする。
- 文字の色と背景色とのコントラスト比は、最低でも3:1(WCAG 2.2 AA Large)以上にする。
- Pepper Colorで✅️マークが表示されている色と背景色のコントラスト比を参考にしてください。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: 色の違い[色]
- エー イレブン ワイ[WebA11y.jp]: コントラスト比[色]
- Ameba Accessibility Guidelines: 1.4.1 色だけで伝えない
- freeeアクセシビリティー・ガイドライン: 画像の表示とアクセシビリティー
- freeeアクセシビリティー・ガイドライン: コントラストのチェック
- freeeアクセシビリティー・ガイドライン: グレースケール表示への切り替え方
拡大表示
拡大表示を可能にすることで、老眼の人や弱視の人など小さい文字が認識しづらい人でも拡大によって文字の認識ができるようになります。
- ユーザーがコンテンツを拡大表示できるようにする。
- ユーザーがブラウザのズーム機能で画面を200%に拡大しても、表示が崩れないようにする。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: 文字サイズ[ページ設定]
- Ameba Accessibility Guidelines: 1.4.4 テキストサイズを拡大縮小できる
- freeeアクセシビリティー・ガイドライン: 拡大表示時のアクセシビリティー
- freeeアクセシビリティー・ガイドライン: 画面の表示方向と肢体不自由者の利用
キーボード操作
キーボード操作は、一般的なキー操作を可能にすることで素早い操作が可能になり、効率的に作業をしたい人の助けになります。また、上肢不自由でマウス操作が困難な人や全盲や弱視でカーソルが目視できずマウス操作が困難な人、怪我で一時的にマウスが使えない人にとっても、キーボードだけで操作が完結できることでWebサイトを十分に利用できるようになります。
- フォーカスのアウトラインがちゃんと見えるようにする。
- jkキーで前後へ移動できるなど、ガイドライン(まだ策定できていません)に対応させる。
- Webコンテンツだけでなく、ネイティブアプリでも対応するのが望ましい。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: フォーカス・インジケータ[キーボード操作]
- エー イレブン ワイ[WebA11y.jp]: キーボード操作対応[キーボード操作]
- Ameba Accessibility Guidelines: 2.1.1 キーボード、タッチデバイスで操作できる
- Ameba Accessibility Guidelines: 2.1.2 キーボード操作を可能にする
- Ameba Accessibility Guidelines: 2.1.4 単一文字キーのショートカットを解除、回避、限定できる
フォームコントロール
フォームのフィールドに適切にラベルが紐づけられることで、全盲や弱視でスクリーンリーダーを利用する人でも何を入力すべきフィールドか理解できるようになります。また、autocomplete属性を利用することで入力の手間を省くことができ、全盲や弱視などでスクリーンリーダーを利用する人や上肢不自由で細かな操作が困難な人など、操作への負担が比較的大きい人たちの負担を軽減することにつながります。
- それが何のために、何を入力するかなどの情報を、WAI-ARIAなどで定められたマシンリーダブルな形式で関連付ける。
- ユーザーの入力の手間を省くため、autocomplete属性などのブラウザの支援技術を適切に利用する。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: ラベルとフォーム・コントロールの関連付け(可視ラベルあり)[フォーム]
- エー イレブン ワイ[WebA11y.jp]: フォーム・コントロールのラベル提供(可視ラベルなし)[フォーム]
- エー イレブン ワイ[WebA11y.jp]: フォーム・コントロールの補足説明[フォーム]
- Ameba Accessibility Guidelines: 3.3.2 入力項目にラベルまたは説明をつける
エラーメッセージ
エラーメッセージを適切に表示・実装することで、エラーの発生に気づくことができ、修正することができるようになります。特に、マシンリーダブルな実装をすることで、視覚情報だけではエラーに気づくことができないスクリーンリーダー利用者にもエラーを知らせることができます。
- そもそもエラーメッセージを表示するような状況を可能な限り回避する。
- パスワードの強度表示などは、リアルタイムの入力支援を提供する。
- HTML5のネイティブなバリデーションを正しく活用する。
- 可能であればJavaScriptなどを使用して、バリデーションもリアルタイムに提供する。
詳しく学べる資料
- エー イレブン ワイ[WebA11y.jp]: エラーメッセージ[フォーム]
- Ameba Accessibility Guidelines: 3.3.1 エラーを特定できる
- Ameba Accessibility Guidelines: 3.3.3 エラーの修正を提案する
- Ameba Accessibility Guidelines: 3.3.4 入力時のエラーを回避できる
- freeeアクセシビリティー・ガイドライン: ステータス・メッセージとスクリーン・リーダー
動画の字幕
動画に字幕を提供することで、電車などの音が出せない環境やワイヤレスイヤホンの充電が切れてしまった状況であっても、動画の内容を十分に理解しながら視聴することが可能になります。特に聴覚障害がある人にとって字幕は、動画の内容を正しく理解するためのとても重要な情報になります。
- セリフやナレーションなど発話された音声が動画内にある場合は、字幕(キャプション)を提供する。
- 動画配信プラットフォームが字幕の機能を提供している場合には、動画内に文字を焼き込まずに機能を利用するのが望ましい。
- 意図したフォントで表示したいなど、演出として字幕を利用するために動画内に文字を焼き込んでいる場合も、テキスト情報は必ず提供する。
詳しく学べる資料
API
- API経由でも、データへのアクセスや操作を可能にする。
- コンテンツは、可能な限りMicrodataなどのメタデータも提供する。
- コンテンツは、可能な限りRSSやAtomなどのフィードも提供する。
質問・相談
GMOペパボのパートナーの方で、アクセシビリティに関する質問・相談がありましたら、社内のSlackの #accessibility チャンネルのワークフロー「アクセシビリティ相談窓口」からお問い合わせください。