LOCAL学生部LSM本プレゼント企画でのLTスライドです。

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

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

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
改めてありがとう
ございました！🎉