Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webサイトのアクセシビリティにどう向き合う? / How Should We Approac...

ymrl
November 23, 2024

Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?

MTDDC Meetup Tokyo 2024にて発表した際の資料です。
Google Slides版も公開しています。

freee、「合理的配慮の対応方針」公開のお知らせ 障害のあるお客様等が「合理的配慮」について相談できる専用のお問い合わせ窓口を設置
Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)
WCAG 2.2 解説書
WCAG 2.1 達成方法集
Web Content Accessibility Guidelines (WCAG) 2.2
Understanding WCAG 2.2
All WCAG 2.2 Techniques
困った!を解決するデザイン 登場人物
インクルーシブなペルソナ拡張
ウェブアクセシビリティ導入ガイドブック
Quickly & easily test and remediate for web accessibility
色のシミュレータ
LOW VISION EXPERIENCE KIT – ロービジョン体験キット
freeeアクセシビリティー・ガイドライン
WCAG 2.1の各達成基準と当ガイドラインの項目との対応 — freeeアクセシビリティー・ガイドライン
当ガイドラインとWCAG 2.1の各達成基準のレベル — freeeアクセシビリティー・ガイドライン
全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
アクセシビリティカンファレンス福岡2024 - connpass
アクセシビリティカンファレンス福岡:パブリックビューイング in 東京 - connpass
アクセシビリティを考えはじめるための本:20 Hour Exception
いつでも、どこでも、誰でも「使える」へ - 『モバイルアプリアクセシビリティ入門』刊行記念イベント
第1回『モバイルアプリアクセシビリティ入門』公開読書会 - connpass

ymrl

November 23, 2024
Tweet

More Decks by ymrl

Other Decks in Technology

Transcript

  1. ⾃⼰紹介 • ⼭本伶(@ymrl) ◦ ふだんは「やまある」と呼ばれていることが多いです ◦ フリー株式会社 デザイナー/エンジニア • 2017年ごろからfreee社内のアクセシビリティの活動を始める

    ◦ 2019年、社内デザインシステムの構築のためにデザイナーに転⾝ • 2023年、共著書「Webアプリケーションアクセシビリティ」出版 • freeeの社外では、他社のアクセシビリティ改善の⽀援や、 アクセシビリティチェックのためのツール開発などもしています
  2. ユーザビリティとアクセシビリティ • 誰かにとっての使いやすさ: ユーザビリティ ◦ ターゲットとなるユーザーと利⽤状況を限定する ◦ その⼈にとっての効果‧効率‧満⾜度‧⽬標の達成度合い • 使える⼈‧状況の広さ:

    アクセシビリティ ◦ ターゲットを限定しない(障害者や⾼齢者にも限定しない) ◦ どんな⼈‧どんな利⽤状況であっても、まず使えることを⽬指す ◦ その上で、使いやすい状況になっていれば、なお良い • ⼭を⾼くするのがユーザビリティ、裾野を広げるのがアクセシビリティ
  3. 障害者権利条約での「障害」の捉え⽅: 社会モデル • 従来の考え⽅: 医学的な観点から「障害者」を定義(医学モデル‧個⼈モデル) ◦ 「障害」は個⼈の側に存在する • 障害の社会モデル: 社会が不便なせいで、その⼈は「障害者」になっている

    ◦ 「障害」は社会の側に存在する(社会的障壁) • 社会モデルの考え⽅では、社会の不便なこと = 「障害」を解消していけば、 本⼈の状態が変わらなくても、「障害者」を減らしていくことができる ◦ 例: 階段でしか2階に上がれない建物では、⾞いすの⼈は「障害者」 エレベーターが整備され2階に上がれるようになれば「障害者」ではなくなる
  4. 社会は急には変わっていかないので、合理的配慮が必要 • 障害者からの求めに応じて、過度な負担にならない範囲で、不便を解消する 調整を⾏うのが、合理的配慮(reasonable accommodation) ◦ 障害者の状況にあわせたアドホックな対応(運⽤でカバー) ◦ 例: 聴覚に障害のある⼈との会話を、筆談や⾳声認識アプリで⾏った

    ◦ 例: ⾞いすの⼈のために、通路を広くしたり机の⾼さを調整したりした • 必要になりそうな合理的配慮をシミュレーションしたり、研修したり、 そもそも不便な状況が起きないように改善していく: 環境の整備
  5. freeeの事例: 合理的配慮に関する窓⼝の設置 • 以前からWebアプリやWebサイトの アクセシビリティ向上に取り組んでいた ◦ 本当に困っている⼈が、躊躇なく 申し出ることができるだろうか ◦ 申し出を受けたメンバーが、適切に

    対応することができるだろうか • 2024年に「合理的配慮の対応⽅針」と 「合理的配慮委員会」を設置 ◦ 合理的配慮に関する⽅針と、 社外‧社内に向けた相談窓⼝ freee、「合理的配慮の対応⽅針」公開のお知らせ 障害のあるお客様等が「合理的配慮」について相談できる専⽤のお問い合わせ窓⼝を設置 https://corp.freee.co.jp/news/20240625_gouritekihairyo.html
  6. ⽀援技術 (Assistive Technology) • 不便を抱えている⼈を⽀援するためのハードウェア、ソフトウェア • ⾒えない‧⾒えづらい →メガネ‧拡⼤機能‧スクリーンリーダー(画⾯読み上げソフト)‧点字ディスプレイ • 聞こえない‧聞こえづらい

    →補聴器‧⼈⼯内⽿‧⽂字起こしアプリ • ⼿や腕を動かせない‧動かしづらい‧道具を保持しづらい →キーボード操作スティック‧視線や⾳声やタイミングによる⼊⼒‧機材ホルダー • ⾔葉が難しい‧読み書きが苦⼿ →機械翻訳‧読み上げ‧⾳声⼊⼒
  7. ⽀援技術の代表例: スクリーンリーダー • おもに視覚障害者が利⽤する、画⾯を読み上げるソフトウェア • PC⽤のOSに搭載: ナレーター(Windows), VoiceOver (macOS) •

    Windows⽤: PC-Talker, NVDA, JAWSなど • スマートフォン⽤: VoiceOver (iOS, iPadOS), TalkBack (Android) freeeアクセシビリティー‧ガイドライン内に使い⽅などを掲載しています https://a11y-guidelines.freee.co.jp/explanations/screen-reader-check.html ※ ぜひ試してもらいたいのですが、終了⽅法を確かめてからにしてください
  8. WCAG (Web Content Accessibilty Guidelines) • W3C(Web技術の標準化団体)によるWebアクセシビリティのガイドライン ◦ 最新版は昨年勧告となったWCAG 2.2

    ◦ WCAG 2.0がJIS X 8341-3:2016やISO/IEC40500:2012と⼀致 • WCAGのほかに解説書 (Understanding) と達成⽅法集 (Techniques) がある • ⽇本語訳をWAIC(ウェブアクセシビリティ基盤委員会)が公開 ◦ WCAG 2.2の解説書と達成⽅法集は現在翻訳中 WCAG 2.2で追加された達成基準の解説のみ⽇本語版が公開されている
  9. WCAGと関連⽂書のURL • WCAG 2.2 ⽇本語訳 https://waic.jp/translations/WCAG22/ • WCAG 2.2 解説書

    https://waic.jp/translations/WCAG22/Un derstanding/ • WCAG 2.1 達成⽅法集 https://waic.jp/translations/WCAG21/Te chniques/ • WCAG 2.2 https://www.w3.org/TR/WCAG22/ • Understanding WCAG 2.2 https://www.w3.org/WAI/WCAG22/Unde rstanding/ • Techniques for WCAG 2.2 https://www.w3.org/WAI/WCAG22/Tech niques/
  10. WCAGのバージョンと国際規格 • WCAGの最新バージョンは2023年10⽉に勧告となったWCAG 2.2 ◦ JIS X 8341-3:2016, ISO/IEC 40500:2012

    となっているWCAG 2.0とは 互換性がある(達成基準がいくつか追加され、1つ廃⽌された) • WCAG 2.1以降スマートフォンを意識した達成基準が追加されているため、 JIS準拠を求められている場合でも、WCAG 2.2 も確認したほうが良い • W3CはWCAG 2.2の内容でISO/IECを改正するための準備をしている ◦ ISO/IEC 40500が改正されると、JIS X 8341-3:2016も改正される⾒込み
  11. WCAGの達成基準の達成⽅法の例 • 画像に代替テキストをつける: 1.1.1(A) • Webサイトに埋め込まれている動画に字幕をつける: 1.2.2(A) • ⽂字の⾊をコントラスト⽐の⾼い配⾊に変更する: 1.4.3

    (AA), 1.4.6 (AAA) • レスポンシブレイアウトにする: 1.4.10 (AA) • ボタンなどをキーボードで操作できるようにする: 2.1.1(A), 2.1.3(AAA) • エラーメッセージの表⽰⽅法や内容を丁寧にする: 3.3.1(A), 3.3.3(AA)
  12. ふたつのアンチパターン • Webサイト全体のリニューアルまで放置する ◦ 困っている⼈は困ったまま、問題のあるコンテンツは増えつづける ◦ コンテンツの増加によって予算は膨らみ、スケジュールは遅延する ◦ もちろんリニューアルはアクセシビリティ⼤幅向上のチャンスではある •

    ボタンを置くだけでアクセシビリティ対応完了!みたいな製品を導⼊する ◦ 常に拡⼤や読み上げが必要な⼈は、個別のWebサイト上のボタンは不要 ◦ 致命的に問題のあるコンテンツは改善できず、そのまま残り続ける ◦ 便利に感じるユーザーはいるかもしれないが、根本の解決ではない
  13. アクセシビリティを必要としている⼈たちのことを知る • 「⾒えにくい、読みにくい『困った!』を 解決するデザイン」(書籍) ◦ 様々な登場⼈物の「困った!」が紹 介されている • インクルーシブなペルソナ拡張 ◦

    デザインの過程で定義するペルソナ に障害や利⽤状況の属性を付加する • どんなことに困るのか?をまずは知る • 当事者と話せそうなら話を聞いてみる ⾒えにくい、読みにくい「困った!」を解決するデザイン 登場⼈物 https://komatta-design.studio.site/persona インクルーシブなペルソナ拡張 https://accessible-usable.net/2018/05/entry_180517.html
  14. ⾮⼲渉の要件からやる • すべてのページで満たさなければいけないとされている、4つの達成基準 ◦ ⾳声の制御(1.4.2) ◦ キーボードトラップなし(2.1.2) ◦ 3 回の閃光、⼜は閾値以下(2.3.1)

    ◦ ⼀時停⽌、停⽌、⾮表⽰(2.2.2) • どれも、ページの閲覧や他のページへの移動を困難にしてしまうもの ◦ 該当するページがある場合は、すぐに直したほうが良い • ウェブアクセシビリティ導⼊ガイドブックでは「重⼤」と記載
  15. ⾳声の制御(1.4.2) • 3秒以上の⾳声を⾃動再⽣させない ◦ ⾳の出る動画を含む • ⾃動再⽣する場合には停⽌や⾳量調整が できるようにする • ⾳声が邪魔でスクリーンリーダーによる

    ⾳声読み上げでの利⽤が困難になる • ⾳声により、視覚コンテンツへの集中⼒を 妨げられてしまう ウェブアクセシビリティ導⼊ガイドブック https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
  16. キーボードトラップなし(2.1.2) • Tabキーによるフォーカス移動で、 抜けだせなくなる場所がないようにする • むかしはFlashによってよく発⽣したが、 今はあまり存在しないかもしれない ◦ JavaScriptプログラムのミスにより 発⽣することは有り得る

    • モーダルダイアログ内にフォーカスを閉 じ込め、閉じるまで抜け出せないのはOK ◦ ただしキーボード操作で閉じられる ようになっている必要がある ウェブアクセシビリティ導⼊ガイドブック https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
  17. ⼀時停⽌、停⽌、⾮表⽰(2.2.2) • 5秒より⻑く動きつづけるコンテンツは、 ⽌めたり消したりできるようにする ◦ ⾃動で切り替わっていく、バナーや 写真などの画像(カルーセル) ◦ アニメーションの演出 ◦

    ⾃動再⽣されている動画 • 動き続けるものが⽬に⼊ると集中⼒を奪 われてしまう障害のある⼈に影響がある ウェブアクセシビリティ導⼊ガイドブック https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
  18. 機械的なチェックで⾒つかるところからやる • Lighthouseの「ユーザー補助 (Accessibility)」で採点できる ◦ 採点に使われるaxe-coreは、axe DevToolsとして単体で使える (アクセシビリティの評価ではaxe DevToolsのほうが使いやすい) •

    機械によるチェックだけでは完璧なチェックはできないので注意 ◦ WCAGの全ての項⽬をチェックできるわけではない ◦ 間違ったやり⽅でスコアを上げると、アクセシビリティをむしろ下げる
  19. アクセシビリティを必要としている⼈のことを知る • ユーザーに会ってみる、当事者に会ってみる ◦ ⾃社のユーザー内で探す、クラウドソーシングを活⽤する • 体験してみる ◦ ⾊のシミュレータ、ロービジョン体験キット ◦

    キーボードだけで、いろんなWebサイトを操作してみる ◦ スクリーンリーダーで、いろんなWebサイトを読んでみる https://a11y-guidelines.freee.co.jp/explanations/screen-reader-check.html
  20. 47 UXチームがUIデザインを作成→エンジニアが開発→QAチームがテストの流れがあるので、 
 デザイナーがデザイン、エンジニアがコード、QAがプロダクトのアクセシビリティチェックを行う 
 チェックのタイミング(プロダクト開発) 
 デザイナー 
 エンジニア

    
 QA
 デザイン の
 アクセシビリティチェック 
 コード の
 アクセシビリティチェック 
 プロダクト の
 アクセシビリティチェック 
 freeeの研修資料「アクセシビリティー研修 Basic」より引⽤ https://developers.freee.co.jp/entry/a11y-training
  21. 機械的なチェックをプロセスに組み込む • axe-core(Lighthouse, axe DevTools) • markuplint, eslint (jsx-a11y, vuejs-accessibility),

    biome • コーディング時にチェックするほか、コンテンツの追加更新時にも使⽤する ◦ コンテンツの追加更新をするメンバーに⼿順を説明して実施してもらう • もちろん、⾃動的なチェックだけでは完璧にならない ◦ コンテンツの追加更新時に⾏うチェックについて決めておく ◦ そもそもどうコンテンツを作るべきかの指針を⽰しておく
  22. スクリーンリーダーなしで、同等のチェックをする • ⾃動チェックでチェックできないものは ⼈の⼿でチェックをしなければならない • チェックするには、コードを読むか、 ⽀援技術(スクリーンリーダー)を使う ◦ 使い⽅を憶えるのが⼤変 ◦

    QAしかチェックしなくなる • それらを簡単に⾒ることができる Accessibility Visualizer拡張機能を開発 https://github.com/ymrl/a11y-visualizer 画像は「 駒瑠市〜アクセシビリティ上の問題の体験サイト〜」上で Accessibility Visualizerを使⽤したもの https://a11yc.com/city-komaru/