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
1.2k
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
9月12日(木)開催のDesign Dontaku vol.4で発表された内容です。
https://connpass.com/event/326897/
株式会社ヌーラボ
PRO
September 13, 2024
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
Streamlitとロール関連の話
nulabinc
PRO
0
49
サクフェス2024_ヌーラボ原_CSと開発
nulabinc
PRO
0
14
チームの力を成果に変える、次世代のマネジメント術 〜中小企業の生産性革命〜
nulabinc
PRO
0
35
チームワークマネジメントとは
nulabinc
PRO
0
11
チームの未来を支えるバックログスイーパーという役割
nulabinc
PRO
0
8
ヌーラボが取り組む RevOpsのこれまでとこれから
nulabinc
PRO
1
200
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
180
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
66
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
810
Other Decks in Business
See All in Business
enechain company deck
enechain
PRO
9
140k
メドピアグループ紹介資料
medpeer_recruit
10
140k
We are Wunderbar, Culture Deck Full
wunderbar
0
1.4k
【UMed】Company Deck_250923
ryushu
0
140
NewGrads(新卒)向け_株式会社プレイド_会社説明資料_27卒
plaid
PRO
0
520
「つくる」から「考える」へ ― PdMの重⼼をシフトさせるために
itsukikacky
0
810
社内請負スクラムから脱却する〜複雑性に適応するスクラムチームの作り方〜
yasuhirokimesawa
1
160
朝日新聞社 ITエンジニア キャリア採用 紹介資料
asahi_cto
0
740
株式会社SAFELY 会社紹介 / Company
safely_pr
1
4.2k
セーフィー株式会社(Safie Inc.) 会社紹介資料
safie_recruit
6
380k
人が辞めても困らない職場へ - AIでノウハウがたまる仕組み、文化を作る実践術
nkajihara
3
540
Mercari Group Code of Conduct
mercari_inc
0
210
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
How to train your dragon (web standard)
notwaldorf
97
6.3k
KATA
mclloyd
PRO
32
15k
Facilitating Awesome Meetings
lara
56
6.6k
Designing Experiences People Love
moore
142
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Bash Introduction
62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
Unsuck your backbone
ammeep
671
58k
Being A Developer After 40
akosma
91
590k
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. ご清聴 ありがとうございました