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
21
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
390
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
990
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
170
ブログを自作した話
yud0uhu
1
25
Other Decks in Design
See All in Design
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
140
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.3k
minpaku-community-scrum-patterns
norinity1103
1
230
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
810
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
440
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
140
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Yumika Yamada Portfolio
yumii
0
1.2k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
730
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
590
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Balancing Empowerment & Direction
lara
1
540
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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 改めてありがとうご ざいました!🎉