Webアクセシビリティを考えてみる

LOCAL学生部LSM本プレゼント企画でのLTスライドです。
【参考書籍】
https://wgn-obs.shop-pro.jp/?pid=144269533
by Jul 17, 2021

Transcript

1. Webアクセシビリ ティを考えてみる 0yu@yud0uhu 1
2. 自己紹介 2 0yu: 公立千歳科学技術大学 情報システム工学科のB3 Twitter: https://twitter.com/yud0uhu
3. デザイニングWebアクセシビリ ティ: アクセシブルな設計やコン テンツ制作のアプローチ 太田良典 (著), 伊原力也 (著) https://www.amazon.co.jp/dp/4862462650/ref=cm_sw _r_tw_dp_0ZEZMZ3J3EN2PYA3FFE8 すこや@sukoyakarizumu さんから、LSM本プレゼント企 画でいただきました！🙌 3
4. 4 Webアクセシビリティとは？
5. “access” + “able”=「アクセス可能」 個々の特性や利用状況にかかわらず、ユーザーの誰もが 目的地(=Webサイト)に気軽にアクセスできること 5
6. p.10より抜粋 “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Webの力はその普遍性にあります。 障害の有無にかかわらず誰もがアクセスできるという Webの本質的な側面なのです。 6 Accessibility-W3C- https://www.w3.org/standards/webdesign/accessibility
7. https://commono.co.jp/2017/02/28/user-experience2/ 7 UXのハニカム構造
8. Webが本質的にアクセシブルであるのは、 「ユーザーエージェント（ビジュアルブラウザ・テキストブラウザ・ダウンローダー・ロボット ・クローラー）」 =「ユーザーに成り代わってコンテンツにアクセスするプログラム」 +「支援技術（拡大ツール・スクリーンリーダ）」 によって処理されるものであるから 8
9. アクセシビリティの方針の策定方法から、「ユーザーあるある」なお困りご との例示（問題提起）＋実践的な解決アプローチ（解決事例）を1セットで 紹介 9 どんな本？
10. 共感ポイント3 選 自分のユーザー体験から、特に「あるあ る！」だった事例をピックアップ 10
11. ①勝手に新規タブや ポップアップが開く コンテンツの外側で新規タブが増殖！ 11
12. Solution ・外部サイトであることを新規タブで示さず、説明を加える ・リンク先の導線を強化する ・ポップアップをユーザーが予測できるようにする 12
13. ②音が勝手に 再生される 学校や電車の中でスマホゲームを起動したら、 元気よくキャラクターボイスが！なんてことあり ますよね。 13
14. Solution ユーザーの操作で動画の再生をコントロールでき るようにする ユーザーの操作でBGMのON/OFFをコトロールで きるようにする Etc… 14
15. Solution ユーザーの操作で動画の再生をコントロールできるようにする ユーザーの操作でBGMのON/OFFをコトロールできるようにする Etc… 自動再生したあとで停止ボタンを押すのでは × コントロールそのものはアクセスブル？ 15
16. ③フォーム入 力エトセトラ 16
17. フォームの全体像がつかめな い この入力フォーム、全部で何ページあるの？ ⇒所用時間がはかれない＆一度入力を始めたらやり直しができな い。 なんてケースは不便ですね。 入力そのものがおっくうになってしまいます。 17
18. 準備に必要なものが明示され ていない ある程度入力がすすんだ後で会員登録を要求されるケース 必要書類がフォーム入力の事前に記載されていない ⇒登録フォームに住所入力や志願動機の記入が終わってさて一息、 出先 で契約者番号や通帳が手元になかったら・・・ ⇒必要書類を探している間にフォームのセッション切れ、なんて 踏んだり 蹴ったりなケースも考えられます。 18
19. チケット決済の悲劇 入力フローの最後の最後で「満席です」 ⇒これ、航空券の決済時や、旅行比較サイトからの予約時なんか で結構 遭遇した体験があります。。 19
20. Solution ・フォームの全体像・所要時間（入力終了までのス テップ）を明示する ・ユーザーの要求を満たせないケースを事前に示 す（リアルタイムな反映が難しいときには混雑状態 を示すなど） 20
21. 自由度の低い入力フォーム ・全角入力のみ入力可能 ・区切り文字が要求される ・桁数を入力した瞬間などでフォーカスが遷移する などの 21
22. Solution ・表記ゆれを許容する ⇒半角と全角、ひらがなとカタカナ、大文字と小文字、 ハイフンなどの区切り文字の有無をシステム側で変換して 処理できるようにする ⇒郵便番号やクレジット番号などの入力欄は、入力 ケースを明示する ・フォーカス移動はユーザーに任せる 22
23. 状況を自分の力で コントロールできな いもの =ストレス？？ 23
24. アクセシビリティを考え てみること① 24 「ユーザー視点の感覚」と「開発者視点の感 覚」って乖離が大きい
25. Webのビジュアルデザインが求める「美しさ」 ×アートとしての美しさ 〇ユーザーが見たときに、きちんと伝わり、整って見えるという意 味の美しさ 25 アクセシビリティを考えてみる こと②
26. 26 改めてありがとうご ざいました！🎉