freeeアクセシビリティー・ガイドラインについて

freeeアクセシビリティー・ガイドラインは、アクセシビリティーが高いWebコンテンツの実現に必要な事項をまとめたものです。freee株式会社でのプロダクト開発において使いやすいガイドラインを提供することを目的に、Web Content Accessibility Guidelines (WCAG) 2.1に基づいて策定されています。

ガイドライン策定の背景

freee社内では、プロダクトのアクセシビリティー改善を目的とした取り組みが進められる中で、いくつかの参考情報が有志によってまとめられてきました。この文書は、これらの情報を1箇所に集約し、継続的に更新していくことで、開発の現場でより使いやすい資料を提供することを目的に策定されているものです。

Webアクセシビリティーに関するガイドラインとしては、2008年にW3C勧告となったWCAG 2.0が国際的に広く用いられています。さらにWCAG 2.0は、ISO/IEC 40500:2012として国際標準規格となり、その一致規格としてJIS X 8341-3:2016にもなっていて、日本国内においても参照されることが多いガイドラインになっています。

WCAGを社内で用いるガイドラインとして採用できるのがある種理想的な形ですが、これはあまり現実的な方法とは言えません。WCAGは、特定の技術に依存しない形で記述されているためです。こうすることで、今後Web上で用いられる技術がHTML、CSS、JavaScript以外のものに移行した場合にも適用できる内容になりますし、Web以外の媒体にも適用できるものになる可能性が高くなるという利点があります。しかし、結果として表現が抽象的になり、開発の現場においては理解しづらいものになってしまっているのも現状です。この問題を回避するために、開発の現場での使いやすさを意識し、WCAGの内容を踏襲した独自のガイドラインをまとめることになりました。

このガイドラインは、以下の方針で編集しています:

  • 抽象的で分かりづらい表現をなるべく廃し、HTML/CSS/JavaScriptを用いた開発を意識した具体的な表現を用いる。

  • 画像、リンク、フォームなど、対象となるコンテンツの種類ごとにやるべきことが分かるように分類する。

  • freeeのプロダクトの性質などを考慮して優先度を見直す。

  • ガイドラインを満たしているかどうかを確認する方法をなるべく明記する。

  • 理解を助けるための参考情報や事例を提示する。

なお、このガイドラインは2018年にW3C勧告となったWCAG 2.1に基づいて策定しています。WCAG 2.1は、WCAG 2.0策定後の状況の変化などを反映した項目追加などがされていますが、互換性を保った変更となっていますので、WCAG 2.1を満たすことでWCAG 2.0やJIS X 8341-3:2016を満たすことにもなります。

ガイドラインの構成

この文書では、アクセシビリティーを担保するために必要な事項(ガイドライン)を、適用対象ごとのカテゴリーに分類しています。

各ガイドラインは、ガイドライン本文に加えて以下に示す項目から構成されています。

優先度

各ガイドラインには、以下のいずれかの優先度が割り当てられています。

[MUST]

必ず満たすべき項目。満たさなければアクセシビリティー上の致命的な問題を生じる。WCAGのPriority Aに相当。

[SHOULD]

できるだけ満たすべき項目。WCAGのPriority AAに相当。

なお、freeeではWCAGのAA相当準拠を目指していますので、WCAGのAAAの項目は含んでいません。

また、freeeのプロダクトの性質などを考慮して、一部WCAGのPriorityとは異なる優先度を割り当てたガイドラインがありますが、これらはいずれもWCAGのプライオリティーより高い優先度になっています。

チェック内容

そのガイドラインを満たしているかどうかを判断するために行うチェックの例を、チェック対象と共に示しています。ここに示しているのはあくまでも例で、他により適切なチェック方法が存在する可能性もあります。

チェック対象は、「チェック内容」の種類に応じて、以下のように分類しています。

機能

主に仕様を決める時点で確認すべき項目

ビジュアル

視覚的なデザイン、ワーディングなど、主にUXの設計段階で確認すべき項目

挙動

実際に操作してみたときの挙動で判断できる項目

マークアップ

マークアップやコーディングを確認しなければ判断が難しい項目

これ以下の項目は、各ガイドラインの「詳細」の中に記述しています。

意図

各ガイドラインが、どのようなユーザーのどのようなニーズを満たすものなのかを簡単に示しています。そのガイドラインが解決しようとしている問題の本質を理解することで、ガイドラインを満たしているかどうかのより正確な判断につながります。

参考情報

必要に応じて、「意図」をより良く理解するための参考情報や、チェック方法に関する補足情報へのリンクを掲載している場合があります。

対応するWCAG 2.1の達成基準

そのガイドラインを満たすと、WCAG 2.1のどの達成基準を満たしたことになるのかを示しています。達成基準 (SC) の番号、原文へのリンク、ウェブアクセシビリティ基盤委員会 (WAIC) による翻訳版へのリンクを掲載しています。

チェック内容について、具体的な例を示している場合があります。例示がある場合は、チェック内容の項に「例示有り」と記載しています。

この文書のステータス

この文書は、freee社内で進められる新規プロダクト開発、既存プロダクトの改善の際に用いるために策定されたものです。freee社外のWeb開発においても、参考にしていただける部分があるのではないかと考え、一般に公開しています。

この文書は、より理解しやすいものにすることを目指して、参考情報や例示の追加、表現の改善などを随時行います。

この文書の最新版は以下のURLで公開しています:

HTML版

https://a11y-guidelines.freee.co.jp/

GitHubリリース・ページ

https://github.com/freee/a11y-guidelines/releases/latest

この文書の改善のための提案は、GitHub上でお知らせください。

著作権と利用許諾条件

クリエイティブ・コモンズ・ライセンス「freeeアクセシビリティー・ガイドライン」は、freee株式会社が作成したもので、クリエイティブ・コモンズ 表示 4.0 国際 ライセンスで提供されています。

Copyright © 2020, freee株式会社

バージョン情報

この文書のバージョン:

Ver. 202007.0

公開日:

2020年7月10日

更新履歴

Ver. 202007.0 (2020年7月10日)

Ver. 202007.0でのガイドライン文言変更箇所

該当箇所

変更前

変更後

補足

ページ全体:[SHOULD] 適切なセクション分けと見出しの付与

h?要素を使って適切に見出しを付ける。

コンテンツを適切にセクション分けし、h?要素を使って見出しを付ける。

意図が明確になるように同ガイドラインの見出しも変更しています。

入力ディバイス:[MUST] ダウン・イベントをトリガーにしない

操作の実行、完了のトリガーにはダウン・イベントを使わず、アップ・イベントを使う。

クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。

意図の項にも追記して、ドラッグ&ドロップがこのガイドラインに抵触しないことを明示しています。

テキスト:[MUST] 適切な文言の見出し

主題又は目的を説明する見出しおよびラベルを付ける。

主題又は目的を説明する見出しを付ける。

「ラベル」はフォーム・コントロールと画像の説明を意図したものでしたが、これらはそれぞれ別カテゴリーでカバーされているため削除しました。併せて見出しも変更しています。

テキスト:[MUST] 複数の視覚的要素を用いた表現

文字色に何らかの意味を持たせている場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。

ガイドラインの意図を考慮して、掲載セクションを変更しています。

音声・映像コンテンツ:[MUST] 書き起こしテキストの提供

テキストの代替情報ではない音声・映像コンテンツにおいて、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。

テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。

動的コンテンツ:[MUST] 点滅、スクロールを伴うコンテンツ

自動的に開始し5秒以上継続する、点滅、スクロールまたは動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるようにする。

同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。

動的コンテンツ:[MUST] 自動更新されるコンテンツ

自動的に内容が更新されるコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。

予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。

フォーム:[SHOULD] 誤操作の防止

誤った操作が確定することでユーザーに不利益が生じる可能性がある機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。

Ver. 202006.0 (2020年6月18日)

  • ガイドライン部分の文書構造を見直し

  • 入力ディバイスに関するガイドラインの構成を一部変更(内容に変更無し)

  • コントラスト関連のガイドラインで、文字サイズの表記をpxとptを併記するように変更

  • 動的コンテンツに関するガイドラインにガイドラインを1項目追加:[MUST] 適切なDOMツリーを維持する

  • その他内容の変更を伴わないガイドライン文言の変更

  • 「チェック内容」と「チェック対象」を対にして表記するように変更

  • チェック内容の追加と文言変更

  • 「意図」について、一部内容の変更を伴わない文言変更と追記

Ver. 202005.1 (2020年5月26日)