Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

アクセシビリティのはじめかた デザイナー編

tokimari
July 19, 2024

アクセシビリティのはじめかた デザイナー編

2024/7/19に開催されたアクセシビリティ入門会( https://lu.ma/8ms836if )の発表資料です。

下記リンクから、Google Slideでも閲覧できます。
https://docs.google.com/presentation/d/1QX-yJPJ6F2ZHpDqjW6fUl1-cgLDY7UCcngww2iVDTHo/edit?usp=sharing

tokimari

July 19, 2024
Tweet

Other Decks in Design

Transcript

  1. ユーザビリティとのちがい • アクセシビリティ ◦ 色の識別が困難なユーザーでもどちらが修正前・ 修正後かが理解できる • ユーザビリティ ◦ 色の識別が困難ではないユーザーが、「赤は修正

    前・緑は修正後」と直感的にわかりやすく、効率 的に情報を理解できる • 情報を色だけで区別すると 「アクセシビリティ」上の問題がある
  2. ユーザビリティとのちがい 色の区別が難しくても、 わかりやすい 区別に使っている要素: • (色) • オブジェクト(+, -) •

    レイアウト GitHubのコード変更の修正前・修正後を表す画面(2カラム 表示)を、2型2色覚の人の典型的な見え方をシミュレーションした 図
  3. • WCAG(Web Content Accessibility Guidelines)を参考に ◦ アクセシビリティの世界的なガイドライン ◦ WCAG 2.2には86個の達成基準(守るべきこと)

    • 適合レベルA, AA, AAAで分類される ◦ A:最低限の基準。達成できないと、支援技術を使っても利用できない ◦ AA:望ましい基準。達成できないと、支援技術なしでは利用できない ◦ AAA:発展的な基準。達成できると、よりアクセスしやすくなる場合がある • Aの中でも「非干渉」と呼ばれる4つは特に致命的な問題を起こす ◦ 他のコンテンツまで利用できなくなる可能性がある アクセシビリティの問題の分類
  4. 1. 他のコンテンツまで利用できない(非干渉) • 動画やアニメーションを自動で再生している ◦ 5秒以上続く場合、集中できなくなり他のコンテンツを理解できない ◦ →自動で再生しない or 停止できるようにする

    • 音声を自動で再生している ◦ スクリーンリーダーでは、画面上の文字を音声で読み上げて操作している ◦ 3秒以上続く音声が自動再生されると操作自体ができなくなる
  5. 2. 利用できない(A) • ジェスチャーだけでしか操作できない (スワイプ、ピンチイン・アウト、ドラッグ&ド ロップなど) ◦ スマホに不慣れな人はこの操作方法に気 付けない ◦

    身体的な障害や持ち方によっては、スワ イプができないため操作できない この機能自体はとても便利 この機能「だけ」だとダメ 左にスワイプして削除エリアを表示し、そのままスワ イプして削除する操作方法
  6. 3. 利用にはツールが必要(AA) • テキストや文字画像のコントラストが低い ◦ 中度のロービジョンの人が読めない ▪ 弱視・高齢者 ◦ 閲覧状況・環境・デバイスによっては読めない

    ▪ メガネを忘れてしまった ▪ 炎天下の作業現場 ▪ モニターの輝度 ▪ 投影したとき ◦ →文字色:背景色は4.5:1以上にする 低い コントラスト #d9d9d9 1.41:1 高めの コントラスト #757575 4.65:1
  7. • 実装も改善することで ◦ →画面上の「何が重要か・どんな意味か」などを読み取れるように ▪ 見出し、画像の意味、リンク先との紐付け、メインコンテンツ、補足情報など • 結果的に ◦ 障害者向けのソフトウェアやデバイスだけでなく

    ◦ スマートウォッチなどの新しいデバイス、ブラウザにも適応できるように • アクセシビリティを高める → 他デバイス・ブラウザへの転用性も高まる 3.あらゆるデバイスやブラウザに対応しやすいから
  8. • 2024年4月、障害者差別解消法が改正 • 民間事業者にも「合理的配慮の提供」が 義務化された • 障害を理由に利用できないなどの問い合 わせを受けた場合、建設的な対話を通じ て代替手段を提案し、合理的な範囲での 柔軟な対応が求められる

    4.法令遵守のため 画像:リーフレット「令和6年4月1日から合理的配慮の提供が義務化されました」 - 内閣府 https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html より
  9. • 用語の統一 ◦ アメーバ → Ameba ◦ アメーバブログ → Amebaブログ

    ◦ Ameba ID → アメーバID • 文章校正 デザインシステムでのしくみ化
  10. • 1人でも取り組めるものをまずはやってみる ◦ コンポーネント単位、画面単位など • 自慢する ◦ 何がアクセシビリティ上の問題になるのか ◦ どう使い勝手が向上するのか

    ◦ 社内Slack、チームのSlackでメンバーに向けて ◦ スタッフブログ、Xでユーザーに向けて 小さなアウトプットからはじめる
  11. Amebaでの取り組み例 • 輪読会 • スクリーンリーダー体験会 • オンボーディング、研修 • レビュー・テストに、アクセシビリティ観点のチェック項目を追加 •

    抜き打ちテスト(イベント的に) ◦ 今日のデザインワークショップ • アクセシビリティ改善ワークショップ ◦ バナーのコントラスト改善 ◦ わざとアクセシビリティに問題のあるLPを作ってコードレビューしたり 継続するしくみをつくる
  12. Amebaでの取り組み例 • システムやプロジェクト単位でアクセシビリティ方針を作成する ◦ 無理な目標を掲げない ▪ はじめから完璧を目指すと挫折しやすい ▪ ある人には、1つの改善だけでも「使える」ようになるかも ◦

    やる、やらないを明確にしておく ▪ 後から手戻りするロスを防ぐ ◦ 他職種を巻き込み合意を得る ▪ →小規模なチーム単位がやりやすい ▪ やる→自慢→前例になる→仲間を増やす 継続するしくみをつくる
  13. おすすめのインプット 勉強会 • Discord「ウェブアクセシビリティ」 やXで情報収集 ◦ イベント情報、質問など、有識者も多く参加している ◦ 初心者向けのLT会もたくさん行われている •

    ウェブアクセシビリティLT&交流会 vol.2 7/21(日) 13:30 〜 15:30(明後日!) • アクセシビリティカンファレンス名古屋 9/7(土) 13:00〜 • アクセシビリティカンファレンス福岡 11/30(土) 12:30 〜 19:30 • 例年5月に開催 ◦ GAAD Japan(オンライン開催+各地でパブリックビューイングなど) ◦ アクセシビリティの祭典(神戸)
  14. おすすめのインプット 各社のガイドライン • Ameba Accessibility Guidelines ◦ Amebaの開発・運用者向けのガイドライン ◦ アクセシビリティに馴染みがなくてもわかりやすく

    • freeeアクセシビリティー・ガイドライン ◦ アクセシビリティー・チェック・リスト ◦ アクセシビリティー・チェックのためのツール • アクセシビリティ | SmartHR Design System ◦ 簡易的なチェックリスト ◦ はじめてガイド ◦ UIデザイン使用性チェックリスト