Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアクセシビリティを考えてみる
Search
yud0uhu
July 17, 2021
Design
1
13
Webアクセシビリティを考えてみる
LOCAL学生部LSM本プレゼント企画でのLTスライドです。
【参考書籍】
https://wgn-obs.shop-pro.jp/?pid=144269533
by Jul 17, 2021
yud0uhu
July 17, 2021
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
260
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.1k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.7k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.5k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
940
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
120
ブログを自作した話
yud0uhu
1
21
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
28
Other Decks in Design
See All in Design
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
7
74k
The Golden Whitney
ohtristanart
PRO
0
200
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
710
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
170
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
300
NAHO SHIMONO_Portfolio2025
nahohphp
0
340
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
4.5k
Echoes Boomerang
artcloudyu
PRO
0
100
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
520
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
500
Tableau曲線表現講座(2024.11.21)
cielo1985
0
320
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Making Projects Easy
brettharned
116
6.1k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Optimizing for Happiness
mojombo
377
70k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
304
45k
Transcript
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 改めてありがとうご ざいました!🎉