悪い実装例から学ぶウェブアクセシビリティ改善のヒント

Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All
Rights Reserved. ウェブアクセシビリティ改善のヒント 2024.09.12 Design Dontaku vol.4 @uraranbon 悪い実装例から学ぶ

Rights Reserved. 2024年1⽉ヌーラボに⼊社 2024年6⽉1⽇東京から福岡へ引っ越し 2024年6⽉3⽇アニサキスに当たり⼊院 @uraranbon ⾃⼰紹介マークアップ‧フロントエンドエンジニア

Rights Reserved. 今日のテーマ  ウェブアクセシビリティ〜大声で言えない過去の失敗談を添えて〜

Rights Reserved. ウェブアクセシビリティとは？   利⽤者の障害などの有無やその度合い、年齢や利⽤環境にかかわらず、あらゆる⼈々がウェブサイトで提供されている情報やサービスを利⽤できること、またその到達度を意味します政府広報オンライン https://www.gov-online.go.jp/useful/article/202310/2.html#ﬁrstSection

Rights Reserved. ウェブアクセシビリティとは？  

Rights Reserved. ウェブアクセシビリティ改善のヒント 5選悪い実装例から学ぶ

Rights Reserved. １ ❌ ⾊だけで情報を伝える

Rights Reserved. ❌ 色だけで情報を伝える   ⾊覚特性のある⽅など適切に情報を得られない可能性のある方：

Rights Reserved. ❌ 色だけで情報を伝える  

Rights Reserved. ❌ 色だけで情報を伝える   赤色の識別が難しい方（Protanopia）の見え方緑色の識別が難しい方（Deuteranopia）の見え方すべての色の識別が難しい方（Achromatopsia）の見え方青色の識別が難しい方（Tritanopia）の見え方

Rights Reserved. ❌ 色だけで情報を伝える   赤緑青

Rights Reserved. ❌ 色だけで情報を伝える   赤色の識別が難しい方（Protanopia）の見え方緑色の識別が難しい方（Deuteranopia）の見え方すべての色の識別が難しい方（Achromatopsia）の見え方青色の識別が難しい方（Tritanopia）の見え方

Rights Reserved. ⭕ 色だけで情報を伝えない（リンクには下線を引く）   赤色の識別が難しい方（Protanopia）の見え方緑色の識別が難しい方（Deuteranopia）の見え方すべての色の識別が難しい方（Achromatopsia）の見え方青色の識別が難しい方（Tritanopia）の見え方

Rights Reserved. ⭕ 色だけで情報を伝えない  

Rights Reserved. Protanopia（赤色を感じることができない） Deuteranopia（緑色を感じることができない） Achromatopsia（すべての色を感じることができない） Tritanopia（青色を感じることができない） ⭕ 色だけで情報を伝えない  

Rights Reserved. ⭕ 色だけで情報を伝えない  

Rights Reserved. 好きなうどんチェーンは？ ◼ ウエスト ◼ 牧のうどん ◼ 資さんうどん ◼ 丸亀製麺 ◼ その他 ⭕ 色だけで情報を伝えない  

Rights Reserved. 好きなうどんチェーンは？ ◼ ウエスト ◼ 牧のうどん ◼ 資さんうどん ◼ 丸亀製麺 ◼ その他ウエスト牧のうどん資さんうどん丸亀製麺その他 ⭕ 色だけで情報を伝えない  

Rights Reserved. 2 ❌ ⾃動で動くコンテンツを置く

Rights Reserved. ❌ 自動で動くコンテンツを置く   動くものに気を逸らされる⽅（注意⽋陥障害）など適切に情報を得られない可能性のある方：

Rights Reserved. ❌ 自動で動くコンテンツを置く  

Rights Reserved. ❌ 自動で動くコンテンツを置く   気が散る…

Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く  

Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く   スクリーンショット元： https://waic.jp/translations/WCAG21/#pause-stop-hide

Rights Reserved. ⭕ 自動再生しない、あるいは一時停止ボタンを置く  

Rights Reserved. 3 ❌ 画像の代替テキストが説明不⾜

Rights Reserved. ❌ 画像の代替テキストが説明不足   ⽀援技術を使ってサイトを閲覧する⽅など適切に情報を得られない可能性のある方：

Rights Reserved. ❌ 画像の代替テキストが説明不足   <img src="image.jpg" alt="写真" />

Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする   <img src="image.jpg" alt="株式会社ヌーラボの本社エントランスの写真。ヌーラボのマスコットキャラクターである大きな黒い生き物「ヌーマン」が描かれており、スポットライトが当たっている。ヌーマンの右上には「nulab」というロゴが表示されている。" />

Rights Reserved. ⭕ 画像の内容がわかる代替テキストにする  

Rights Reserved. 代替テキストを書いてみよう #デザドン代替テキスト（alt属性）付きでポストしてみよう

Rights Reserved. 4 ❌ リンクに「詳しくはこちら」と書く

Rights Reserved. ❌ リンクに「詳しくはこちら」と書く   ⽀援技術を使ってサイトを閲覧する⽅など適切に情報を得られない可能性のある方：

Rights Reserved. ❌ リンクに「詳しくはこちら」と書く  

Rights Reserved. ⭕リンク先の情報を説明する  

Rights Reserved. 5 ❌ キーボードで操作した際、今どこにいるかわからない

Rights Reserved. ❌ キーボードで操作した際、今どこにいるかわからない   ⾝体に障害がある⽅、キーボードで操作する⽅など適切に情報を得られない可能性のある方：

Rights Reserved. ❌ キーボードで操作した際、今どこにいるかわからない  

Rights Reserved.   ⭕輪郭線のCSSを消さない  

Rights Reserved.   ⭕輪郭線のCSSを消さない   https://www.gov.uk/

Rights Reserved. タイムアップ時間的にこの辺にしますが…

Rights Reserved. タイムアップ • 視覚障害に対するサポート ◦ 拡大機能に対応 • 認知障害に対するサポート ◦ 複雑なインターフェースを避ける • 聴覚障害に対するサポート ◦ 字幕や文字起こしを提供 ◦ 音声コンテンツの書き起こしやリアルタイム字幕 • 運動障害に対するサポート ◦ 全ての要素をキーボードのみで操作可能

Rights Reserved. タイムアップできることはまだまだあります

Rights Reserved. おすすめのサイト https://a11yc.com/city-komaru/

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 デジタル庁

Rights Reserved. おすすめの本ウェブ・インクルーシブデザイン Webのアクセシビリティとインクルージョンを実現するための実践ガイド画像引用元： https://amzn.asia/d/022JLnWY

Rights Reserved. おすすめの本カラー・アクセシビリティ多くの人に適したデザインのために知っておきたいすべて。画像引用元： https://amzn.asia/d/0adIrack

Rights Reserved. 画像利用元イラスト：ソコスト https://soco-st.com/ 　　　　：いらすとや https://www.irasutoya.com/

ヌーラボでは仲間を募集しています画像貼る（画像どこか聞く）

Rights Reserved. ご清聴ありがとうございました

悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント

悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント

More Decks by 株式会社ヌーラボ

Other Decks in Business

Featured

Transcript

悪い実装例から学ぶウェブアクセシビリティ改善のヒント

悪い実装例から学ぶウェブアクセシビリティ改善のヒント