Webアクセシビリティは“もしも”に備える設計

Webアクセシビリティは“もしも”に備える設計
アクセシビリティ対応の「どこまでやる？」を言語化する　~チームで迷わないための設計と判断基準~
https://findy.connpass.com/event/387942/

Transcript

1. Webアクセシビリティは “もしも”に備える設計 FutureOne株式会社 草場 友光 アクセシビリティ対応の「どこまでやる？」を言語化する ~チームで迷わないための設計と判断基準~
2. 自己紹介 • .NETラボ勉強会を主催 • 2022/08-2026 Microsoft MVP (Web Development) • ドラクエ大好き ドラクエ10のプレイ時間→ 1キャラ目：2676時間 2キャラ目：918時間 3キャラ目：792時間 4キャラ目：190時間(配信用) tomo_kusaba
3. MVP Summit行ってきました
4. 今日の目的 • 私たちは今Webサービスを十分に享受できています。 • しかし次の瞬間、病気や事故によってあなたもそれらが困難にな るかもしれません。 • だからこそ、代替の方法で情報にアクセスし、Webサービスを享 受できる状態を用意しておくことが重要です。 • アクセシビリティは「一部の人のため」ではなく「すべての人のた め」の設計だと捉えています。
5. あなたのサービスは、 ある日あなたが色を 識別できなくなったとしても 不自由なく使えますか？
6. あなたのサービスは、 ある日あなたが目が 見えなくなったとしても 不自由なく使えますか？
7. アクセシビリティに ついて学びましょう
8. アクセシビリティとは？ • 誰もが自由に何かの目的を達成できるような状態のことを指す。 • 特に情報システムにおいては何らかのハンディキャップを持った 方でも不自由なく情報にアクセスできるような状態を指す。 • 2024年4月障害者差別解消法によって合理的配慮の提供が求 められています。
9. いま享受している「普通」は突然変わる • けが・病気による不調でPCやスマートフォンの操作が困難になる。 • 加齢による視力低下・まぶしさで液晶画面が見えにくくなる。コン トラストの低いUIが視認できなくなる。 • 寒い冬で一時的にスマートフォンの細かい操作が困難になる。
10. 皆さんの開発中のWebサービスについて • けがや病気による不調の時でも不自由なく使うことができるだろ うか？ • 加齢による視力低下・まぶしさで液晶画面が見にくい状況下でも UIは視認できるだろうか？ • 寒い冬のかじかんだ手でも誤った入力することなく使うことがで きるだろうか？
11. アクセシビリティの根幹 • 情報や機能への「別ルート」を確保するということ • 視覚に頼れないとき →スクリーンリーダー • 聴覚に頼れないとき →字幕・文字情報 • マウス操作が困難なとき →キーボード操作のみで完結 • 一つの手段が使えないときに別の手段がある状態を作る →複数の手段で情報を伝えられるようにすることが重要
12. アクセシビリティの要件定義 • どこまで • WCAG 2.2 AA？? • JIS X 8341-3？？ • どうやって • UIフレームワークを使う？ • UIの設計原則を守らせるためには？？
13. アクセシビリティの設計 • 開発の初期段階から意識することが重要。 • 意味のあるHTMLの構造設計。 • 意味のあるコンテキストを提供する。 • 空間情報や音声情報が欠落していることを前提に文字情報だけで意味の 通る一貫した設計が必要。
14. UIフレームワークの効果 • HTML要素を抽象化 • デザイン要素を正しく表現できる。 • 必須の要素を必須入力にできる。 • 色を抽象化 • ダークモードを正しく実装できる。
15. WCAG 2.2の全体像 • 4つの原則 原則 説明 知覚可能 情報とUIコンポーネントがユーザーに知覚可能な方法で提示されなければならないとい う原則です。視覚・聴覚に頼らなくてもコンテンツを把握できる代替手段を提供すること が求められます。 操作可能 UIコンポーネントとナビゲーションが操作可能でなければならないという原則です。キー ボードのみでの操作や、十分な操作時間の確保、発作を引き起こさないコンテンツ設計な どが含まれます。 理解可能 情報とUIの操作が理解可能でなければならないという原則です。読みやすいテキスト、予 測可能なページ動作、入力を支援する機能などが該当します。 堅牢 コンテンツが支援技術を含む多様なユーザーエージェントによって確実に解釈できるほど 堅牢でなければならないという原則です。
16. 知覚可能ー音声 • 外国語の映画を字幕でストーリを追う • 騒がしい居酒屋でテキストでやりとり • 電車内で動画を字幕をONにして視聴 • 音声情報を別のチャンネルに変換して情報を伝える行為
17. 知覚可能ー視覚 • 牛乳パックの切り欠きを指で触って開け口を判断する • スマートフォンの読み上げ機能で画面の内容を耳で聞く • 信号機の音響装置で青信号を音で知る • 点字ブロックの凹凸を足裏で感じて道順をたどる • 視覚情報を別のチャンネル（音声・触覚・物理形状など）に変換して情報 を伝える行為
18. 操作可能 • 利き手を骨折して反対の手でキーボードだけで操作する • 指先を怪我してタッチ操作の代わりに音声コマンドで操作する • マウスが壊れてTabキーとEnterキーだけでフォームを送信する • 視線入力装置で画面上のボタンを選択する • 入力手段が制限されても、別の操作方法で同じ機能を使える行為
19. 理解可能 • 初めて来た土地で乗換案内アプリの案内どおりに目的の駅にたどり着く • 外国語のWebサイトをブラウザの翻訳機能で読んで内容を把握する • エラー画面に表示された「〇〇を入力してください」の指示に従って修正する • やさしい日本語に書き換えられた行政文書で手続きを理解する • 読んで分かる、動きに迷わない、間違えてもやり直せる――その3つが揃っ て「理解できる」と言える
20. 堅牢 • 世界共通の楽譜でどの国の演奏家にも同じ曲が再現される • ISO規格の非常口マークがどの国のどの建物でも同じ意味で伝わる • 電子書籍がスマートフォンでもタブレットでもPCでも同じ内容で読める • QRコードがどのメーカーのスマートフォンでも同じ情報を読み取れる • 人が読み取っている意味を、支援技術を含むあらゆるソフトウェアにも同じ ように解釈させる行為
21. まとめ • アクセシビリティはすべての人にあるもの • 今携わっているシステム一つ一つアクセシビリティを意識すること によって世の中はよりよくできる • WCAGの4つの観点を覚えてよりよい世の中にしていきましょ う！
22. おしまい おしまい