CATS Webs Accessibility Development Policy

CATSにおいてウェブフロントエンド実装で達成すべきアクセシビリティの品質をさだめる実装ポリシー

Last Modified

この文書は、CATS(CyberAgent Advanced Technology Studio) が開発・運用するサービスにおいてウェブフロントエンドで達成すべきアクセシビリティの品質を定めるものである。

  1. Must: 必ず達成する
  2. Usual: 特別な理由がない限りは達成する
  3. Advanced: 可能であれば達成する

の 3 つのレベルからなり、開発状況に応じてレビューやテストの基準とし、開発速度と品質の両立を目指して策定した。

Must: 必ず達成する #

  1. コンテンツ、及び UI のマシンリーダビリティ
  2. 最低限のキーボード操作

「Must」では入手が容易な支援技術と高いリテラシーを持ってしてもアクセスできないことを防ぐ。適切なテキストデータ、ないしは代替コンテンツがあり、キーボードによる操作が可能であれば、操作コストを鑑みなければ理論上はコンテンツを取得し、UI を操作できる。

キーボードで操作可能ということは、言葉通りキーボードから操作できるだけでなくキーボードの入力をエミュレートする様々なデバイスから操作可能になる。

例外 #

  1. ライブストリーミング映像や、第三者コンテンツのキャプション、音声解説

実装内容 #

コンテンツ、及び UI のマシンリーダビリティ #

実装例
  • 画像に代替テキストを付与する
    <img src="path/to/img.png" alt="name" />
  • SVGに代替テキストを付与する
    <svg role="img" aria-label="name">...</svg>
  • フォームコントロールに name を付与する
    <label>
  name
  <input type="text" />
</label>
  • フォームコントロールに name を付与する
    <input type="text" aria-label="name" />

最低限のキーボード操作 #

実装詳細
  • HTMLネイティブのインタラクティブ要素（a, button, input...）を使用する。
  • :hover に依存したインタラクションにしない
  • outlineを無効にしないか、独自にスタイルを付与する

参考文献、およびガイドライン #

WCAG (Web Contents Accessibility Guidelines) #

リンク先は日本語

Usual: 特別な理由がない限りは達成する #

「Must」に加えて

  1. セマンティクス - 適切な要素選択を行う
  2. フォーカス順のコントロールによるキーボード操作のユーザビリティ担保

実装内容 #

セマンティクス - 適切な要素選択 #

HTML の仕様に則って、コンテンツ、UI に応じた適切な HTML 要素を使用し、適切な属性を付与する。特にリンク <a>、見出し <h1> ~ <h6> とリスト <ul>、<ol>、<dl> 、フォーム関連の要素 <form>、<input>、<label>、<button> を正しく使用することで、HTML 要素が持つ機能を活かし多様な環境に対応したコンテンツや UI とすることができる。

フォーカス順のコントロールによるキーボード操作のユーザビリティ担保 #

Must で担保しているキーボード操作可能は、あくまで理論上においてであり、極端にユーザビリティが低いと、それは実質的に操作できないことを意味する。特にユーザーのインタラクションを機に出現したり消失したりする UI の場合、フォーカス位置を適切に管理すること。

フォーカスマネジメント実装の具体例 #

参考文献、及びガイドライン #

WCAG（Web Contents Accessibility Guidelines） #

Advanced: 達成可能な場合は達成する #

「Must」、「Usual」に加えて

  1. 時間依存メディアの代替コンテンツの提供
  2. 特定の支援技術や環境向けのユーザビリティ向上
  3. 第三者からの非テキストコンテンツへの代替テキスト提案

時間依存メディアに対する代替コンテンツの提供 #

第三者から提供を受ける以外の時間依存メディアに対して、代替となるコンテンツを提供する。完全に代替となるコンテンツが難しい場合でも、サマリーや字幕のみなどできるかぎり提供する

特定の支援技術や環境向けのユーザビリティ向上 #