accrefs

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

カラーモード

2020年

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

「この機能のアクセシビリティどうしよう」と思ったら

Web アプリケーションにドラッグ＆ドロップを使う機能を作る際、アクセシビリティに気をつけることが大切である。アクセシビリティを考慮せずにドラッグ＆ドロップを使うと、視覚障害者や身体障害者などが利用できなくなる可能性がある。WCAG 2.1 では、すべての機能がキーボードで操作可能であることが求められている。スクリーンリーダー利用者や身体障害者にとって、キーボードで操作できるようにすることが重要である。

2020年、freeeのアクセシビリティを振り返る

freee 株式会社では、2019 年以前にもアクセシビリティに取り組んでいたが、2020 年前半は停滞していた。しかし、デザインシステムチームの取り組みや新規プロダクトでのアクセシビリティ担保が進んでおり、両者には共通の「発動条件」があったことがわかった。それは、小規模で意思統一しやすく、アクセシビリティの知見を持つ 1〜2 人が存在し、デザインシステムを前提として開発していること、高品質を目指す合意があり、品質観点のチケットを出すサイクルがあることなどであった。

画面仕様を変えなくてもできるアクセシビリティ改善

Ameba ブログのトップページを刷新したところ、アクセシビリティ改善の効果が出た。技術的な制約の中、エンジニア 1 人で実現するため A 基準を満たすレベルのアクセシビリティガイドラインを制定し、画面仕様の変更はなくしている。最低限の知識で実践し、ガイドラインを決めてから実装に入ることで改善方針が明確になった。ドキュメント化しているため今後も継続的に改善できる。

Webアクセシビリティ改善はできるのか？ ロービジョン（弱視）のユーザーテストを振り返る | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

弁護士ドットコムは、ロービジョンの方を呼んでユーザーテストを行い、検証結果に基づき改善を進めている。ロービジョンの方がサイトを利用する上で感じた問題点として、見えづらさが挙げられた。そのため、コントラストを判定するツールを使用することが重要である。また、重要でない情報は色だけでなく、文字のサイズやコントラストを下げることでも表現できるが、ロービジョンの方には意図が伝わりにくいため注意が必要である。

Code for Japan Summit 2020「東京都新型コロナ対策サイトのアクセシビリティ改善を語る」

行動指針である「No one left behind：国籍や年齢、障害の有無にかかわらず、誰もが快適に利用できるサイトを目指す」はどのように実施されたのか。アクセシビリティ関連の Issues / Pull requests 108 件に対してどんなアプローチを試みたのか。3 月のサイト公開時から約 2 ヶ月間で実施された数々のアクセシビリティ改善の歩みを、当時対応にあたっていたメンバーが紹介。

スライド

デザインシステムにアクセシビリティを組み込む方法 | アドビUX道場 #UXDojo

Web サイトやアプリのアクセシビリティは、多様なユーザーにとって重要であり、デザインシステムに組み込むことが求められている。デザインシステムには、アクセシビリティとインクルージョンが最初から組み込まれた状態をつくり出す機会があり、Slack や Fable のような企業が取り組んでいる。アクセシビリティは、ユーザビリティと互換性の両面で考慮され、コンポーネントのレベルで組み込まれることが重要である。

Adobe MAX「Adobe Colorで始めるUIのカラーユニバーサルデザイン」

色の感じ方は人それぞれであり、UI デザインにおいてこの問題に対処することは一般的な課題である。Adobe Color のアクセシビリティツールは、多くのタイプの人が知覚できる色の組み合わせを提供し、その助けとなる。カラーユニバーサルデザインのプロが、Adobe Color でこのツールを試し、その効果を評価し、自分の UI デザインでこのツールをどのように活用できるかを紹介する。

『The Last of Us Part II』アクセシビリティ機能の詳細を紹介

2020 年 8 月 14 日に実施されたアップデートにより、『The Last of Us Part II』にはアクセシビリティ機能が 60 以上追加され、視覚、聴覚、運動の 3 つのアクセシビリティプリセットが用意された。それに加え、ユーザーは自分のカスタム操作設定を作成できるようになった。これらの機能を活用し、多くの人々が最高のゲーム体験をすることができるようになっている。

Webアクセシビリティ難しすぎる問題

Web アクセシビリティは重要なものであり、誤解も多いと感じる。視覚障害者だけでなく、多様な障害を持つユーザーを対象とする Web アクセシビリティは、WCAG (Web Content Accessibility Guidelines) や企業のガイドラインで定義されているが、理解するのは難しいと思う。デザインからテクノロジーまで幅広い知識が必要であり、デザイナーとエンジニアの両方がアクセシビリティに詳しいことは難しいと思っている。

デザイン周辺勉強会「Disabilityとデザイン」

ノーマライゼーション、デザインフォーオール、バリアフリー、ユニバーサルデザイン、アクセシブルデザイン、インクルーシブデザイン、情報アクセシビリティなどの立ち位置の違いについて考察。また、それらは UX デザインや、HCD（人間中心設計）のプロセス、情報設計、UI デザインあたりとどういう関係性にあるのかを検討している資料。

react-modal のアクセシビリティまわりの実装を読む

React-modal のアクセシビリティに関する内容を調査した。アクセシビリティには、app element、Keyboard Navigation、ARIA attributes の 3 つの機能がある。app element は、スクリーンリーダーを使用するユーザーのための機能であり、モーダルが開いている間、ページコンテンツを非表示にする役割を果たす。Keyboard Navigation は、モーダルが開いている時にキーボード操作をモーダル内に制限する機能である。このアクセシビリティには注意点もあるが、推奨される使い方に従えば問題なく利用できる。

alt属性をよくわかっていなかった私が代替テキストを書けるようになった話

alt 属性は HTML の img 要素に付随して、代替テキストを提供する。代替テキストを適切に設定することで、画像が読み込めない場合やスクリーンリーダーで利用される場合にアクセシビリティを向上できる。代替テキストを書く際には、画像がなくても文意が同等であり、読み上げ時に内容が通じるように心がけることが大切だ。