2021年1月21日に開催された「アクセシビリティ Tips LT会」で、『アクセシビリティを高める「micro IA」』というテーマで登壇させていただきました。 https://rakus.connpass.com/event/199440/ スライドのオリジナル (Google スライド) は、以下の URL でご覧いただけます。 https://bit.ly/3oem0q7

1. アクセシビリティを高める「micro IA」
アクセシビリティ Tips LT 会
2021-01-21

2. @caztcha
ウェブユーザビリティ / アクセシビリティ / 情報設計 (Information Architecture : IA)
● Accessible & Usable (https://accessible-usable.net)
● HCD-Net 認定 人間中心設計専門家
● ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳作業部会

3. インクルーシブなペルソナ拡張
https://github.com/caztcha/Inclusive-Persona-Extension

4. インクルーシブデザインの原則
(Inclusive Design Principles)
The Paciello Group
植木 真、土屋 一彦 (日本語訳)
https://inclusivedesignprinciples.org/ja/

5. Form Design Patterns
シンプルでインクルーシブ
なフォーム制作実践ガイド
Adam Silver (著)
土屋 一彦 (監訳)
https://amzn.to/3i3M0D1

6. ここから本題です。
(細かい情報設計のお話をします。)

7. きっかけは、ある障害当時者 (全盲) のひとこと。
あるアプリで、スクリーンリーダーを使って
見たい (聞きたい) コンテンツを選ぶとき。
ジャンルがバーっと読み上げられて探すのに
苦労するんですよね。
アクセシビリティについて雑談するランチ会にて。

8. UI はこんな感じ
コンテンツが整然と並んでいる、よく
あるユーザーインターフェース。

9. 問題の UI コンポーネント
ジャンル (タグ) ①
コンテンツ名称 (見出し) ②
概要文 ③
①
②
③
これ全体がリンク (カード UI)。
タップするとコンテンツの詳細ページに
遷移する。
タグは色分け
されていて、
手がかりとし
て見やすい。
見出しは大き
い文字で目に
つきやすい。

10. 何が問題なのか？
スクリーンリーダーを
使用時、このリンクに
フォーカスが当たると、
音声読み上げは...
リンク、
バラエティ、旅、
水曜どうでしょう、
大泉洋、鈴井貴之、藤村忠寿、嬉野雅道

11. ● このリンクコンポーネントにフォーカスが当たっても、リンク先を表す
コンテンツ名称 (見出し) が即座に読み上げられない。
● 複数のタグが手前に並ぶと、肝心のコンテンツ名称が中に埋もれがち。
● このコンポーネントがいくつも繰り返されると、数あるコンテンツの中
から1つを選ぶ行為が、じわじわと面倒くさくなる。
リンク、
バラエティ、旅、
水曜どうでしょう、
大泉洋、鈴井貴之、藤村忠寿、嬉野雅道

12. 得られた知見
ビジュアルヒエラルキー (視覚的な情報の重み付け) が一見してわか
りやすく、晴眼者であれば適宜読み飛ばしできるレイアウトでも、
スクリーンリーダーの利用者には、そうした重み付けが伝わらない
可能性がある。
見出しであろうとタグであろうと、スクリーンリーダーの読み上げ
の音声は同じ。ボリュームや声色が変わるわけではなく平坦に読み
上げられるので、情報の重み付けをユーザーが判別しにくい。

13. そもそも、これはリンクでしたね...
リンクは、何よりも「リンク先が何であるか」を瞬時に伝えることが
肝要。
この例では、コンテンツ名称 (見出し) が主たるリンクラベルでは？

14. こんなふうに改善できるかも
現状:
● タグ1
● タグ2
● 見出し (主たるラベル)
● 概要文
改善案 (例):
● 見出し (主たるラベル)
○ 概要文
○ タグ
■ タグ1
■ タグ2
情報構造も
ロジカルに。
主たるラベル
が、まず読み
上げられる。
タグは色によ
る見やすさを
維持。

15. 画面デザインにおいては、ビジュアルヒエラルキーなどを駆使して
「外見」を見やすく、収まりよくレイアウトすることは重要。
同時に、ウェブやアプリケーションでは、多様なユーザーのために、
「骨格」とも言える情報構造を、適切にデザインすることが大切。

16. まとめ
ユーザーの声を聞く (または行動を観察できる) チャンスを大切に。
何らかの気づきが得られるはず。
ユーザーが情報コミュニケーションで好むモダリティは多様。 視覚
に限らず、聴覚や触覚に依存する人もいる。この多様性を尊重し、
別け隔てなく快適なユーザー体験を担保するために、micro な粒度
においてもインクルーシブな情報設計*を心がけたい。
*UI コンポーネントを構成する各部品の「意味的 (セマンティック)」な構造化、WAI-ARIA による
適時的なフィードバックの提供、具体的で明快なラベリング、十分なコントラストの配色、など
も含まれる。デザインシステム/パターンライブラリに落とし込めるとよい。

17. “The details are not the details. They make the design.”
チャールズ・イームズ

18. ご清聴ありがとうございました。
できるところから
少しずつ、やって
いきましょう。