Android端末でChromeのデベロッパーツールを使いたいとき、USBデバッグでパソコンから操作する方法が一般的に有名です。 Chrome DevToolをスマホだけで使う方法を紹介します。出先でパソコン開くスペース無い！ってときに参考に… 概要 Chromium系のカスタムブラウザKiwi Browserを使うだけ！ kiwi browserは拡張機能をAndroidで動かす際に使うアプリで有名ですが、実はChrome DevToolが標準で搭載されています。 使いみち Webサイトで気になるアニメーションとかあったら調べたくなりますよね？ そんなとき、 電車の中… 手打ちHTMLじゃなくてview-source:じゃ確認できない コードがMinifyされてる こんな時に使えると思います。覚えておいて皆さん電車でドヤ顔でDevTool開きましょう。 使い方 普通にページにアクセスして、三点リーダーのメニューを出すとあらまぁ「Developer Tools」があります。以上。 タブもちゃんと押せるますし、なんなら律儀にダークテーマにも対応してます。 Lighthouseは割と高確率で使えないです。

Android端末でChromeのデベロッパーツールを使いたいとき、USBデバッグでパソコンから操作する方法が一般的に有名です。 Chrome DevToolをスマホだけで使う方法を紹介します。出先でパソコン開くスペース無い！ってときに参考に… 概要 Chromium系のカスタムブラウザKiwi Browserを使うだけ！ kiwi browserは拡張機能をAndroidで動かす際に使うアプリで有名ですが、実はChrome DevToolが標準で搭載されています。 使いみち Webサイトで気になるアニメーションとかあったら調べたくなりますよね？ そんなとき、 電車の中… 手打ちHTMLじゃなくてview-source:じゃ確認できない コードがMinifyされてる こんな時に使えると思います。覚えておいて皆さん電車でドヤ顔でDevTool開きましょう。 使い方 普通にページにアクセスして、三点リーダーのメニューを出すとあらまぁ「Developer Tools」があります。以上。 タブもちゃんと押せるますし、なんなら律儀にダークテーマにも対応してます。 Lighthouseは割と高確率で使えないです。 良いお年を。私はコミケに行けません

私にとって、本やオンラインコースは、Webデザインと開発の専門性を学び改善する上で非常に役立つリソースと見なすことができます。 それは、学習プロセスにおける著者の経験の統合であり、その知識を実際のプロジェクトに適用するためです。 価格を見ずにスキルを伸ばすための最高のコーディング本やコースを購入できるのであれば、これ以上の方法はありません。 でも、例えば、学生の頃は最初は収入がなかったので、プログラミングの本を買うのにお金をかけるのは大変でした。 そのため、私たちは通常、経済を気にせずに専門家から無料の電子書籍やコーディングコースを収集しています。 私の投稿では、私が収集した無料のHTML、CSS、およびJavascriptの電子書籍を紹介します。 うまくいけば、それはWeb開発プロセスであなたを助けるでしょう。 （余裕があれば、本を購入するか、これらの電子書籍の著者をサポートする必要があります！） Free HTML, CSS Ebooks Learn to Code HTML & CSS Link Website HTML5 Notes for Professionals book Link Website Htmldog Link Website CSS Animation Link Website Web Visual Effects with CSS3 Link Website The Magic Of CSS Link Website HTML & CSS Is Hard Link Website DIVE INTO HTML5 Link Website Dash Link Website MaintainableCSS Link Website MarkSheet Link Website Enduring CSS Link Website HTML Canvas Deep Dive Link Website Code Guide Link Website A Guide to HTML5 and CSS3 Link Website Understanding Flexbox Link Website Free Ebooks Javascript Eloquent JavaScript Link Website JavaScript (ES2015+) Enlightenment Link Website JavaScript® Notes for Professionals book Link Website JavaScript Garden Link Website JavaScript Info Link Website The Odin Project Link Website JS Books Link Website Robust Client-Side JavaScript Link Website Front-End Web Apps with Plain JavaScript Link Website Human JavaScript Link Website Learn JS Link Website Courses HTML, CSS, Javascript Free Foundations of Front-End Web Development Link Website Web Development By Doing: HTML / CSS From Scratch Link Website Master the Basics of HTML5 & CSS3: Beginner Web Development Link Website Learn HTML5 and CSS3 From Scratch Link Website Learn JavaScript (Code Cademy) Link Website Computer programming (Khan Academy) Link Website Javascript Essentials Link Website 詳細については、en.niemvuilaptrinh.comをご覧ください。

ウェブアクセシビリティ 再入門 アクセシビリティ accessibility ヌメロニム ： a11y 意味 ： 接近できること、近づきやすさ、動かされやすいこと、影響を受けやすいこと ウェブアクセシビリティとは 高齢者、障害者を含むあらゆるユーザーを意識してユニバーサルで高品質なウェブUXを提供すること 障害の種別 身体障害 知的障害 精神障害 難病 ※ 参考 ： 「障害者」の定義って？障害者手帳や障害年金などのサービス、障害者雇用の対象、支援の根拠となる障害者総合支援法について説明します。 − LITALICO仕事ナビ 障害種別ごとの定義 身体障害 身体障害者福祉法 第四条 知的障害 知的障害者福祉法 精神障害 精神保健及び精神障害者福祉に関する法律 第五条 トピック ： 「障害」か「障がい」か、「障碍」も．．． 国 ： 「障害」 文部科学省で審議中 地方自治体の一部 ： 「障がい」 「害」の文字に、マイナスなイメージがある メディア ： 「障害」 常用漢字表記に基づき漢字表記 単に表記を変えれば解決するものではなく慎重な機論が求められる 障害者 ： 賛否あり 障害の「害＝ハンディ」は障害者自身ではなく社会の側にあり、敢えて「害」を隠してほしくない 「障碍」の「碍」は常用漢字外のためあまり採用されない 本稿では「障害」を利用します 障害者のネット利用状況 障害者総数 2014〜2016年統計（pdf） 936万人 トピック ： 障害者の外食行動 【参考】 もっと楽しみたい！～視覚障がい者にとっての外食～（pdf） 興味深い項目 単独で外出する 月1回以上外食する ネットの活用、事前にメニューを知りたい ネット利用率 2012年統計 障害者全体 ： 53.0% 視覚障害者 ： 91.7% 聴覚障害者 ： 93.4% 肢体不自由者 ： 82.7% 増加傾向、アップトレンド 日本人全体 2017年統計 80.9％ ネット利用障害者数 496万人 人口比 3.9% 増加傾向、アップトレンド ネット利用目的 趣味、娯楽 調べる 情報発信 勉強、仕事 交流、コミュニケーション 障害ハンディキャップの補完 文字情報、テロップの充実 文字メディアの音声化 意思伝達の文字化・音声化ツール 肢体不自由の補完 トピック ： 障害者に便利なアプリ iPhone、iPad用・障害のある人に便利なアプリ一覧 インターネット利用に際して困ること コンピューターウイルスや不正アクセス 障害に配慮したホームページの少なさ 障害を補う機器、ソフトが少ない 障害者向きの情報不足 画面がごちゃごちゃして見にくい 欲しい情報を見つけるのが困難 通信費用が高い わからないときに相談する人がいない 利用者同士のトラブルが怖い 以上のような感情を与える状態 ＝ 「アクセシビリティが悪い」状態 極端に粗悪なサイトでは健常者も感じることがある内容のため想像しやすい 障害に関する統計 人数 障害者総数 2014〜2016年統計（pdf） 936万人 人口比 7.4% 身体障害者 436万人 精神障害者 361万人 身体障害者数内訳 2006年統計 視覚障害 31万人 聴覚・言語障害 64万人 肢体不自由 181万人 インターネット利用率 2012年統計（pdf） 視覚障害 91.7% 聴覚・言語障害 93.4% 肢体不自由 82.7% 精神障害 46.8% 合計 視覚障害 28万人 聴覚障害 59万人 肢体不自由 149万人 精神障害者 168万人 合計 404万人 人口比 3.2% （あえてビジネス観点で言うとこれがマーケット規模） モダンウェブアクセシビリティ 「Dos and don'ts on designing for accessibility」 英国内務省 (UK Home Office) Accessibility Dos and don'ts on designing for accessibility Dos and don'ts on designing for accessibility（pdf） https://accessible-usable.net/2018/11/entry_181119.html ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版 対象分類 自閉症スペクトラム コミュニケーションや言語に関する困難 スクリーンリーダー 視覚障害 見えない、見えにくい ロービジョン 視覚障害 矯正できない視機能の弱さ 低視力、見えにくい ディスレクシア 文字の読み書きに限定した困難 発達性読み書き障害 身体障害・運動障害 聴覚障害・難聴 不安状態 不安障害 不安神経症、強迫性障害 詳細 自閉症スペクトラム すること しないこと 単純な色を使う 鮮やかでまぶしい色を使う 優しい言葉で書く 比喩表現や慣用句を使う 簡単な文章と箇条書きを使う 区切りのない長文で文字の壁をつくる 説明的なボタンにする 曖昧で予測不能なボタンにする 簡潔で一貫したレイアウトを構築する 複雑でごちゃごちゃしたレイアウトを構築する スクリーンリーダー すること しないこと 画面の説明、動画の書き起こしを提供する 画像や動画だけで情報を表示する 順序立てた論理的なレイアウトにする ページ全体にコンテンツをバラバラに配置する HTML5を使ってコンテンツを構造化する 文字サイズや配置に頼って構造化する キーボードだけで使えるように構築する マウスや画面の使用を強制する リンクや見出しは説明的に書く リンクや見出しを役立たずにする ロービジョン すること しないこと 良いコントラストと読みやすい文字サイズを使う 低いコントラストと小さい文字サイズを使う すべての情報をウェブページ（HTML）で公開する ダウンロードの中に情報を埋没させる 色、形、文字の組み合わせで意味を伝える 色だけで意味を伝える 順序立てた論理的なレイアウトにする（拡大表示したとき文章は折り返して表示される） ページ全体にコンテンツを広げる（拡大表示したとき横スクロールが必要(※)） ボタンと通知は文脈にそって配置する 文脈と分離した操作をさせる ディスレクシア すること しないこと 理解を助けるために画像や図を使う 長い文章で大きな文字のブロックをつくる 文字揃えは左揃えで一貫したレイアウトを保つ 下線を引く、斜体を使う、大文字で書く 他のフォーマットでの情報提供を検討する（例：音声や動画） 前のページを覚えておく必要がある（リマインドやヒントを出しましょう） コンテンツを短く、明確に、簡潔にする 正確なことばで入力する必要がある（予測入力や自動補正の機能を使いましょう） 背景と文字のコントラストを利用者が変更できる(※) ひとつの場所に情報をつめこむ 身体障害・運動障害 すること しないこと クリック可能な範囲を大きくする 精密さを要求する 操作対象のあいだを空ける 操作対象を近づけすぎる キーボードや音声だけで使えるように設計する マウスをたくさん動かす必要がある 携帯電話やタッチスクリーンを想定して設計する(※) 短い時間制限をもうける ショートカットを提供する タイピングやスクロールで利用者を疲れさせる 聴覚障害・難聴 すること しないこと やさしい言葉で書く 難しい言葉や比喩表現を使う 字幕を使うか。動画の書き起こし文を提供する 音声や動画のみで情報提供する 順序立てた論理的なレイアウトにする 複雑なレイアウトやメニューをつくる 小見出し、画像、動画でコンテンツを分割する 長いかたまりのコンテンツを読ませる 予約や手続きの際に利用者が希望するコミュニケーション支援を利用できる 電話を唯一の連絡手段にする 不安状態 すること しないこと 操作を終えるのに十分な時間がある ユーザーを急がせたり、必要のない時間制限を設ける これから何が起こるかを説明する 次にすることや時間制限で利用者を混乱させる 重要な情報は明確に 操作の結果がはっきりわからない 操作を完了するために必要なサポートを提供する サポートやヘルプにアクセスしづらい ユーザーが送信前に入力内容を確認できる 質問に回答したユーザーを放置しない 詳細補足 拡大表示したとき横スクロールが必要 レスポンシブレイアウトで解決できる 背景と文字のコントラストを利用者が変更できる 現在では多くのOSにおいて設定が対応している OSの設定、操作を妨げない対応が重要 携帯電話やタッチスクリーンを想定して設計する レスポンシブレイアウトが重要 実際に利用している様子がわかる動画から学ぶ 障害者のウェブページ利用方法の紹介ビデオ 視覚障害者（全盲）のウェブページ利用方法 （YouTube再生） スクリーンリーダーを利用 点字ディスプレイも併用 FireFoxを利用 適切なマークアップ、見出し構造（h要素）が重要 画像の代替テキスト（alt属性）が必要 alt属性が存在しないとファイル名や「画像」が読み上げられる 表組み（table要素）の適切なマークアップが重要 画像認証の代替手段を用意する 各ページを識別できるタイトル要素をつける 入力系にラベル要素やタイトルを付与する スマホ、タブレットへのa11y配慮 JISX8341-3 （JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）） を意識する JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト 難易度は A ＜ AA ＜ AAA 満たせない場合は、情報への代替アクセス手段を提供する まとめ まずは JIS X 8341-3:2016 達成基準 早見表（レベルA & AA） の適合レベル A から実装してみる 視覚障害者（弱視）のウェブページ利用方法 （YouTube再生） 弱視 先天的、右：0.02（矯正）、左：光を感じる グラフィック利用 Win拡大鏡による画面拡大 支援技術なしでテキストを200%までサイズ変更できるようにする 白背景がまぶしいため明暗反転する JIS達成基準のコントラスト比は 4.5:1 以上 自動再生されるカルーセル等画像スライドは一時停止機能が必要 スマホ、タブレットも反転表示利用 まとめ OSやブラウザの設定、操作を妨げない対応、確認が重要 肢体不自由者のウェブページ利用方法 （WMVダウンロード） 手指に力がなく書籍のページをめくるのも困難 活字メディアが利用できない トラックボールを腕全体の動きで操作 オンスクリーンキーボードを利用 IE利用 文字が小さく読みづらい 横スクロールは発生してほしくない 情報発信に挑戦中 まとめ むしろデジタル機器やウェブコンテンツはより必要とされている 今日からできること Lighthouse Accessibility スコアアップ Lighthouse 頻出メッセージと対策例 Background and foreground colors do not have a sufficient contrast ratio 背景色と前景色は十分なコントラスト比を持っていません。 対策例 UIデザイナーと相談する Color Contrast Analyzer レベルAA、レベルAAA への対応色（コントラスト値）を導き出せる Heading elements are not in a sequentially-descending order 見出し要素は順番に降順ではありません 対策例 見出しの階層構造を適正化する before 　　　　h3 h1 　　　　　　h4 　　　　　　　　　　h6 　　h2 　　　　　　　　h5 after h1 　　h2 　　　　h3 　　　　　　h4 　　h2 　　　　h3 Image elements do not have [alt] attributes img要素 には alt属性 がありません 対策例 推奨 alt属性値に写真画像の内容を表現するテキストを設定 alt属性値にテキスト入り画像のテキストを設定 文字情報はテキスト文字列でマークアップする ミニマム対応 空値のalt属性を設定 読み上げ対象から外れる Form elements do not have associated labels フォーム要素 に ラベル要素 が関連付けられていません 対策例 入力系に label要素 を設定するか、title属性 を設置する before <input type="checkbox"> メールニュースを希望する <select> 〜 </select> after <input type="checkbox" for="form-mailnews"> <label id="form-mailnews"> メールニュースを希望する</label> <select title="都道府県"> 〜 </select> Links do not have a discernible name リンクには識別可能な名前がありません 対策例 a要素 内にアンカーテキストを付与するか、alt属性、title属性、aria-label属性 などのいずれかにテキストを設定する before <a href="hoge"></a> after <a href="hoge">記事ページへ</a> <a href="hoge"><img alt="記事ページへ"></a> <a href="hoge"><span title="記事ページへ"></span></a> <a href="hoge" aria-label="記事ページへ"></a> frame or iframe elements do not have a title frame要素 または iframe要素 にタイトルがありません 対策例 frame要素、iframe要素 に title属性 を設定する before <iframe>></iframe> after <iframe title="YouTube動画"></iframe> ARIA IDs are not unique ARIAIDは一意ではありません 対策例 id属性値 を1ドキュメント内で重複させない さらに深堀りする レベルAA、レベルAAA 実装を目指す 【参考】JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト WAI-ARIA を利用する role属性 aria属性 【参考】WAI-ARIAを活用したフロントエンド実装 | CodeGrid ウェブアクセシビリティについてまとめ ユニバーサルで高品質なウェブUX 国内ユーザー約500万人 ウェブは必要とされている 容易なことから着手しよう BE、FEが協力して調査、改修しよう 最後に So long as you can sweeten another’s pain, life is not in vain. 人の苦しみをやわらげてあげられる限り、生きている意味はある ヘレン・ケラー Helen Adams Keller 1880年 - 1968年 世界で最も有名な障害者

＞＞ 【注意】 本稿を記事として再編し、新しく投稿し直しましたので、そちらのご利用をおすすめします ウェブアクセシビリティ 再入門 アクセシビリティ accessibility ヌメロニム ： a11y 意味 ： 接近できること、近づきやすさ、動かされやすいこと、影響を受けやすいこと ウェブアクセシビリティとは 高齢者、障害者を含むあらゆるユーザーを意識してユニバーサルで高品質なウェブUXを提供すること 障害の種別 身体障害 知的障害 精神障害 難病 ※ 参考 ： 「障害者」の定義って？障害者手帳や障害年金などのサービス、障害者雇用の対象、支援の根拠となる障害者総合支援法について説明します。 − LITALICO仕事ナビ 障害種別ごとの定義 身体障害 身体障害者福祉法 第四条 知的障害 知的障害者福祉法 精神障害 精神保健及び精神障害者福祉に関する法律 第五条 トピック ： 「障害」か「障がい」か、「障碍」も．．． 国 ： 「障害」 文部科学省で審議中 地方自治体の一部 ： 「障がい」 「害」の文字に、マイナスなイメージがある メディア ： 「障害」 常用漢字表記に基づき漢字表記 単に表記を変えれば解決するものではなく慎重な機論が求められる 障害者 ： 賛否あり 障害の「害＝ハンディ」は障害者自身ではなく社会の側にあり、敢えて「害」を隠してほしくない 「障碍」の「碍」は常用漢字外のためあまり採用されない 本稿では「障害」を利用します 障害者のネット利用状況 障害者総数 2014〜2016年統計（pdf） 936万人 トピック ： 障害者の外食行動 【参考】 もっと楽しみたい！～視覚障がい者にとっての外食～（pdf） 興味深い項目 単独で外出する 月1回以上外食する ネットの活用、事前にメニューを知りたい ネット利用率 2012年統計 障害者全体 ： 53.0% 視覚障害者 ： 91.7% 聴覚障害者 ： 93.4% 肢体不自由者 ： 82.7% 増加傾向、アップトレンド 日本人全体 2017年統計 80.9％ ネット利用障害者数 496万人 人口比 3.9% 増加傾向、アップトレンド ネット利用目的 趣味、娯楽 調べる 情報発信 勉強、仕事 交流、コミュニケーション 障害ハンディキャップの補完 文字情報、テロップの充実 文字メディアの音声化 意思伝達の文字化・音声化ツール 肢体不自由の補完 トピック ： 障害者に便利なアプリ iPhone、iPad用・障害のある人に便利なアプリ一覧 インターネット利用に際して困ること コンピューターウイルスや不正アクセス 障害に配慮したホームページの少なさ 障害を補う機器、ソフトが少ない 障害者向きの情報不足 画面がごちゃごちゃして見にくい 欲しい情報を見つけるのが困難 通信費用が高い わからないときに相談する人がいない 利用者同士のトラブルが怖い 以上のような感情を与える状態 ＝ 「アクセシビリティが悪い」状態 極端に粗悪なサイトでは健常者も感じることがある内容のため想像しやすい 障害に関する統計 人数 障害者総数 2014〜2016年統計（pdf） 936万人 人口比 7.4% 身体障害者 436万人 精神障害者 361万人 身体障害者数内訳 2006年統計 視覚障害 31万人 聴覚・言語障害 64万人 肢体不自由 181万人 インターネット利用率 2012年統計（pdf） 視覚障害 91.7% 聴覚・言語障害 93.4% 肢体不自由 82.7% 精神障害 46.8% 合計 視覚障害 28万人 聴覚障害 59万人 肢体不自由 149万人 精神障害者 168万人 合計 404万人 人口比 3.2% （あえてビジネス観点で言うとこれがマーケット規模） モダンウェブアクセシビリティ 「Dos and don'ts on designing for accessibility」 英国内務省 (UK Home Office) Accessibility Dos and don'ts on designing for accessibility Dos and don'ts on designing for accessibility（pdf） https://accessible-usable.net/2018/11/entry_181119.html ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版 対象分類 自閉症スペクトラム コミュニケーションや言語に関する困難 スクリーンリーダー 視覚障害 見えない、見えにくい ロービジョン 視覚障害 矯正できない視機能の弱さ 低視力、見えにくい ディスレクシア 文字の読み書きに限定した困難 発達性読み書き障害 身体障害・運動障害 聴覚障害・難聴 不安状態 不安障害 不安神経症、強迫性障害 詳細 自閉症スペクトラム すること しないこと 単純な色を使う 鮮やかでまぶしい色を使う 優しい言葉で書く 比喩表現や慣用句を使う 簡単な文章と箇条書きを使う 区切りのない長文で文字の壁をつくる 説明的なボタンにする 曖昧で予測不能なボタンにする 簡潔で一貫したレイアウトを構築する 複雑でごちゃごちゃしたレイアウトを構築する スクリーンリーダー すること しないこと 画面の説明、動画の書き起こしを提供する 画像や動画だけで情報を表示する 順序立てた論理的なレイアウトにする ページ全体にコンテンツをバラバラに配置する HTML5を使ってコンテンツを構造化する 文字サイズや配置に頼って構造化する キーボードだけで使えるように構築する マウスや画面の使用を強制する リンクや見出しは説明的に書く リンクや見出しを役立たずにする ロービジョン すること しないこと 良いコントラストと読みやすい文字サイズを使う 低いコントラストと小さい文字サイズを使う すべての情報をウェブページ（HTML）で公開する ダウンロードの中に情報を埋没させる 色、形、文字の組み合わせで意味を伝える 色だけで意味を伝える 順序立てた論理的なレイアウトにする（拡大表示したとき文章は折り返して表示される） ページ全体にコンテンツを広げる（拡大表示したとき横スクロールが必要(※)） ボタンと通知は文脈にそって配置する 文脈と分離した操作をさせる ディスレクシア すること しないこと 理解を助けるために画像や図を使う 長い文章で大きな文字のブロックをつくる 文字揃えは左揃えで一貫したレイアウトを保つ 下線を引く、斜体を使う、大文字で書く 他のフォーマットでの情報提供を検討する（例：音声や動画） 前のページを覚えておく必要がある（リマインドやヒントを出しましょう） コンテンツを短く、明確に、簡潔にする 正確なことばで入力する必要がある（予測入力や自動補正の機能を使いましょう） 背景と文字のコントラストを利用者が変更できる(※) ひとつの場所に情報をつめこむ 身体障害・運動障害 すること しないこと クリック可能な範囲を大きくする 精密さを要求する 操作対象のあいだを空ける 操作対象を近づけすぎる キーボードや音声だけで使えるように設計する マウスをたくさん動かす必要がある 携帯電話やタッチスクリーンを想定して設計する(※) 短い時間制限をもうける ショートカットを提供する タイピングやスクロールで利用者を疲れさせる 聴覚障害・難聴 すること しないこと やさしい言葉で書く 難しい言葉や比喩表現を使う 字幕を使うか。動画の書き起こし文を提供する 音声や動画のみで情報提供する 順序立てた論理的なレイアウトにする 複雑なレイアウトやメニューをつくる 小見出し、画像、動画でコンテンツを分割する 長いかたまりのコンテンツを読ませる 予約や手続きの際に利用者が希望するコミュニケーション支援を利用できる 電話を唯一の連絡手段にする 不安状態 すること しないこと 操作を終えるのに十分な時間がある ユーザーを急がせたり、必要のない時間制限を設ける これから何が起こるかを説明する 次にすることや時間制限で利用者を混乱させる 重要な情報は明確に 操作の結果がはっきりわからない 操作を完了するために必要なサポートを提供する サポートやヘルプにアクセスしづらい ユーザーが送信前に入力内容を確認できる 質問に回答したユーザーを放置しない 詳細補足 拡大表示したとき横スクロールが必要 レスポンシブレイアウトで解決できる 背景と文字のコントラストを利用者が変更できる 現在では多くのOSにおいて設定が対応している OSの設定、操作を妨げない対応が重要 携帯電話やタッチスクリーンを想定して設計する レスポンシブレイアウトが重要 実際に利用している様子がわかる動画から学ぶ 障害者のウェブページ利用方法の紹介ビデオ 視覚障害者（全盲）のウェブページ利用方法 （YouTube再生） スクリーンリーダーを利用 点字ディスプレイも併用 FireFoxを利用 適切なマークアップ、見出し構造（h要素）が重要 画像の代替テキスト（alt属性）が必要 alt属性が存在しないとファイル名や「画像」が読み上げられる 表組み（table要素）の適切なマークアップが重要 画像認証の代替手段を用意する 各ページを識別できるタイトル要素をつける 入力系にラベル要素やタイトルを付与する スマホ、タブレットへのa11y配慮 JISX8341-3 （JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）） を意識する JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト 難易度は A ＜ AA ＜ AAA 満たせない場合は、情報への代替アクセス手段を提供する まとめ まずは JIS X 8341-3:2016 達成基準 早見表（レベルA & AA） の適合レベル A から実装してみる 視覚障害者（弱視）のウェブページ利用方法 （YouTube再生） 弱視 先天的、右：0.02（矯正）、左：光を感じる グラフィック利用 Win拡大鏡による画面拡大 支援技術なしでテキストを200%までサイズ変更できるようにする 白背景がまぶしいため明暗反転する JIS達成基準のコントラスト比は 4.5:1 以上 自動再生されるカルーセル等画像スライドは一時停止機能が必要 スマホ、タブレットも反転表示利用 まとめ OSやブラウザの設定、操作を妨げない対応、確認が重要 肢体不自由者のウェブページ利用方法 （WMVダウンロード） 手指に力がなく書籍のページをめくるのも困難 活字メディアが利用できない トラックボールを腕全体の動きで操作 オンスクリーンキーボードを利用 IE利用 文字が小さく読みづらい 横スクロールは発生してほしくない 情報発信に挑戦中 まとめ むしろデジタル機器やウェブコンテンツはより必要とされている 今日からできること Lighthouse Accessibility スコアアップ Lighthouse 頻出メッセージと対策例 Background and foreground colors do not have a sufficient contrast ratio 背景色と前景色は十分なコントラスト比を持っていません。 対策例 UIデザイナーと相談する Color Contrast Analyzer レベルAA、レベルAAA への対応色（コントラスト値）を導き出せる Heading elements are not in a sequentially-descending order 見出し要素は順番に降順ではありません 対策例 見出しの階層構造を適正化する before 　　　　h3 h1 　　　　　　h4 　　　　　　　　　　h6 　　h2 　　　　　　　　h5 after h1 　　h2 　　　　h3 　　　　　　h4 　　h2 　　　　h3 Image elements do not have [alt] attributes img要素 には alt属性 がありません 対策例 推奨 alt属性値に写真画像の内容を表現するテキストを設定 alt属性値にテキスト入り画像のテキストを設定 文字情報はテキスト文字列でマークアップする ミニマム対応 空値のalt属性を設定 読み上げ対象から外れる Form elements do not have associated labels フォーム要素 に ラベル要素 が関連付けられていません 対策例 入力系に label要素 を設定するか、title属性 を設置する before <input type="checkbox"> メールニュースを希望する <select> 〜 </select> after <input type="checkbox" for="form-mailnews"> <label id="form-mailnews"> メールニュースを希望する</label> <select title="都道府県"> 〜 </select> Links do not have a discernible name リンクには識別可能な名前がありません 対策例 a要素 内にアンカーテキストを付与するか、alt属性、title属性、aria-label属性 などのいずれかにテキストを設定する before <a href="hoge"></a> after <a href="hoge">記事ページへ</a> <a href="hoge"><img alt="記事ページへ"></a> <a href="hoge"><span title="記事ページへ"></span></a> <a href="hoge" aria-label="記事ページへ"></a> frame or iframe elements do not have a title frame要素 または iframe要素 にタイトルがありません 対策例 frame要素、iframe要素 に title属性 を設定する before <iframe>></iframe> after <iframe title="YouTube動画"></iframe> ARIA IDs are not unique ARIAIDは一意ではありません 対策例 id属性値 を1ドキュメント内で重複させない さらに深堀りする レベルAA、レベルAAA 実装を目指す 【参考】JIS X 8341-3: 2016の適合レベルA、AA、AAA 全リスト WAI-ARIA を利用する role属性 aria属性 【参考】WAI-ARIAを活用したフロントエンド実装 | CodeGrid ウェブアクセシビリティについてまとめ ユニバーサルで高品質なウェブUX 国内ユーザー約500万人 ウェブは必要とされている 容易なことから着手しよう BE、FEが協力して調査、改修しよう 最後に So long as you can sweeten another’s pain, life is not in vain. 人の苦しみをやわらげてあげられる限り、生きている意味はある ヘレン・ケラー Helen Adams Keller 1880年 - 1968年 世界で最も有名な障害者