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
990
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
9月12日(木)開催のDesign Dontaku vol.4で発表された内容です。
https://connpass.com/event/326897/
株式会社ヌーラボ
PRO
September 13, 2024
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
20
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
30
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
680
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
310
僕たちは何を守っているのか?ビジネスを守る、ヌーラボのセキュリティ実践
nulabinc
PRO
1
68
Snowflake九州ユーザー会
nulabinc
PRO
0
65
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
1.1k
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
440
ライティングチームだからこそできた、「どことでも繋がれるチーム」づくりの結果 / Technical Writing Meetup vol.38
nulabinc
PRO
0
110
Other Decks in Business
See All in Business
VISASQ: ABOUT DEV TEAM
eikohashiba
4
30k
FERMENSTATION Recruitment
fermenstation
0
290
メモ帳マニュアル
takamiyata
0
200
そのAWSコスト、もっと下げられるかも? 150社超のコスト分析で見えた「鉄板」削減Tips
o2mami
1
2.6k
なぜConfluence Cloudだったのか?〜『運用効率と将来性』から見る最適解と、予期せぬ課題を乗り越えた移行のリアル~ / Why-we-choose-confluence-cloud
medley
0
180
DMM.com アルファ室採用案内資料
dmmcom2025
0
230
株式会社カウシェ Company Deck
kauche
2
200k
OpenBridge株式会社 会社紹介資料 / We are hiring
openbridge
0
180
株式会社Domuz会社紹介資料(採用)
kimpachi_d
0
34k
タケウチグループRecruit
takeuchigroup
0
6.8k
【DearOne】Dear Newest Member
hrm
2
10k
Feedback in Action
lycorptech_jp
PRO
0
200
Featured
See All Featured
Visualization
eitanlees
146
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Writing Fast Ruby
sferik
628
62k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Ace a Technical Interview
jacobian
277
23k
Automating Front-end Workflow
addyosmani
1370
200k
Facilitating Awesome Meetings
lara
54
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Six Lessons from altMBA
skipperchong
28
3.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
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. ご清聴 ありがとうございました