accrefs

Webアクセシビリティの参考資料まとめ

カラーモード

2023年

2023年に公開、またはその年の出来事に言及している参考資料一覧。

WPDS - Audio and Video

ワシントンポストのデザインシステムで規定されている音声と動画についてのルール。自動再生しないこと、一時停止や非表示ボタンを実装すること、字幕を必ずつけること、prefer-reduce-motion に対応することなどが説明されている。

WPDS - Alt text

ワシントンポストのデザインシステムで規定されている alt テキストのルール。img 要素や svg 要素での実装例だけでなく、どんな時に alt= が良いのか、キャプションと alt の違い、画像の種類別の alt の書き方、リンク、絵文字、句読点、ハッシュタグなど、細かに説明されている。

WPDS - Accessibility Checklist

ワシントンポストのデザインシステムに組み込まれているアクセシビリティのチェックリスト。スクリーンリーダーとキーボードコントロール、マルチメディア、テキスト・ラベル・ズーム設定、色、自動テストについて簡潔にリスト化されている。

UXライターが挑戦！画像のALT即興ライティング大会

SmartHR 社の UX ライター 3 人が、出されたお題（画像）の alt 属性値を即興で考える様子を配信した動画。お題は 3 つあり、1 つ終わるごとに同社のアクセシビリティスペシャリストによる講評が行われた。

アクセシビリティ改善中！ LIFULL HOME'S スマートフォンサイト

株式会社 LIFULL のフロントエンドエンジニアが、スマートフォンサイトのアクセシビリティ向上に取り組んだ結果を紹介。ボタンの正しい実装や、追加コンテンツのフォーカス管理などに取り組んだことが挙げられる。ボタンの実装に関しては、WAI-ARIA を用いて役割を上書きした上で、キーボード操作を可能にする工夫をしている。また、追加コンテンツのフォーカス管理にも取り組んでおり、フォーカスが失われないよう改善を行った。カルーセルの自動再生をやめて表示順をランダムにした話は参考になる。

アクセシビリティの効果測定

アクセシビリティだけに絞り込んだ効果測定は難しくとも、アクセシビリティに取り組みはじめてからの会社の変化、周囲の反応の変化を測定することは可能である。社内から社外へ、開発からユーザーへ、広報から市場へと、「⁠ 内から外へ」の変化をトラッキングしていくことで、全体的な状況を掴むための手法を解説している。

書籍『Webアプリケーションアクセシビリティ』

Web アプリケーションは私たちの生活に必要な存在であり、アクセシビリティの向上が重要である。しかし、アクセシビリティには課題があり、有志だけで改善することに限界がある。本書は、Web アプリケーションのアクセシビリティを高める方法を提供する。アクセシビリティの基礎からフォーム、UI デザイン、複雑な UI パターンの改善まで解説し、組織全体でアクセシビリティを考慮した開発プロセスを作り上げる必要がある。

アクセシブルなWebサイトを作ってみた：その4 STUDIO PARTNERSとアニメーション編｜いっちゃの雑記｜note

STUDIO PARTNERS 公式サイトをリニューアルオープンする際に、アクセシビリティの観点を取り入れたアニメーション設定の事例が解説されている。適切なアニメーションの設定はユーザリビティの向上につながるが、過剰な動きはユーザリビティを損なう。アクセシビリティを考慮することも重要だ。例えば、マウスカーソルホバー時に要素の色を薄くするアニメーションはカラーコントラスト比を確保できず認識できない影響をもたらす可能性がある。この Web サイトではリンク要素には可能な限りホバーアニメーションを設定している。また、操作に対する納得感を高めることができる。

A beginner’s guide to manual accessibility testing

自動化されたテストと手動のアクセシビリティテストは、アクセシビリティの問題を見つけるために共に使用される。自動化されたテストではすべての問題を見つけることはできないため、手動テストが必要である。手動のアクセシビリティテストでは、アシスト技術、キーボード、ズーム機能を使用して、実際の障害者ユーザーのようにウェブサイトやソフトウェアをテストする。この記事では、手動テストの重要性、手動テストの準備、キーボードテスト、スクリーンリーダーテスト、ズームテスト、手動テストをプロセスに組み込む方法について学ぶことができる。

コーディング後や納品時に確認する62のチェックリスト - BUILD

Web デザイン制作の際に、品質基準を定め、品質を維持するためのチェックリストを紹介している。チェックリストには、コンテンツの校正、表記ゆれや誤字脱字、リンク切れやダミーテキストのチェック、コーディングのデザイン通りのチェック、検索サイト用の情報の記述など、納品前に確認すべき 62 項目が含まれている。チェックリストを使用して表示確認を行い、クライアントに提出することで安心感を与えることができる。

アコーディオンUIのアクセシビリティを改善してみよう！｜bonji810｜note

今回は「アコーディオン UI」に関する内容を取り上げる。アクセシビリティを向上させることで、キーボード操作によるアコーディオンパネルの開閉やスクリーンリーダーの使用が容易になる。記事では、マークアップの方法やアクセシビリティの向上策について説明している。公開されている URL を参照し、キーボードやスクリーンリーダーを使って操作してみると良い。

table要素内にth要素が必要な理由

スクリーンリーダーを使用して Web ページから情報を取得する際には、テーブルからの情報取得に工夫が必要である。テーブルの th 要素を設定すると、スクリーンリーダーはデータセル（td 要素）の内容を読み上げるだけでなく、対応する見出しセルの内容も読み上げる。たとえば、カレンダーでは、th 要素を設定することで曜日と日付を関連付けて確認できる。また、列方向への移動も可能であるが、スクリーンリーダーやブラウザの組み合わせによっては利用できない場合がある。th 要素はスクリーンリーダーユーザーが情報を正確かつ迅速に取得できるようにするために重要である。

<dialog>内でautofocus属性がほぼ必須になる話

HTML Standard の dialog 要素に関連する変更があり、Scott O'Hara 氏の提案の一部がマージされた。追加された autofocus 属性は、ユーザーがすぐに対話することが予想されるダイアログの子孫要素または dialog 要素自体に使用することが推奨される。ただし、まだ各ブラウザで実装されていない箇所もあり、改善が必要な部分も存在する。また、dialog 要素の概要も変更された。