Webアクセシビリティの参考資料まとめ
WCAG 2.2 の草案には、「2.4.11 Focus Appearance (Minimum)」と「2.4.12 Focus Appearance (Enhanced)」のフォーカスインジケータに関する 2 つの達成基準が追加された。2.4.11 では、フォーカスインジケータの面積、コントラスト、隣接するコントラストの条件が設けられた。面積については、アウトラインやボーダーを拡張した最小限の面積が規定され、形状が複雑な場合はバウンディングボックスを周囲として計算することができる。
デザインシステムにおける色設計を、色計算が可能なプログラミング言語でひとつの式にまとめたいというニーズがある。しかし、A11y 対応でルールが増えるため、シンプルにするための試行錯誤が必要だ。基準色を 10 段階くらいに増やし、その中で文字と背景に適切なものをピックアップしていくのが良いだろう。基準色は印象設計用途の色ではなく、文字色、背景色の作成に必要な定義となる。A11y の制約がある中で、Feedback Color に対してどのようにプロダクトのパーソナリティを表現するかが問題となる。
デザインにおけるアクセシビリティに関する Tips をまとめました。 読みやすい文字サイズやフォント、行間、文字数の調整が必要です。 アイコンを使う際は、ラベルをつけて一般的なアイコンを使用しましょう。 また、ボタンやリンクのテキストやアイコンは一貫性を持たせ、タップエリアを確保することが大切です。
2022 年 5 月 5 日、高知こどもの図書館のウェブサイトがリニューアル公開された。プロジェクトの初期段階からアクセシビリティを担保することが共有され、WCAG 2.1 レベル A と一部 AA に加え、継続的に取り組む項目を掲載することでアクセシブルな情報発信の場が育まれるよう努めた。デザインは、タブレットファーストでタップ操作で使いやすい表現を取り入れ、配色にはコントラスト比 4.5：1 以上が確保できるカラーパレットを作成し、対象学年を表すラベルには色覚によらず区別できる 3 色を選んだ。
GMO ペパボの「minne」デザイナーが、サービスのブランドからカラーパレットの制作過程について紹介。課題として、UI の色数が過多で煩雑な印象を与え、各所の配色が A11y 基準を下回っていたことが挙げられた。そこで、プライマリカラーをブラック、アクセントカラーをオレンジに設定し、配色のバランスを調整している。また、minne のミッションやコンテンツ制作の観点からも配色を決定している。
2021 年 9 月に NHK の気象情報画面がリニューアルされ、色覚障害の方や加齢による見え方の変化がある方などの多様性に配慮した“色のユニバーサルデザイン”に基づく配色が採用された。しかし、個人差が大きい見え方に対応するため、デザイナーたちは試行錯誤を続けている。今後は、ユニバーサルデザインの勉強をし、配色が見分けやすいかどうかを常にテストすることが大切だと話している。
弁護士ドットコムでは、弱視のユーザーテストを実施し、ブランドカラーの見直しを選択した。「reBORN」という名前が付けられたプロジェクトは、より多くの人にサービスを気軽に利用してもらうことを目的としている。デザイン中心で方針を決め、アクセシビリティ基準も盛り込んだ。プロジェクトは課題整理から始まり、最終的には「グランドデザイン」として決定し、ガイドラインを作成する。
STUDIO PARTNERS 公式サイトをリニューアルオープンする際に、アクセシビリティの観点を取り入れたアニメーション設定の事例が解説されている。適切なアニメーションの設定はユーザリビティの向上につながるが、過剰な動きはユーザリビティを損なう。アクセシビリティを考慮することも重要だ。例えば、マウスカーソルホバー時に要素の色を薄くするアニメーションはカラーコントラスト比を確保できず認識できない影響をもたらす可能性がある。この Web サイトではリンク要素には可能な限りホバーアニメーションを設定している。また、操作に対する納得感を高めることができる。
色の感じ方は人それぞれであり、UI デザインにおいてこの問題に対処することは一般的な課題である。Adobe Color のアクセシビリティツールは、多くのタイプの人が知覚できる色の組み合わせを提供し、その助けとなる。カラーユニバーサルデザインのプロが、Adobe Color でこのツールを試し、その効果を評価し、自分の UI デザインでこのツールをどのように活用できるかを紹介する。
アクセシブルな Web サイト作成におけるフォームの改良について紹介している。STUDIO PARTNERS 公式サイトのフォーム制作過程で、使いやすさやスクリーンリーダー対応などの工夫が取り入れられ、アクセシビリティの向上が図られた。記事では、必須項目の視覚化、縦の流れの明確化、プレースホルダーの使用を避けるなどのポイントが解説されている。
WP ZoomUP #14 で伊原力也氏が発表した『「誰もが使える」デザインを生み出すために』の配信動画。アクセシビリティ対応で何をやるかは多く語られているが、いつやるかはあまり語られていないことを引き合いに、WCAG2.1 にある 78 個の達成基準のうち 56 項目についてはコーディングに入る前に対応が可能だと言う。サイトマップ、コンテンツ、ワイヤーフレーム、フォーム、ビジュアルデザイン、プロトタイピングのそれぞれのプロセスでアクセシビリティを向上させる勘所、達成基準に含まれるがデザインプロセスの中で失われやすい項目、コーディングプロセスに入ってからも気をつけなければならないことが紹介され、WCAG のガイドラインをさらに短く要約した文章も述べられている。
ユニーバサルデザインの考え方を取り入れてウェブ制作に活かす例が紹介されている。色覚特性、コントラスト比、色情報を唯一の手がかりにしないこと、UD フォントの利用、1 行あたりの文字数、行間、文字揃えなど。あらゆる箇所に適用するのではなく、必要な箇所に、目的にあった方法を選択しましょうと語れている。
コントラストを確保するだけでなく、形や模様を工夫する方法が解説されている。
コントラスト比 4.5:1 を確保せよの話のほか、テキストのアンチエイリアス部分についての解説や「白／黒との相対輝度」についても解説されている珍しいスライド。
ウェブアプリケーションの品質を、サーバーサイドとフロントエンドの両面から解説している包括的なスライド。サイバーエージェントではウェブアプリ向けに専用のチェックリストを作って運用しているという。
「色覚に頼らない UI を考える」というテーマで行われた勉強会に触発され、色だけでなく下線や囲みなどのスタイルを使ったリンクの表現方法について考察している。アプリやウェブサービスの対応事例もあり。ウェブアクセシビリティとは障害者対応だけでなく、健常者にとっても使いやすい UI を実現することであるとし、勉強会では、グラフをモノクロで表現した際の解決策を考えるグループワークが行われ、色覚障害のある人でも理解できるグラフのデザインが 12 案提案された。
色覚特性についての解説と、当事者にとって問題になる事例が紹介されている。「その 2」では検証方法や対策について書かれている。
Chatwork の CUD を用いた UI 改善事例が紹介されている。
WCAG と CUD のそれぞれの基準の解説と違いが紹介されている。
AbemaTV のアクセシビリティ改善例。背景色を統一し色数を減らしてコントラスト比を確保する取り組みが紹介されている。
間嶋沙知氏作、Web アクセシビリティを担保するためにウェブデザイナーが気をつけるべき 12 個の項目をまとめたポスター画像。“Great web accessibility starts in the design.” のコピーが印象的。