見出し画像
Photo by fururi8

HIGのAccessibilityについてまとめてみた。

サンタモニカ・ジョンソン

アクセシビリティとは

障害者権利条約の定義によると、「障がい者が他の人と同じように物理的環境、輸送機関、情報通信及びその他の施設・サービスを利用できること」と明記されている。

ウェブページにおけるアクセシビリティ

ウェブページにおけるアクセシビリティは、とりわけ情報の取得・発信に注意が向けられる。
日本では、2021年9月1日にデジタル庁が発足し2022年11月11日には、府省長や地方自治体だけでなく誰でも利用できるようにデザインシステムが公開されている。
公共サービスでは、障害があっても知る権利を保障する情報保障によってアクセシビリティへの対応は急務となっているだろう。今後、デジタル庁が公共サービスのアクセシビリティ的側面における質を上げてくれることが期待される。
ウェブに関するアクセシビリティは、W3C (World Wide Web Consortium) によりWCAG (ウェブ・コンテンツ・アクセシビリティ・ガイドライン)が策定されており、2021年12月にはWCAG 3.0のdraftが公開された。WCAG 3.0の冒頭によると、以前のバージョンを被推奨にするものではなく部分的に拡張するものであることが明記されている。
また、WCAGを日本工業規格に合わせたいわゆるWebコンテンツJISが2004年に公表され、WCAG 2.0がISO/IECの国際規格になったことで2022年11月30日現在では、JIS X 8341-3:2016が最新のものになっている。

HIGにおけるアクセシビリティ

2022年6月にAppleのHuman Interface Guidelinesが新しく構成を変えて公開されました。
そしてアクセシビリティについて、概要部分でこのように記述されています。

People use Apple’s accessibility features to personalize how they interact with their devices in ways that work for them.

An accessible app or game supports accessibility personalizations by design and gives everyone a great user experience, regardless of their capabilities or how they use their devices.
Approximately one in seven people have a disability that affects the way they interact with the world and their devices. People can experience disabilities at any age, for any duration, and at varying levels of severity. For example, situational disabilities — such as a wrist injury from a fall or voice loss from overuse — can affect the way almost everyone interacts with their devices at various times.

https://developer.apple.com/design/human-interface-guidelines/foundations/accessibility

HIGでのアクセシビリティは、障がい者のみに焦点が当てられているわけではなく、状況に応じ障害にも認識を広げアクセシビリティを高めることが全てのユーザーにとって良い体験の手助けになるということが書かれています。上記のことから、HIGのアクセシビリティはインクルーシブデザインの考え方をベースに構築されていると考えられます。
Apple製品以外の体験でも重要であると考えられる原則は「シンプルさ」「知覚可能性」です。

Simplicity — Enabling familiar, consistent interactions that make complex tasks simple and straightforward to perform.
Perceivability — Making sure that all content can be perceived whether people are using sight, hearing, or touch.

https://developer.apple.com/design/human-interface-guidelines/foundations/accessibility

Apple製品においては、ユーザーのパーソナライゼーションをサポートするアクセシビリティ機能が提供されており、標準のコンポーネントを使用するとアクセシビリティ設定に自動的に適応ようになっています。
奇抜なUIデザインを採用してしまうと標準コンポーネントを利用できなくなってしまう可能性があるので、上記の原則も鑑みてUIを設計する必要がありそうです。

アクセシビリティを実践する

HIGでは、以下の構成でアクセシビリティで考慮すべき点を紹介しています。
項目ごとに細かい話はHIGを見ていただいて、ここでは個人的な解釈も含めた考慮点ごとのサマリーを表記しました。

  • Interactions

  • VoiceOver

  • Text Display

  • Color and effects

Interactions

このセクションでは、Gestures・Buttons and controls・User Inputs・Hapticsに関するアクセシビリティの考慮すべき点が挙げられています。

Gesture

  1. プラットフォームのジェスチャーはオーバライドしない。

  2. 複雑なジェスチャは採用しない。

  3. ジェスチャが出来ないときでも代替手段で機能を利用できるようにする。

  4. 中核となる機能には、複数の手段で機能を利用できるようにする。

Buttons and controls

  1. インタラクティブ要素は少なくとも44*44ptのくりっかぶるエリアを設定する。

  2. インタラクティブ要素にはVoiceOverでユーザーが各要素を識別できるようにラベル付けする。

  3. ボタンの相対的な重要性を伝える。

  4. スイッチコンポーネントを利用するとき、色以外でもオン/オフを伝えられるようにする。

  5. リンクには、色以外でも識別できるようにアンダーラインなど視覚的差異を持たせるようにする。

User Inputs

  1. 文字入力の代わりに、音声で情報を入力できるようにする。

  2. テキストを選択したときにプレーンテキストを可能な限り選択できないようにする。 (おそらく画像のAlt文がペーストしたときに出ないようにすることだと思います。)

Haptics

  1. ハップティクスを利用して画面が見えない状況でも大まかな画面の状態を認識できるようにする。

VoiceOver

VoiceOverとはスクリーンリーダーが画面の情報を音声で読み上げる機能である。VoiceOver機能の利用を想定する場合、Content descriptionsとNavigationについて考慮すると良い。

Content descriptions

  1. 意味のある画像には代替となる説明文を記述するようにする。

  2. 何かを伝えることを意図しない装飾的な画像に関しては、VoiceOverさせないようにします。

  3. 動画や音声のコンテンツは、翻訳や字幕などを提供するようにしましょう。

  4. ビデオの音声情報をテキストに変換するクローズドキャプションの精度が悪い場合は、字幕を利用することも考えましょう。

  5. オーディオディスクリプションやトランスクリプトを実現するようにする。

Navigation
VoiceOverのユーザーが画面内の各要素に移動できるようにする必要があります。ユーザーはVoicrOverの機能をつかって要素の場所を認識するため、画面上の要素にアクセシビリティ情報を付与するようにしてください。（カスタム要素を使う場合）

  1. 要素のグループか、順序づけ、リンクの方法を指定して、ユーザーに情報のヒエラルキーを伝えるようにする。

  2. 画面のコンテンツやレイアウトに変化があればVocieOverで知らせるようにする。

  3. コントロールが別のWebページやアプリを開くときに、ユーザーが予測できるようにする。

  4. すべての重要なインターフェース要素には代替テキストラベルを付けるようにする。

  5. VoiceOverのロータ機能は、単語や行・セクションなど各粒度で要素間を移動することができます。これらをサポートできるようにする。

  6. アプリ内の全ての画面コンポーネントをキーボードで操作できるようにする。

Text display

このセクションでは、Apple製品にあるダイナミックタイプを利用を想定したときの注意点を紹介しています。

  1. ダイナミックタイプでフォントサイズを大きくしたときに、テキストのキルステは最小限にとどめるようにする。

  2. 大きなフォントサイズの場合は、レイアウトを調整することを考慮する。

  3. フォントサイズを大きくしたとき、意味のあるインターフェースアイコンのサイズも大きくする。

  4. HIGでは、Regular, Medium, Semibold, Boldが推奨されています。Ultralight、Thin、Lightは見づらいので利用は避けるようにする。

  5. 太文字を有効にしたときには、iconやインターフェース要素のボーダーも太くして、見栄えを整えるようにする。

Color and effects

オブジェクトの区別や重要なぞ湯方の伝達を色だけに頼るのは避けるようにする。色を使って情報を伝える場合は、誰でも近くできるようにテキストラベルやグリフの形状を利用する。

  • テキストにはプラットフォームが提供しているシステムカラーを優先的に使用する。

  • 色のみで二つの状態を表現するのは避けるようにする。

  • コントラストの強い色を使用してください。
    WCAGでは4.5:1が推奨されています。コントラスト比4.5:1の論理的根拠

  • 動くもの、点滅するものには注意すること。これらは注意を引くものだが、他のものの注意を逸らす可能性もあります。また、視覚障害者のある人には役に立ちません。

まとめ

HIGで書かれているアクセシビリティについて、荒くはありますが大事な部分はまとめることができたかなと思います。
HIGは2022年のリリース時点で、まだまだアップデート段階にあると考えられます。現時点でのアクセシビリティのページは分かりずらい部分もあるのでそこも改善されるといいなと思いました。
また、アクセシビリティをより高めたいと思ったならインクルーシブデザインについて学ぶと良いと思います。
以下にインクルーシブデザインに関する幾つかの動画を載せておきます。


この記事が気に入ったらサポートをしてみませんか？