Salesforce Lightning Design System のアクセシビリティガイドラインを読んでみる
おはようございます、co-meetingの町田です。
Web開発をしていると、アクセシビリティという言葉は目にするのですが、概要をしっかりと読み込むことがこれまでありませんでした。
HTMLの書き方に沿ってなんとなく aria や role を使っているレベルです。
ということで、この記事の目標は、アクセシビリティの概要を知り、Salesforce Lightning Design System（以後SLDS）のアクセシビリティガイドラインを使えるようになることです。
以下目次です。
アクセシビリティのことは大体わかってる方は「SLDSのアクセシビリティガイドライン」から読み始めてください。
まずは、アクセシビリティについて確認してみましょう。
Webにおけるアクセシビリティ (Accessibility) とは？
政府広報の解説記事がございますのでご確認ください。こちらの記事を参照していただくと全容がつかめると思います。
ウェブアクセシビリティとは？ 分かりやすくゼロから解説！ | 政府広報オンライン
上記の記事を読めばそれなりに分かるのですが、私なりに気になったことを調べてみました。
アクセシビリティ（Accessibility）の意味
私は、アクセシビリティ（Accessibility）という単語を見たとき、アクセスしやすさ、使いやすさ的な意味だと思いました。
しかし、Webで使われる場合、障害のある人も使えるようにする、という文脈で使われることが多く、認識と差がありました。
そこで、まずは英語辞書の説明を見てみることにしました。以下説明を引用しています。
the fact of being able to be reached or obtained easily
簡単に手が届く、または入手できるということ。
the quality of being able to be entered or used by everyone, including people who have a disability
障害のある人を含め、誰でも入ることができる、あるいは使うことができるという性質。
the quality of being easy to understand or enjoy
理解しやすい、楽しみやすいという性質
この説明だけだと微妙なニュアンスですが、なんとなく間口の広さを表す単語なのだろうと思いました。
意味が似ている単語として、ユーザビリティがあります。2つの単語を比較すると解釈しやすかったです。
私なりに、それぞれを説明すると
ユーザビリティは、使いやすいと思っているか、の度合いを意味することに対して、
アクセシビリティは、使える人の多さ、の度合いを意味しています。
となります。
「Webアクセシビリティ対応」ってなんだろう？
前述してきたように、アクセシビリティはすべての人が対象となるはずです。
しかし、Webアクセシビリティ対応は、対象が障害を持つ人に限定されがちです。
これは、W3CのWebアクセシビリティの定義が以下のように定められているためだと思われます。
Web アクセシビリティとは、Web サイト、ツール、テクノロジが障害を持つ人々が使用できるように設計および開発されていることを意味します。
What is Web Accessibility項の一部をChatGPTで翻訳
ただ、Web アクセシビリティ入門 | Web アクセシビリティ イニシアティブ (WAI) | W3C を続けて読むと、
より具体的には、人々は次のことができます：
- ウェブを知覚し、理解し、ナビゲートし、対話する
- ウェブに貢献する
ウェブアクセシビリティは、ウェブへのアクセスに影響を与えるすべての障害を包含します。これには以下が含まれます：
- 聴覚
- 認知
- 神経学的
- 身体的
- 言語
- 視覚
ウェブアクセシビリティは、障害のない人々にも利益をもたらします。例えば：
- 携帯電話、スマートウォッチ、スマートテレビなど、小さな画面や異なる入力モードを持つデバイスを使用する人々
- 加齢により能力が変化している高齢者
- 骨折した腕や紛失した眼鏡などの「一時的な障害」を持つ人々
- 明るい日光下や音声を聞くことができない環境などの「状況的な制約」を持つ人々
- 遅いインターネット接続を使用している、または限られた・高価な帯域幅しか利用できない人々
What is Web Accessibility項の一部をChatGPTで翻訳
私はこの文章から、「Webアクセシビリティ対応」は、Webを障害を持つ人が使えるようにすることで、Webを使うすべての人に利益をもたらすための取り組み、と解釈しました。
Webアクセシビリティの具体的な取り組み方
あと気になることとしては、どのように実現していくのか、です。これはW3Cの以下のページに記載されています。
Accessibility Fundamentals Overview | Web Accessibility Initiative (WAI) | W3C
Webアクセシビリティを実現するための考え方などです。
WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C
Webコンテンツ作成する際の具体的なガイドラインです。
ここまでで、私としては、Web開発におけるアクセシビリティ (Accessibility) の概要は掴めました感じがします。
まとめ: Webにおけるアクセシビリティ (Accessibility) とは？
私なりのまとめとなります。
アクセシビリティは、障害のある人を含めすべての人に対する使える人のの多さ、の度合いを意味します。
Webアクセシビリティは、W3Cが「Web アクセシビリティとは、Web サイト、ツール、テクノロジが障害を持つ人々が使用できるように設計および開発されていることを意味します。」と定めた言葉であること。
ただし、「Webアクセシビリティ対応」は、障害を持つ人が使えるようにすることで、Webを使うすべての人に利益をもたらすための取り組みであること。
続いて、SLDSのアクセシビリティガイドラインを見ていきます。
Salesforce Lightning Design System のアクセシビリティガイドライン
SLDSのアクセシビリティガイドラインを見てみます。
Accessibility Overview - Lightning Design System
まずはSLDSのアクセシビリティは何を目指しているのかを確認します。
SLDSのアクセシビリティが目指すもの
SLDSは、マウス、タッチスクリーン、キーボード、スクリーンリーダーを使うすべてのユーザーへ一貫したユーザーエクスペリエンスを提供することを目指しています。
以下がAccessibility > Guidelines > Web Design からの引用です。
Our goal is to provide a consistent user experience for all users, whether they’re navigating with a mouse/touchscreen, keyboard, or screen reader.
私たちの目標は、マウスやタッチスクリーン、キーボード、またはスクリーンリーダーを使用しているかどうかに関わらず、すべてのユーザーに一貫したユーザーエクスペリエンスを提供することです。
Accessible Web Design Guidelinesの一部をChatGPTで翻訳
続いて、これを達成するために必要な要素を確認してみましょう。
SLDSの目指すアクセシビリティに必要な要素
SLDSには、7つの要素が挙げられています。
以下、Accessibility > Overview からの引用です。
標準に準拠したマークアップ
私たちのコンポーネントにおけるセマンティックマークアップとARIAロールの使用は、W3C標準と業界のベストプラクティスに基づいています。このマークアップは、アクセシブルなコンポーネントを構築するための完璧な出発点です。
キーボードナビゲーション
私たちは、コンポーネントをインタラクティブにするために必要なJavaScriptを提供していませんが、アクセシビリティパターンでは、必要なインタラクションに関するドキュメント付きの基本パターンの実例を提供しています。また、各コンポーネントのドキュメントには、キーボードでアクセス可能なコンポーネントを作成する方法についてのアドバイスもあります。
色の適切な使用
私たちのコンポーネントは、色に関するアクセシビリティの主な2つのルールに従っています：情報を提供したり行動を求めたりする手段として、色だけを使用することは決してありません。
テキストとその背景色の組み合わせは、標準または小さなテキストの場合は4.5:1、より大きなテキストの場合は3:1というWCAGが推奨するしきい値比を下回ることはありません。
色の適切な使用について詳しくは、カラーガイドラインの概要をご覧ください。
アクセシブルなフォーム
私たちのフォームは、<fieldset>と<legend>タグの適切な使用および入力コントロールへの適切なラベリングを提供します。ラジオボタンとチェックボックスのコントロールは、アクセシビリティとデザインの柔軟性を兼ね備えたバランスの取れたソリューションを提供します。
画像とアイコン
すべての画像、アイコン、SVGに対してテキストベースの代替手段を提供する方法を提供しています。
コンポーネントの識別
私たちのインタラクティブなコンポーネントは、最新のARIAオーサリングプラクティスに従って作成されており、主要なページ要素においてスクリーンリーダーユーザーが理解できる属性を持っています。コンポーネントと対話する際には、新しい状態を反映するためにARIA属性を更新する必要がある場合があることに注意してください。そのため、これを行う方法とタイミングについて詳細なガイダンスを提供しています。
アプリケーションの検証
デザインシステムは、アクセシブルなアプリケーション開発の基盤に過ぎません。リリース前にアプリケーションのアクセシビリティを確認し、WCAG標準のAAレベルを満たしていることを確認することをお勧めします。
一部をChatGPTで翻訳
以上が必要な要素です。
最後にこの必要な要素を具体的に達成するためのガイドラインを見てみます。
SLDSの目指すアクセシビリティを達成するためのガイドライン
そして、具体的に達成するガイドラインが Guildelines, Pattens 等にまとめられています。こちらのガイドラインには、スクショ含む具体的な対応例が記載されています。
Accessible Web Design Guidelines - Lightning Design System
あとがき
アクセシビリティという言葉が、障害者に向けたもので使われる事が多く、違和感を持っていました。
この違和感を払拭できたのはとてもスッキリしました。
また、Webアクセシビリティは、これ自体が名詞になっているのだと初めて知りました。
また、WCAGを見ると、Web開発におけるアクセシビリティは、コンポーネントの端々で対応するのは不十分。プロジェクト自体の方針を固めてしっかりと対応していく必要があるんだな、と感じました。
ただ、端々での対応では不十分とはいえ、正しいHTML構造でのコーディングはやればやるだけ良い影響がありそうなので、日々やっていこうという気持ちになりました。