アクセシビリティを高める「micro IA」
Download as PPTX, PDF0 likes219 views
2021年1月21日に開催された「アクセシビリティ Tips LT会」で、『アクセシビリティを高める「micro IA」』というテーマで登壇させていただきました。 https://rakus.connpass.com/event/199440/ スライドのオリジナル (Google スライド) は、以下の URL でご覧いただけます。 https://bit.ly/3oem0q7
More Related Content
What's hot (11)
Similar to アクセシビリティを高める「micro IA」 (20)
More from Kazuhiko Tsuchiya (20)
![ウェブディレクターのための Web A11Y 勉強会 (Season 2) #12 [最終回]](https://cdn.slidesharecdn.com/ss_thumbnails/weba11yseminars212-190315211627-thumbnail.jpg?width=560&fit=bounds)
アクセシビリティを高める「micro IA」
- 1. アクセシビリティを高める「micro IA」 アクセシビリティ Tips LT 会 2021-01-21
- 2. @caztcha ウェブユーザビリティ / アクセシビリティ / 情報設計 (Information Architecture : IA) ● Accessible & Usable (https://accessible-usable.net) ● HCD-Net 認定 人間中心設計専門家 ● ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳作業部会
- 4. インクルーシブデザインの原則 (Inclusive Design Principles) The Paciello Group 植木 真、土屋 一彦 (日本語訳) https://inclusivedesignprinciples.org/ja/
- 5. Form Design Patterns シンプルでインクルーシブ なフォーム制作実践ガイド Adam Silver (著) 土屋 一彦 (監訳) https://amzn.to/3i3M0D1
- 7. きっかけは、ある障害当時者 (全盲) のひとこと。 あるアプリで、スクリーンリーダーを使って 見たい (聞きたい) コンテンツを選ぶとき。 ジャンルがバーっと読み上げられて探すのに 苦労するんですよね。 アクセシビリティについて雑談するランチ会にて。
- 9. 問題の UI コンポーネント ジャンル (タグ) ① コンテンツ名称 (見出し) ② 概要文 ③ ① ② ③ これ全体がリンク (カード UI)。 タップするとコンテンツの詳細ページに 遷移する。 タグは色分け されていて、 手がかりとし て見やすい。 見出しは大き い文字で目に つきやすい。
- 10. 何が問題なのか？ スクリーンリーダーを 使用時、このリンクに フォーカスが当たると、 音声読み上げは... リンク、 バラエティ、旅、 水曜どうでしょう、 大泉洋、鈴井貴之、藤村忠寿、嬉野雅道
- 11. ● このリンクコンポーネントにフォーカスが当たっても、リンク先を表す コンテンツ名称 (見出し) が即座に読み上げられない。 ● 複数のタグが手前に並ぶと、肝心のコンテンツ名称が中に埋もれがち。 ● このコンポーネントがいくつも繰り返されると、数あるコンテンツの中 から1つを選ぶ行為が、じわじわと面倒くさくなる。 リンク、 バラエティ、旅、 水曜どうでしょう、 大泉洋、鈴井貴之、藤村忠寿、嬉野雅道
- 14. こんなふうに改善できるかも 現状: ● タグ1 ● タグ2 ● 見出し (主たるラベル) ● 概要文 改善案 (例): ● 見出し (主たるラベル) ○ 概要文 ○ タグ ■ タグ1 ■ タグ2 情報構造も ロジカルに。 主たるラベル が、まず読み 上げられる。 タグは色によ る見やすさを 維持。
- 16. まとめ ユーザーの声を聞く (または行動を観察できる) チャンスを大切に。 何らかの気づきが得られるはず。 ユーザーが情報コミュニケーションで好むモダリティは多様。 視覚 に限らず、聴覚や触覚に依存する人もいる。この多様性を尊重し、 別け隔てなく快適なユーザー体験を担保するために、micro な粒度 においてもインクルーシブな情報設計*を心がけたい。 *UI コンポーネントを構成する各部品の「意味的 (セマンティック)」な構造化、WAI-ARIA による 適時的なフィードバックの提供、具体的で明快なラベリング、十分なコントラストの配色、など も含まれる。デザインシステム/パターンライブラリに落とし込めるとよい。
- 17. “The details are not the details. They make the design.” チャールズ?イームズ