O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

アクセシビリティを高める「micro IA」

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
WCAN 2010 Summer Session-1: IA
WCAN 2010 Summer Session-1: IA
Carregando em…3
×

Confira estes a seguir

1 de 18 Anúncio

アクセシビリティを高める「micro IA」

Baixar para ler offline

2021年1月21日に開催された「アクセシビリティ Tips LT会」で、『アクセシビリティを高める「micro IA」』というテーマで登壇させていただきました。
https://rakus.connpass.com/event/199440/

スライドのオリジナル (Google スライド) は、以下の URL でご覧いただけます。
https://bit.ly/3oem0q7

2021年1月21日に開催された「アクセシビリティ Tips LT会」で、『アクセシビリティを高める「micro IA」』というテーマで登壇させていただきました。
https://rakus.connpass.com/event/199440/

スライドのオリジナル (Google スライド) は、以下の URL でご覧いただけます。
https://bit.ly/3oem0q7

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (12)

Semelhante a アクセシビリティを高める「micro IA」 (20)

Anúncio

Mais de Kazuhiko Tsuchiya (20)

Mais recentes (20)

Anúncio

アクセシビリティを高める「micro IA」

  1. 1. アクセシビリティを高める「micro IA」 アクセシビリティ Tips LT 会 2021-01-21
  2. 2. @caztcha ウェブユーザビリティ / アクセシビリティ / 情報設計 (Information Architecture : IA) ● Accessible & Usable (https://accessible-usable.net) ● HCD-Net 認定 人間中心設計専門家 ● ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳作業部会
  3. 3. インクルーシブなペルソナ拡張 https://github.com/caztcha/Inclusive-Persona-Extension
  4. 4. インクルーシブデザインの原則 (Inclusive Design Principles) The Paciello Group 植木 真、土屋 一彦 (日本語訳) https://inclusivedesignprinciples.org/ja/
  5. 5. Form Design Patterns シンプルでインクルーシブ なフォーム制作実践ガイド Adam Silver (著) 土屋 一彦 (監訳) https://amzn.to/3i3M0D1
  6. 6. ここから本題です。 (細かい情報設計のお話をします。)
  7. 7. きっかけは、ある障害当時者 (全盲) のひとこと。 あるアプリで、スクリーンリーダーを使って 見たい (聞きたい) コンテンツを選ぶとき。 ジャンルがバーっと読み上げられて探すのに 苦労するんですよね。 アクセシビリティについて雑談するランチ会にて。
  8. 8. UI はこんな感じ コンテンツが整然と並んでいる、よく あるユーザーインターフェース。
  9. 9. 問題の UI コンポーネント ジャンル (タグ) ① コンテンツ名称 (見出し) ② 概要文 ③ ① ② ③ これ全体がリンク (カード UI)。 タップするとコンテンツの詳細ページに 遷移する。 タグは色分け されていて、 手がかりとし て見やすい。 見出しは大き い文字で目に つきやすい。
  10. 10. 何が問題なのか? スクリーンリーダーを 使用時、このリンクに フォーカスが当たると、 音声読み上げは... リンク、 バラエティ、旅、 水曜どうでしょう、 大泉洋、鈴井貴之、藤村忠寿、嬉野雅道
  11. 11. ● このリンクコンポーネントにフォーカスが当たっても、リンク先を表す コンテンツ名称 (見出し) が即座に読み上げられない。 ● 複数のタグが手前に並ぶと、肝心のコンテンツ名称が中に埋もれがち。 ● このコンポーネントがいくつも繰り返されると、数あるコンテンツの中 から1つを選ぶ行為が、じわじわと面倒くさくなる。 リンク、 バラエティ、旅、 水曜どうでしょう、 大泉洋、鈴井貴之、藤村忠寿、嬉野雅道
  12. 12. 得られた知見 ビジュアルヒエラルキー (視覚的な情報の重み付け) が一見してわか りやすく、晴眼者であれば適宜読み飛ばしできるレイアウトでも、 スクリーンリーダーの利用者には、そうした重み付けが伝わらない 可能性がある。 見出しであろうとタグであろうと、スクリーンリーダーの読み上げ の音声は同じ。ボリュームや声色が変わるわけではなく平坦に読み 上げられるので、情報の重み付けをユーザーが判別しにくい。
  13. 13. そもそも、これはリンクでしたね... リンクは、何よりも「リンク先が何であるか」を瞬時に伝えることが 肝要。 この例では、コンテンツ名称 (見出し) が主たるリンクラベルでは?
  14. 14. こんなふうに改善できるかも 現状: ● タグ1 ● タグ2 ● 見出し (主たるラベル) ● 概要文 改善案 (例): ● 見出し (主たるラベル) ○ 概要文 ○ タグ ■ タグ1 ■ タグ2 情報構造も ロジカルに。 主たるラベル が、まず読み 上げられる。 タグは色によ る見やすさを 維持。
  15. 15. 画面デザインにおいては、ビジュアルヒエラルキーなどを駆使して 「外見」を見やすく、収まりよくレイアウトすることは重要。 同時に、ウェブやアプリケーションでは、多様なユーザーのために、 「骨格」とも言える情報構造を、適切にデザインすることが大切。
  16. 16. まとめ ユーザーの声を聞く (または行動を観察できる) チャンスを大切に。 何らかの気づきが得られるはず。 ユーザーが情報コミュニケーションで好むモダリティは多様。 視覚 に限らず、聴覚や触覚に依存する人もいる。この多様性を尊重し、 別け隔てなく快適なユーザー体験を担保するために、micro な粒度 においてもインクルーシブな情報設計*を心がけたい。 *UI コンポーネントを構成する各部品の「意味的 (セマンティック)」な構造化、WAI-ARIA による 適時的なフィードバックの提供、具体的で明快なラベリング、十分なコントラストの配色、など も含まれる。デザインシステム/パターンライブラリに落とし込めるとよい。
  17. 17. “The details are not the details. They make the design.” チャールズ・イームズ
  18. 18. ご清聴ありがとうございました。 できるところから 少しずつ、やって いきましょう。

×