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
740
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
9月12日(木)開催のDesign Dontaku vol.4で発表された内容です。
https://connpass.com/event/326897/
株式会社ヌーラボ
PRO
September 13, 2024
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
890
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
330
ライティングチームだからこそできた、「どことでも繋がれるチーム」づくりの結果 / Technical Writing Meetup vol.38
nulabinc
PRO
0
72
4つの基本的な組織形態を知る ~ミンツバーグの組織論 7つの類型と力学、そしてその先へ~ より GWD in Nagoya
nulabinc
PRO
2
190
必要なのは客観性。組織変革をもたらす、より良い「対話」を生み出すための活動 #scrummikawa
nulabinc
PRO
3
1.3k
ヌーラボカスタマーサクセスチームのBacklog活用
nulabinc
PRO
0
370
言葉で「ヌーラボらしさ」をどう届ける? グローバルチームでコラボレーションする大切さ
nulabinc
PRO
1
130
タスクの可視化は争いをなくす!? 夏休みを乗り切る 宿題プロジェクトマネジメント
nulabinc
PRO
2
310
情シスの申請業務におけるBacklog活用術
nulabinc
PRO
0
390
Other Decks in Business
See All in Business
株式会社CINC 会社案内/Company introduction
cinchr
6
51k
コミュニティと横断組織を活かす“三菱電機”のre:Invent
licux
1
150
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1k
Fake “Agile” is the Norm: How to Instill Agility, not Agile Practices: Hands On Agile
johannarothman
PRO
0
1.1k
RAKSUL Introduction / English Ver.
raksulrecruiting
0
370
merpay-Overview
mercari_inc
7
170k
SHIFT ASIA 会社説明資料 V2.1
shiftasiarec
0
200
VISASQ: ABOUT US
eikohashiba
15
480k
わわわ理念制作所 紹介資料
yuadachi
1
440
【全ポジション共通】㈱エグゼクション/会社紹介資料
exe_recruit
1
1k
ヒューマンスターチャイルド株式会社採用資料
starchild
0
4.5k
意見交換での思いやり 〜会議ファシリテーションその前に〜 / Consideration in the exchange of opinions
pauli
0
260
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
A designer walks into a library…
pauljervisheath
205
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Writing Fast Ruby
sferik
628
61k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Statistics for Hackers
jakevdp
797
220k
Being A Developer After 40
akosma
89
590k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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. ご清聴 ありがとうございました