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
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
Search
株式会社ヌーラボ
PRO
September 13, 2024
Business
1
55
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
9月12日(木)開催のDesign Dontaku vol.4で発表された内容です。
https://connpass.com/event/326897/
株式会社ヌーラボ
PRO
September 13, 2024
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
4つの基本的な組織形態を知る ~ミンツバーグの組織論 7つの類型と力学、そしてその先へ~ より GWD in Nagoya
nulabinc
PRO
1
42
必要なのは客観性。組織変革をもたらす、より良い「対話」を生み出すための活動 #scrummikawa
nulabinc
PRO
3
670
ヌーラボカスタマーサクセスチームのBacklog活用
nulabinc
PRO
0
230
言葉で「ヌーラボらしさ」をどう届ける? グローバルチームでコラボレーションする大切さ
nulabinc
PRO
1
79
タスクの可視化は争いをなくす!? 夏休みを乗り切る 宿題プロジェクトマネジメント
nulabinc
PRO
1
220
情シスの申請業務におけるBacklog活用術
nulabinc
PRO
0
240
Backlogと業務プロセスのちょっといい関係
nulabinc
PRO
0
220
創造が易しく楽しいチー ムを作るために
nulabinc
PRO
3
200
フルリモートの会社のコーポレートITチームが取り組んでいるDXへの階段の上り方
nulabinc
PRO
1
160
Other Decks in Business
See All in Business
株式会社9課🧠会社紹介資料(2024)/About section9
abenger
5
26k
株式会社EventHub 会社紹介資料
eventhub
0
27k
Findy - 人生で熱くなれるなにかを探している誰かへ / Letter from Findy
findyinc
7
140k
XP祭り2024 『アジャイルとは何か?なぜアジャイルなのか?』1年間のアジャイルコーチとの1on1を通してやっとわかったアジャイル
yasuhirokimesawa
0
120
Beyond Engineering: The Future of Platforms @ FastFlow Conf, Sep 2024
mfpais
PRO
0
130
組織課題をアジャイルに解決する働き⽅ 〜チームに閉じず組織横断で取り組む仕組み〜
curanosuke
0
210
新卒採用会社説明資料|ASSIGN Inc.
assigninc
1
330
NOT A HOTEL SOFTWARE DECK
notahotel
6
63k
パシフィックメディカル会社説明資料/ PMed Company Guide
medley
0
120
24_Recruitment_v2.1_Compressed.pdf
sonix
0
270
アッテル会社紹介資料/culture deck
attelu
10
13k
test
okamoto0913
0
330
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Ruby is Unlike a Banana
tanoku
96
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
How to Think Like a Performance Engineer
csswizardry
16
1k
Web development in the modern age
philhawksworth
205
10k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Designing with Data
zakiwarfel
98
5.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
640
YesSQL, Process and Tooling at Scale
rocio
167
14k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Invisible Customer
myddelton
119
13k
Transcript
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ウェブアクセシビリティ 改善のヒント 2024.09.12 Design Dontaku vol.4 @uraranbon 悪い実装例から学ぶ
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 2024年1⽉ ヌーラボに⼊社 2024年6⽉1⽇ 東京から福岡へ引っ越し 2024年6⽉3⽇ アニサキスに当たり⼊院 @uraranbon ⾃⼰紹介 マークアップ‧フロントエンドエンジニア
None
None
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 今日のテーマ ウェブアクセシビリティ 〜大声で言えない過去の失敗談を添えて〜
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ウェブアクセシビリティとは? 利⽤者の障害などの有無やその度合い、 年齢や利⽤環境にかかわらず、 あらゆる⼈々がウェブサイトで提供されている 情報やサービスを利⽤できること、 またその到達度を意味します 政府広報オンライン https://www.gov-online.go.jp/useful/article/202310/2.html#firstSection
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ウェブアクセシビリティとは?
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ウェブアクセシビリティ 改善のヒント 5選 悪い実装例から学ぶ
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 1 ❌ ⾊だけで情報を伝える
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える ⾊覚特性のある⽅など 適切に情報を得られない可能性のある方:
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える 赤色の識別が難しい方(Protanopia)の見え方 緑色の識別が難しい方(Deuteranopia)の見え方 すべての色の識別が難しい方(Achromatopsia)の見え方 青色の識別が難しい方(Tritanopia)の見え方
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える 赤 緑 青
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える 赤色の識別が難しい方(Protanopia)の見え方 緑色の識別が難しい方(Deuteranopia)の見え方 すべての色の識別が難しい方(Achromatopsia)の見え方 青色の識別が難しい方(Tritanopia)の見え方
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 色だけで情報を伝える 赤色の識別が難しい方(Protanopia)の見え方 緑色の識別が難しい方(Deuteranopia)の見え方 すべての色の識別が難しい方(Achromatopsia)の見え方 青色の識別が難しい方(Tritanopia)の見え方
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 色だけで情報を伝えない(リンクには下線を引く) 赤色の識別が難しい方(Protanopia)の見え方 緑色の識別が難しい方(Deuteranopia)の見え方 すべての色の識別が難しい方(Achromatopsia)の見え方 青色の識別が難しい方(Tritanopia)の見え方
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 色だけで情報を伝えない(リンクには下線を引く) 赤色の識別が難しい方(Protanopia)の見え方 緑色の識別が難しい方(Deuteranopia)の見え方 すべての色の識別が難しい方(Achromatopsia)の見え方 青色の識別が難しい方(Tritanopia)の見え方
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 色だけで情報を伝えない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. Protanopia(赤色を感じることができない) Deuteranopia(緑色を感じることができない) Achromatopsia(すべての色を感じることができない) Tritanopia(青色を感じることができない) ⭕ 色だけで情報を伝えない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 色だけで情報を伝えない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 好きなうどんチェーンは? ◼ ウエスト ◼ 牧のうどん ◼ 資さんうどん ◼ 丸亀製麺 ◼ その他 ⭕ 色だけで情報を伝えない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 好きなうどんチェーンは? ◼ ウエスト ◼ 牧のうどん ◼ 資さんうどん ◼ 丸亀製麺 ◼ その他 ウエスト 牧のうどん 資さんうどん 丸亀製麺 その他 ⭕ 色だけで情報を伝えない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 2 ❌ ⾃動で動くコンテンツを置く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 自動で動くコンテンツを置く 動くものに気を逸らされる⽅ (注意⽋陥障害)など 適切に情報を得られない可能性のある方:
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 自動で動くコンテンツを置く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 自動で動くコンテンツを置く 気が散る…
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く スクリーンショット元: https://waic.jp/translations/WCAG21/#pause-stop-hide
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 3 ❌ 画像の代替テキストが説明不⾜
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 画像の代替テキストが説明不足 ⽀援技術を使って サイトを閲覧する⽅など 適切に情報を得られない可能性のある方:
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ 画像の代替テキストが説明不足 <img src="image.jpg" alt="写真" />
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする <img src="image.jpg" alt="株式会社ヌーラボの本社エントランスの写真。ヌーラボの マスコットキャラクターである大きな黒い生き物「ヌーマン」が描かれており、スポットライ トが当たっている。ヌーマンの右上には「nulab」というロゴが表示されている。" />
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 代替テキストを書いてみよう #デザドン 代替テキスト(alt属性)付きでポストしてみよう
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 4 ❌ リンクに「詳しくはこちら」と書く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ リンクに「詳しくはこちら」と書く ⽀援技術を使って サイトを閲覧する⽅など 適切に情報を得られない可能性のある方:
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ リンクに「詳しくはこちら」と書く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ リンクに「詳しくはこちら」と書く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ リンクに「詳しくはこちら」と書く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ リンクに「詳しくはこちら」と書く
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕リンク先の情報を説明する
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕リンク先の情報を説明する
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 5 ❌ キーボードで操作した際、今どこにいるかわからな い
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ キーボードで操作した際、今どこにいるかわからない ⾝体に障害がある⽅、 キーボードで操作する⽅など 適切に情報を得られない可能性のある方:
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ❌ キーボードで操作した際、今どこにいるかわからない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕輪郭線のCSSを消さない
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕輪郭線のCSSを消さない https://www.gov.uk/
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ⭕輪郭線のCSSを消さない https://www.gov.uk/
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. タイムアップ 時間的に この辺にしますが…
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. タイムアップ • 視覚障害に対するサポート ◦ 拡大機能に対応 • 認知障害に対するサポート ◦ 複雑なインターフェースを避ける • 聴覚障害に対するサポート ◦ 字幕や文字起こしを提供 ◦ 音声コンテンツの書き起こしや リアルタイム字幕 • 運動障害に対するサポート ◦ 全ての要素をキーボードのみで操作可能
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. タイムアップ できることは まだまだあります
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. おすすめのサイト https://a11yc.com/city-komaru/
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. おすすめの資料 ウェブアクセシビリティ 導入ガイドブック https://www.digital.go.jp/assets/contents/node/basic_page/field_r ef_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76e aa/20240329_introduction_to_weba11y.pdf デジタル庁
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. おすすめの本 ウェブ・インクルーシブデザイン Webのアクセシビリティとインクルージョンを実 現するための実践ガイド 画像引用元: https://amzn.asia/d/022JLnWY
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. おすすめの本 カラー・アクセシビリティ 多くの人に適したデザインのために知っておき たいすべて。 画像引用元: https://amzn.asia/d/0adIrack
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. 画像利用元 イラスト:ソコスト https://soco-st.com/ :いらすとや https://www.irasutoya.com/
ヌーラボでは仲間を募集しています 画像貼る(画像どこか聞く)
Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ご清聴 ありがとうございました