Webアクセシビリティの参考資料まとめ
Relic 社の斉藤氏は、アクセシビリティ活動を進めており、コーポレートサイトの改善に取り組んでいる。改善したことはグローバルナビゲーションのデザイン変更、フォーカス・インジケーターの復活、HTML の修正、現在位置の表示に線・太字を追加したことである。今後はキーボードでのアクセスやフォーカス順序の改善も進めており、デザイナー・エンジニアが対話しながら改善点をまとめている。また、弊社では UI デザイナーやデザインエンジニアなどの職種を積極的に採用しているため、興味のある方は連絡するよう呼びかけている。
Ameba ブログのトップページを刷新したところ、アクセシビリティ改善の効果が出た。技術的な制約の中、エンジニア 1 人で実現するため A 基準を満たすレベルのアクセシビリティガイドラインを制定し、画面仕様の変更はなくしている。最低限の知識で実践し、ガイドラインを決めてから実装に入ることで改善方針が明確になった。ドキュメント化しているため今後も継続的に改善できる。
ユニバーサルワークスが自治体の Web アクセシビリティの推進を目的に実施する調査「みんなの公共サイト運用ガイドライン」の 20 回目が発表された。昨年に引き続き「ガイドラインへの対応」がテーマで、自治体公式サイトに公開情報と実態に不一致があること、ウェブアクセシビリティ確保の取り組みに停滞があることが明らかになった。レーダーチャート一覧も公開されている。
多数のアクセシビリティの問題を再現できるシミュレーター。たとえば、alt 属性の不備、テーブルの説明不足、フォーカス順序の不備などがある。プリセット版には障壁が設置されているが、カスタマイズ版では障壁を設定でき、URL によって個別に障壁を設定できる。
行動指針である「No one left behind：国籍や年齢、障害の有無にかかわらず、誰もが快適に利用できるサイトを目指す」はどのように実施されたのか。アクセシビリティ関連の Issues / Pull requests 108 件に対してどんなアプローチを試みたのか。3 月のサイト公開時から約 2 ヶ月間で実施された数々のアクセシビリティ改善の歩みを、当時対応にあたっていたメンバーが紹介。
全盲の方を対象にした Web サイトのユーザーテストを実施し、その結果をプロダクトに生かすためには、結果のまとめや分析、解決策の検討、優先度の検討が必要である。ユーザーテストの結果をまとめるには、映像や音声の記録を確認する必要がある。まとめの中には、弁護士検索のページに到達する際の問題点が含まれていた。結果を分析し、原因、深刻度、解決策、解決の難易度などを考えることが重要である。
freee 株式会社では、アクセシビリティチームが、プロダクト全体のアクセシビリティを向上させるために、勉強会やプロジェクトを実施している。特に、「虚空」と呼ばれる、スクリーンリーダーやキーボード操作では存在がないように振る舞うボタンに注目し、解決に向けたプロセスを導入した。勉強会には約 30 人が参加し、実施後 2 週間で 100 件近くのボタンが虚空から顕現された。同社では、全社でアクセシビリティに取り組むための動機づけ、実行能力、きっかけの提供を行い、アクセシビリティ向上に取り組んでいる。
Ubie 社内のアクセシビリティ勉強会について紹介。プロダクトに起きた課題から解決策を考え、再発防止に取り組んだ。勉強会後にはアクセシビリティに対する理解が深まり、問題を解決するための施策がいくつか挙げられた。Ubie にとってアクセシビリティはビジョン・ミッション達成に必要不可欠な要素であり、今後も取り組んでいく予定。アクセシビリティ推進に興味がある人は DM か採用サイトへ。
2021 年 9 月に NHK の気象情報画面がリニューアルされ、色覚障害の方や加齢による見え方の変化がある方などの多様性に配慮した“色のユニバーサルデザイン”に基づく配色が採用された。しかし、個人差が大きい見え方に対応するため、デザイナーたちは試行錯誤を続けている。今後は、ユニバーサルデザインの勉強をし、配色が見分けやすいかどうかを常にテストすることが大切だと話している。
今回は「タブ型 UI」に関する記事で、Web サイトや Web アプリ開発者向けにタブ型 UI のデザインと実装方法について解説している。タブ型 UI はアクセシビリティを考慮することで、ユーザーに情報を効率的に伝えることができる。記事では、タブボタンとタブパネルのアクセシビリティを向上させるための方法について詳しく説明している。
今回は「アコーディオン UI」に関する内容を取り上げる。アクセシビリティを向上させることで、キーボード操作によるアコーディオンパネルの開閉やスクリーンリーダーの使用が容易になる。記事では、マークアップの方法やアクセシビリティの向上策について説明している。公開されている URL を参照し、キーボードやスクリーンリーダーを使って操作してみると良い。
カルーセル UI をアクセシブルにすることで、ユーザーの利便性が向上する。スクリーンリーダーを使用する場合でも、アクセシブルなカルーセル UI の実装が重要である。本記事では、マークアップの方法やスライドの操作、スライドコントロールボタンやスライドコントロールタブなどに関するアクセシブルな実装方法について説明する。
ユーザーテスト結果から、タブの問題がスクリーンリーダーでのアクセシビリティに影響を及ぼしていることが判明した。HTML は「タブ」インターフェイスをサポートしていないため、ウェブ上のタブは正しく扱えない。目標は、「スクリーンリーダーのユーザーにも情報が伝わるようにする」ことであり、適切な対応策を選択する必要がある。
alt 属性は HTML の img 要素に付随して、代替テキストを提供する。代替テキストを適切に設定することで、画像が読み込めない場合やスクリーンリーダーで利用される場合にアクセシビリティを向上できる。代替テキストを書く際には、画像がなくても文意が同等であり、読み上げ時に内容が通じるように心がけることが大切だ。
note のデザイナー沢登氏がアクセシビリティ勉強会を開催し、画像の alt 属性について共有している。今回の勉強会では、エンジニア・デザイナー向けに alt 属性の正しい使い方を学び、適切な alt を選ぶ方法や注意点を共有した。社員への意識の浸透が求められ、アクセシビリティ向上を目指していく。
WAI-ARIA の中でもよく使われている属性で、コンテンツが展開されているかどうかの状態を表す aria-expanded を使う際によく見られる間違いの事例が 2 つ紹介されている。
アクセシビリティに不確かな人間が実装を間違えてしまう典型的ないくつかのパターンが紹介されている。
アクセシビリティ向上を唱える人間が実装を間違えてしまう典型的なパターンが紹介されているスライド。