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

Slide 1

Slide 1 text

Webアクセシビリティを考えてみる 0yu@yud0uhu 1

Slide 2

Slide 2 text

自己紹介 2 0yu: 公立千歳科学技術大学情報システム工学科のB3 Twitter: https://twitter.com/yud0uhu

Slide 3

Slide 3 text

デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ太田良典 (著), 伊原力也 (著) https://www.amazon.co.jp/dp/4862462650/ref=cm_sw _r_tw_dp_0ZEZMZ3J3EN2PYA3FFE8 すこや@sukoyakarizumu さんから、LSM本プレゼント企画でいただきました！🙌 3

Slide 4

Slide 4 text

4 Webアクセシビリティとは？

Slide 5

Slide 5 text

“access” + “able”=「アクセス可能」個々の特性や利用状況にかかわらず、ユーザーの誰もが目的地(=Webサイト)に気軽にアクセスできること 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

https://commono.co.jp/2017/02/28/user-experience2/ 7 UXのハニカム構造

Slide 8

Slide 8 text

Webが本質的にアクセシブルであるのは、「ユーザーエージェント（ビジュアルブラウザ・テキストブラウザ・ダウンローダー・ロボット・クローラー）」 =「ユーザーに成り代わってコンテンツにアクセスするプログラム」 +「支援技術（拡大ツール・スクリーンリーダ）」によって処理されるものであるから 8

Slide 9

Slide 9 text

アクセシビリティの方針の策定方法から、「ユーザーあるある」なお困りごとの例示（問題提起）＋実践的な解決アプローチ（解決事例）を1セットで紹介 9 どんな本？

Slide 10

Slide 10 text

共感ポイント3 選自分のユーザー体験から、特に「あるある！」だった事例をピックアップ 10

Slide 11

Slide 11 text

①勝手に新規タブやポップアップが開くコンテンツの外側で新規タブが増殖！ 11

Slide 12

Slide 12 text

Solution ・外部サイトであることを新規タブで示さず、説明を加える・リンク先の導線を強化する・ポップアップをユーザーが予測できるようにする 12

Slide 13

Slide 13 text

②音が勝手に再生される学校や電車の中でスマホゲームを起動したら、元気よくキャラクターボイスが！なんてことありますよね。 13

Slide 14

Slide 14 text

Solution ユーザーの操作で動画の再生をコントロールできるようにするユーザーの操作でBGMのON/OFFをコトロールできるようにする Etc… 14

Slide 15

Slide 15 text

Solution ユーザーの操作で動画の再生をコントロールできるようにするユーザーの操作でBGMのON/OFFをコトロールできるようにする Etc… 自動再生したあとで停止ボタンを押すのでは × コントロールそのものはアクセスブル？ 15

Slide 16

Slide 16 text

③フォーム入力エトセトラ 16

Slide 17

Slide 17 text

フォームの全体像がつかめないこの入力フォーム、全部で何ページあるの？ ⇒所用時間がはかれない＆一度入力を始めたらやり直しができない。なんてケースは不便ですね。入力そのものがおっくうになってしまいます。 17

Slide 18

Slide 18 text

準備に必要なものが明示されていないある程度入力がすすんだ後で会員登録を要求されるケース必要書類がフォーム入力の事前に記載されていない ⇒登録フォームに住所入力や志願動機の記入が終わってさて一息、出先で契約者番号や通帳が手元になかったら・・・ ⇒必要書類を探している間にフォームのセッション切れ、なんて踏んだり蹴ったりなケースも考えられます。 18

Slide 19

Slide 19 text

チケット決済の悲劇入力フローの最後の最後で「満席です」 ⇒これ、航空券の決済時や、旅行比較サイトからの予約時なんかで結構遭遇した体験があります。。 19

Slide 20

Slide 20 text

Solution ・フォームの全体像・所要時間（入力終了までのステップ）を明示する・ユーザーの要求を満たせないケースを事前に示す（リアルタイムな反映が難しいときには混雑状態を示すなど） 20

Slide 21

Slide 21 text

自由度の低い入力フォーム・全角入力のみ入力可能・区切り文字が要求される・桁数を入力した瞬間などでフォーカスが遷移するなどの 21

Slide 22

Slide 22 text

Solution ・表記ゆれを許容する ⇒半角と全角、ひらがなとカタカナ、大文字と小文字、ハイフンなどの区切り文字の有無をシステム側で変換して処理できるようにする ⇒郵便番号やクレジット番号などの入力欄は、入力ケースを明示する・フォーカス移動はユーザーに任せる 22

Slide 23

Slide 23 text

状況を自分の力でコントロールできないもの =ストレス？？ 23

Slide 24

Slide 24 text

アクセシビリティを考えてみること① 24 「ユーザー視点の感覚」と「開発者視点の感覚」って乖離が大きい

Slide 25

Slide 25 text

Webのビジュアルデザインが求める「美しさ」 ×アートとしての美しさ〇ユーザーが見たときに、きちんと伝わり、整って見えるという意味の美しさ 25 アクセシビリティを考えてみること②

Slide 26

Slide 26 text

26 改めてありがとうございました！🎉