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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

yud0uhu

More Decks by yud0uhu

Other Decks in Design

Featured

Transcript