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
1k
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
9月12日(木)開催のDesign Dontaku vol.4で発表された内容です。
https://connpass.com/event/326897/
株式会社ヌーラボ
PRO
September 13, 2024
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
ヌーラボが取り組む RevOpsのこれまでとこれから
nulabinc
PRO
1
92
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
61
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
40
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
740
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
400
僕たちは何を守っているのか?ビジネスを守る、ヌーラボのセキュリティ実践
nulabinc
PRO
1
78
Snowflake九州ユーザー会
nulabinc
PRO
0
72
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
1.1k
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
460
Other Decks in Business
See All in Business
坂ノ途中 会社紹介資料 /Introduction
ontheslope
0
2k
SlackでDMを使わない方が いい理由を説明してみた
walkersumida
1
1.2k
株式会社PROOF_エンジニア向け採用資料
proof
0
230
株式会社TableCheck - 会社紹介 Company Profile
tablecheckac
0
1.1k
Meet SYNTHESIS
minateramoto
PRO
0
100
Expedi𝓪®️ USA Contact Numbers: Complete 2-0-2-5 Support Guide
travelhupsupport
0
130
Top 07 Ways to connect QuickBooks Payroll Support Number
qbpayroll1
0
200
enechain company deck
enechain
PRO
9
120k
처음 시작하는 사람들을 위한 GA4 핸즈온 | 2025년 7월 세미나
datarian
0
740
Meet SYNTHESIS
minateramoto
PRO
0
150
Morght 会社紹介資料_LAST UPDATED 2025.7
morght
1
4k
5 Best Way to Find QuickBooks Enterprise Support Number
quickbooksenterprisesupport
0
100
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
A designer walks into a library…
pauljervisheath
207
24k
Designing for humans not robots
tammielis
253
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
KATA
mclloyd
30
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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. ご清聴 ありがとうございました