Pepabo Design

Web Accessibility Guidelines

ペパボをもっとアクセシブルに

このガイドラインは、ペパボのプロダクトや情報を “すべての人に” 届けるためのWebアクセシビリティガイドラインです。

ペパボでは、すべての人が「インターネットで可能性をつなげる、ひろげる」ことができるように、プロダクトにおいて「アクセシブルであること」を原則と定めています（ペパボデザインプリンシプル）。このガイドラインでは、その原則に従ってアクセシブルなプロダクトを開発するための方法についてまとめています。

Webアクセシビリティとは

Webアクセシビリティは、WebサービスやWebコンテンツへのアクセスできる度合いを表す言葉です。アクセシビリティが低いと、一部の人にとってサービスやコンテンツの利用・理解が難しい状態となってしまいます。

アクセシビリティと聞くと「障害者・高齢者への特別対応」とイメージする人もいますが、そうではありません。怪我などによって一時的に障害を持った状態になったり、騒音などの環境的要因で一部の感覚が機能しない状況になったりと、いつも通りにWebサービスを利用できない状況に陥ることは誰しも起こり得ます。アクセシビリティを高めることで、年齢や性別、障害の有無、利用環境を問わず、誰もが十分にサービスやコンテンツを利用・理解できる状態へと近づけることができます。

ガイドラインについて

このガイドラインは、『Webアクセシビリティ確保 基本の「キ」』をベースに作成され、そこにわたしたちに必要な項目を追加しています。また、より詳しく学べる資料として「freee アクセシビリティー・ガイドライン」や「Ameba Accessibility Guideline」の参考リンクも記載しています。これらのガイドラインは国際規格であるWCAGをベースに利用しやすい粒度に再構成したガイドラインです。本ガイドラインと併せて参照することを推奨します。

活用方法

ガイドラインの活用方法は特に限定しませんが、活用例を以下の表にまとめました。

フェーズ

活用例

企画・要件定義

  • 通常施策におけるアクセシビリティ要件の洗い出しに活用する
  • アクセシビリティ改善をプロジェクトとして取り組む際にロードマップ作成に活用する

デザイン

  • デザインやライティングを考える際のアクセシビリティ考慮に活用する
  • デザインレビューのチェック項目として活用する

実装

  • マークアップ・コーディング時のアクセシビリティ考慮に活用する
  • コードレビューのチェック項目として活用する

ページのメタ情報

ページのメタ情報は、適切に設定することで検索エンジンやSNSでページの内容を理解しやすくなります。その他にも、メタ情報を適切に設定することで全盲や弱視などでスクリーンリーダーを利用する人たちが現在のページを理解しやすくなったり、適切な言語での読み上げが可能になります。

  • HTMLのtitle要素には、ページの内容がわかるタイトルを記述する。
  • OGPやTwitter Cardなどのメタデータを設定する。
  • 個別のページタイトルとWebサイトのタイトルを併記する場合は、環境によっては末尾が省略されることを想定して、先頭に個別のページのタイトルを記述する。
  • lang属性を設定する。

詳しく学べる資料

マークアップ

適切にマークアップを行うことで、本来のWeb・ブラウザが持つ機能を十分に発揮することが可能になります。特に、スクリーンリーダー利用時にはボタンやリンク、リストなどの要素を正しく認識することが可能となるのはもちろんのこと、スクリーンリーダーが持つ機能（例えば、見出しなどの文書構造ごとに読み飛ばす「読み飛ばし機能」など）が正常に使用可能になり、全盲や弱視のユーザーにも使いやすいサイトを提供できるようになります。

  • 見出しやリストなど、文書構造を適切にマークアップする。
    • main, h1, h2…, p, ulなどのHTML要素や、role属性を適切に用いる。
    • 仕様上の都合により適切なHTML要素でマークアップできない場合は、必ずaria属性（WAI-ARIA）で補足する。

詳しく学べる資料

インタラクションラベル

インタラクションラベルとは、リンクテキストや、UIの操作を導くボタンのラベルなど、そのラベルを契機にアクションを誘発するような要素、およびそのラベルのことを指します。

インタラクションラベルは、適切に設定することでユーザーの目的達成に必要な情報やアクションをわかりやすく伝えることができます。これは、全盲や弱視などでスクリーンリーダーを利用する人や上肢不自由で細かな操作が困難な人など、情報取得や操作への負担が比較的大きい人たちの負担を軽減することにつながります。

  • インタラクションラベルの予測と期待を合わせる。
    • リンクテキストは、リンク先のページタイトルを使用する。
    • コンテキストによっては、リンク先のタイトルがユーザーの予測に必ずしもマッチしないことがある。その場合はユーザーにとって正しい予測を導くラベルを設定する。
  • 「スクロール」「〜をクリック」「〜ボタンを押してください」のような自己言及的なラベルは避ける。
    • 「〜について」「〜はこちら」は書いても情報が増えないので、原則使用しない。
  • ボタンなどのUIラベルやマイクロコピーについての詳細は、ガイドラインを参照すること。

詳しく学べる資料

画像の代替テキスト

画像に代替テキストを設定することで、低速回線で画像の読み込みに失敗してしまっている時や音声デバイスを利用している時など、画像を視覚的に確認できない場合でも画像の内容を伝えることができるようになります。特に、全盲や弱視などでスクリーンリーダーを利用する人にとって代替テキストは、視覚情報に替わるとても重要な情報になります。

  • 情報を伝えている画像には、代替テキストを提供する。
    • HTMLの場合はimg要素のalt属性に指定する。
    • TwitterやFacebookなどのSNS、WordPressといったツールにも、投稿するときに画像に代替テキストを指定できる機能があります。
  • 代替テキストの提供に加えて、本文など隣接したテキストと情報が重複していないか確認する。
  • インタラクションラベルには画像化した文字は使わず、テキストで表現する。

詳しく学べる資料

配色

適切に配色することで、屋外の眩しい環境で閲覧している時やプロジェクターで投影して閲覧している時、画面が見にくい状況でも正しく情報（文字・図）を認識できるようになります。また、色による情報伝達を適切に行うことで、全盲や弱視でスクリーンリーダーを利用する人や色覚特性によって色の違いがわかりづらい人にも正しく情報を伝えることができるようになります。

  • 色の違いを知覚できなくても、情報が伝わるようにする。
    • 例えばグラフなどは、色だけで区別せずに背景にパターンを敷いたり、要素と要素の間を離すことで、別の要素であることを認識できるようにする。
  • 文字の色と背景色とのコントラスト比は、最低でも3:1（WCAG 2.2 AA Large）以上にする。
    • Pepper Colorで✅️マークが表示されている色と背景色のコントラスト比を参考にしてください。

詳しく学べる資料

拡大表示

拡大表示を可能にすることで、老眼の人や弱視の人など小さい文字が認識しづらい人でも拡大によって文字の認識ができるようになります。

  • ユーザーがコンテンツを拡大表示できるようにする。
    • ユーザーがブラウザのズーム機能で画面を200％に拡大しても、表示が崩れないようにする。

詳しく学べる資料

キーボード操作

キーボード操作は、一般的なキー操作を可能にすることで素早い操作が可能になり、効率的に作業をしたい人の助けになります。また、上肢不自由でマウス操作が困難な人や全盲や弱視でカーソルが目視できずマウス操作が困難な人、怪我で一時的にマウスが使えない人にとっても、キーボードだけで操作が完結できることでWebサイトを十分に利用できるようになります。

  • フォーカスのアウトラインがちゃんと見えるようにする。
  • jkキーで前後へ移動できるなど、ガイドライン（まだ策定できていません）に対応させる。
  • Webコンテンツだけでなく、ネイティブアプリでも対応するのが望ましい。

詳しく学べる資料

フォームコントロール

フォームのフィールドに適切にラベルが紐づけられることで、全盲や弱視でスクリーンリーダーを利用する人でも何を入力すべきフィールドか理解できるようになります。また、autocomplete属性を利用することで入力の手間を省くことができ、全盲や弱視などでスクリーンリーダーを利用する人や上肢不自由で細かな操作が困難な人など、操作への負担が比較的大きい人たちの負担を軽減することにつながります。

  • それが何のために、何を入力するかなどの情報を、WAI-ARIAなどで定められたマシンリーダブルな形式で関連付ける。
  • ユーザーの入力の手間を省くため、autocomplete属性などのブラウザの支援技術を適切に利用する。

詳しく学べる資料

エラーメッセージ

エラーメッセージを適切に表示・実装することで、エラーの発生に気づくことができ、修正することができるようになります。特に、マシンリーダブルな実装をすることで、視覚情報だけではエラーに気づくことができないスクリーンリーダー利用者にもエラーを知らせることができます。

  • そもそもエラーメッセージを表示するような状況を可能な限り回避する。
  • パスワードの強度表示などは、リアルタイムの入力支援を提供する。
  • HTML5のネイティブなバリデーションを正しく活用する。
  • 可能であればJavaScriptなどを使用して、バリデーションもリアルタイムに提供する。

詳しく学べる資料

動画の字幕

動画に字幕を提供することで、電車などの音が出せない環境やワイヤレスイヤホンの充電が切れてしまった状況であっても、動画の内容を十分に理解しながら視聴することが可能になります。特に聴覚障害がある人にとって字幕は、動画の内容を正しく理解するためのとても重要な情報になります。

  • セリフやナレーションなど発話された音声が動画内にある場合は、字幕（キャプション）を提供する。
  • 動画配信プラットフォームが字幕の機能を提供している場合には、動画内に文字を焼き込まずに機能を利用するのが望ましい。
  • 意図したフォントで表示したいなど、演出として字幕を利用するために動画内に文字を焼き込んでいる場合も、テキスト情報は必ず提供する。

詳しく学べる資料

API

  • API経由でも、データへのアクセスや操作を可能にする。
  • コンテンツは、可能な限りMicrodataなどのメタデータも提供する。
  • コンテンツは、可能な限りRSSやAtomなどのフィードも提供する。

質問・相談

GMOペパボのパートナーの方で、アクセシビリティに関する質問・相談がありましたら、社内のSlackの #accessibility チャンネルのワークフロー「アクセシビリティ相談窓口」からお問い合わせください。

Slackの #accessibility チャンネルのワークフローを開いた画面のスクリーンショット