いますぐ実行できる10の“インクルーシブデザイン”テクニック【WAB月例セミナーレポート】インフォアクシアの植木真氏が、Webアクセシビリティの変化と、すぐ実行できて効果が高いテクニックを解説。Web広告研究会が開催およびレポートしたセミナー記事を、クリエイティブ・コモンズライセンスのもと一部編集して転載したものです。オリジナルの記事はWeb広告研究会のサイトでご覧ください。「障害のある人がWebを使えるようにすること」よりも包括的な「インクルーシブデザイン」へと変わりつつあるWebアクセシビリティ。アドバタイザーズ協会Web広告研究会(以下、Web広告研究会)は7月23日に月例セミナーを開催。~アクセシビリティを再確認しよう~」というテーマのもと、第2部ではWebアクセシビリティに造形の深い3名が登壇し、それぞれ20分間のショートプレゼンを行った。登壇したのは登壇したのは、インフォアクシアの植木氏。Webサイトを・より多くのユーザーが・より多くの利用環境で・より快適に利用できるにするために最低限やるべきことを「Webアクセシビリティ確保・向上の基本の『キ』」として紹介した。代表取締役)「障害をもつ人への対応」から「特定の人を排除せず多くの人が使えるように」へ植木氏によれば、Webアクセシビリティが対象とする範囲は、時代とともに変わってきているのだという。W3Cで提唱された当初のWebアクセシビリティは「障害のある人がWebを使えるようにすること」を目指していた。最近では、Webアクセシビリティが対象とする範囲が広がっているのだという。Design)』が外せなくなっている。2.0)には60を超える達成基準がある。「具体的に何をやればよいのか分からない」という声があがっていた。そこで植木氏は、具体的にやるべきことを簡潔にまとめた「Webアクセシビリティ確保・向上の基本の『キ』」というドキュメントを作り、配布している。国際」ライセンスの下に提供されています。このドキュメントで解説しているのは、次の10項目だ:・ページの内容が分かるページタイトルを記述する・見出しやリストなどの文書構造をマークアップする・リンクテキストは、リンク先が分かる文言にする・情報を伝えている画像に代替テキストを提供する・情報を伝える色の使い方に注意する・ユーザーがコンテンツを拡大表示できるようにする・キーボードだけでも操作できるようにする・フォーム・コントロールのラベルや説明をマークアップする・エラーメッセージではエラー箇所と修正方法を明示する・動画にキャプション(字幕)を提供する植木氏が解説していった内容をそれぞれ紹介する。>要素を使ってページのタイトルを記述しておけば、スクリーンリーダーの読み上げ機能をオンにしてページを開くと、タイトルが最初に読み上げられる。視覚障害者でも目的のページを開けたかどうかすぐに判断できる。>で小見出しのように、文書の構造をあらわすHTMLタグを指定することで、スクリーンリーダーで読み上げるときに「見出しだけを拾い読みする」、「h2だけを読み上げる」といった使い方ができるようになり、ページのアウトラインを把握したり、ページ内で目的のコンテンツを探しやすくなったりする。>の要素を使うことで、スクリーンリーダーは「3項目のリストです」と内容の読み上げ前に情報を付加できる。このように正しくマークアップすることで、マシンリーダブルなコンテンツにできる。リンクテキストは、リンク先が分かる文言にするHTML内にテキストリンクをおくときに、リンクテキストを「こちら」と書くのではなく、遷移先のページタイトルなど具体的な文言を入れることで、リンク先へ移動するかどうかを判断できるようになる。情報を伝えている画像に代替テキストを提供する画像を使用するときには、HTMLのimg要素のalt属性で代替テキストを提供する。具体的には、画像に文字があればその文字を入れ、グラフならそのグラフの情報を入れる。することで、画像が伝えている情報を、画像を見ることができないユーザーにも提供できる。植木氏がおすすめするのは、写真の場合は「写真:XXXX」と記述して、その画像が写真であることが分かるようにすることだ。「写真に写っているものをもっと知りたければ、本人が見ることができなかったとしても誰かに教えてもらうことができる。写真だと分かるようにすることが大事」(植木氏)。情報を伝える色の使い方に注意する色のコントラスト比を、4.5:1以上にすることで、色覚の多様性だけでなく、スマートフォンを屋外の明るい場所で使っている場合などにも見やすさを確保できる。コントラスト比をチェックできる無償のツールがあるので、利用するとよい。ユーザーがコンテンツを拡大表示できるようにするWebページに文字サイズ変更のボタンを用意するのではなく、PCなら拡大機能を使ったときに拡大できるか、スマートフォンならピンチアウトして拡大できるかをチェックする。文字サイズを固定してはいけない。キーボードだけでも操作できるようにする特にキーボード操作時にフォーカスの現在位置を示す「フォーカスインジケーター」が画面で常に表示されているようにしよう。マウス操作のときに邪魔に感じるようであれば、マウスオーバー時とキーボード操作時でスタイルを使い分けるとよい。フォーム・コントロールのラベルや説明をマークアップする入力フォームの項目を<label>要素でマークアップすることで、スクリーンリーダーの読み上げでも確実に読み上げられるようになるほか、ラベルテキストをクリック(タップ)すると項目を選んだ操作になり、ユーザビリティが向上する。チェックボックスやラジオボタンのような小さなフォーム要素で効果が高い。エラーメッセージではエラー箇所と修正方法を明示する入力フォームで「エラーです」とだけ表示するような、何をどう修正すればよいか分からないメッセージでは、ユーザーは離脱してしまう。何をどう修正すればいいのかを分かりやすく伝えられているか、実際に入力フォームのエラーメッセージを表示して確認しよう。動画にキャプション(字幕)を提供する動画にキャプションを加えることで、聴覚障害者だけでなく、無音で動画を再生しているユーザーにも内容が伝わる。アクセシビリティ確保は効果を検証しにくいものではあるが、植木氏によれば、動画にキャプションを追加したことで閲覧数や閲覧完了率が向上したデータが得られているという。基本の「キ」は、WebサイトからA4サイズ(カラー)印刷用のPDFファイル版をダウンロード可能だ。ライセンスの下に提供されています。(19/12/13)Webアクセシビリティのよくある10の勘違い。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。シェアのビジネススクール】コミュニティマネジャーアシスタント募集です(東京勤務)。2/19(水)@ステーションコンファレンス東京デジタルマーケティング、大企業の利用率上位ツールは「ネット広告」「SEO/SEM」「SNS」【富士通総研調べ】データ活用に必要なデータのクレンジングや統合が簡単にできるって本当ですか?/フロムスクラッチの矢矧さんと井戸端さんに聞いてきたリピーターを呼び込む「究極の集客方法」。検索オプションより目的の検索結果となるように検索条件を絞り込める検索のこと。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。