こんにちは！ もじもじトークの関口です。今回は「アクセシビリティ」のお話をします。
アクセシビリティってなに？ あまり耳にしたことないなぁ…。なんかむずかしそう…。そう思う人が多いかもしれませんね。
まずは、アクセシビリティについてWikipediaを見てみましょう。
『アクセシビリティ（英: accessibility）とは、高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合いをいう。』とあります。
アクセシビリティを理解するために、いくつか思い浮かんだ事例があります。
・高速道路の看板が運転中でも読みやすいか？
・駅構内の案内板が見やすいか？
・トイレを示すマークがわかりやすいか？
実際に写真で確かめてみましょう！
< http://goo.gl/kfSkXa
>
僕は文字に興味があるので、可読性（読みやすさ）や視認性（わかりやすさ）に目がいってしまいましたが、フォントの字形や太さ、文字色や背景色によって人間の感性に与える印象が大きく変わることがよくわかります。
アクセシビリティってなに？ あまり耳にしたことないなぁ…。なんかむずかしそう…。そう思う人が多いかもしれませんね。
まずは、アクセシビリティについてWikipediaを見てみましょう。
『アクセシビリティ（英: accessibility）とは、高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合いをいう。』とあります。
アクセシビリティを理解するために、いくつか思い浮かんだ事例があります。
・高速道路の看板が運転中でも読みやすいか？
・駅構内の案内板が見やすいか？
・トイレを示すマークがわかりやすいか？
実際に写真で確かめてみましょう！
< http://goo.gl/kfSkXa
>
僕は文字に興味があるので、可読性（読みやすさ）や視認性（わかりやすさ）に目がいってしまいましたが、フォントの字形や太さ、文字色や背景色によって人間の感性に与える印象が大きく変わることがよくわかります。
●事例を詳しく観察して見みよう
サンプルで掲載した高速道路の看板の文字は、iPadやMacOSに搭載されいるシステムフォント「ヒラギノ角ゴ」ベースの書体です。
以前の高速道路の標識案内の書体はもうちょっと小ぶりの文字でしたが、認識しやすいようにフトコロの大きな文字が最近は多いようです。
豊中の「豊」の文字をじっくり観察してみてください。あれっ、なんか変ですね。横線が一本足りません。間違ったわけなく、わざと間引いているようです。
運転中は、標識の文字を一瞬で認識してもらうことが大事なので、省略した場合としない場合の視認性実験を行って、書体変更を決定したという講演を聞いたことあります。
字形だけでなく、レイアウトや背景色、文字色などの違いにより、視認性にどう変化を与えるかは重要ですよね。
・高速道路の標識 ヒラギノ書体に iPadと同じ
（2010年12月14日 朝日新聞DIGITAL）
< http://www.asahi.com/special/playback/OSK201012140052.html
>
トイレの案内を示すマーク（ピクトグラム）の形や背景色、施設内の案内版の字形や背景色は、人間の感性に認識違いを生じさせない配慮がとても重要なのです。
●インターネットにおけるアクセシビリティ
みなさんは一日のうち何時間ぐらい、パソコンやスマートフォン、タブレットの画面を見ていますか？
僕は少なくとも一日10時間は、パソコンやスマートフォンと格闘してると思います。ブラウザ上で調べごとしたり、ブラウザベースのツールで仕事することが半分くらいあるかもしれません。
ですから、ブラウザコンテンツが使いやすいかどうかはすごく重要ですね。
「アクセシビリティ」は広義な概念です。似た言葉で「Webアクセシビリティ」というのもあります。Webコンテンツにおけるアクセシビリティを指します。
インターネットのWebページは、基本的にHTML（HyperText Markup Language）とCSS（Cascading Style Sheets）で構成されています。それをコンピュータが理解して画面に表示しているわけです。
「目が不自由な方にWebコンテンツの内容を読みあげる」「耳が不自由な方に動画や映画をキャプションで伝える」ということが重要になります。
では、Webアクセシビリティは、障害者を助けるための概念なのでしょうか？もちろん、その観点もすごく大事だけど、Webアクセシビリティは誰にとっても大切な品質基準なのです。
●JIS X 8314-3:2010
Webアクセシビリティを知るためには、JIS X 8314-3:2010を避けて通るわけにはいきません。
ということで、JIS X 8314-3:2010の規格表（冊子）を入手して読んでみましょう。たぶん、眠くなります。というか日本語が難解で理解できません。わかりやすく解説しているWebサイトを参考にするか、セミナーに参加することをおすすめします。
僕が最近参加した、アクセシビリティーのビギナーズ向け勉強会の参加者ブログページをご紹介します。
・アクセシビリティー・ビギナーズ向けのセミナー「AccSell Meetup 008」に参加して（masuP.net 2015-02-15）
< http://masup.net/2015/02/accsell-meetup-008-2015.shtml
>
●ブラウザ上の写真や文字画像
難解な日本語で書いてあるJIS X 8314-3:2010規格表はまたの機会に学ぶこととして、二つ具体的な例で説明します。
まず、自分のプロフィール写真をサイトに掲載するとき、alt記述はどうしますか？
< http://goo.gl/s4TDKy
>
1. 関口浩之の顔写真
2. 顔写真：関口浩之
3. 俺の写真
4. 写真01
5. 画像差替時にalt記述の訂正し忘れた
iOSのVoiceOverを使ったことがある人は想像がつくと思いますが、1番か2番が適切ですよね。3〜5番だと目が不自由な方には情報が伝わらない、または間違った案内をすることになります。そんな間違いはしないと思いますが、たまにみかけます。
文字画像のalt記述はどうでしょうか？ テキストをそのまま記述すればいいのに、2〜4番は完全に残念ですね…。
1. もじもじトーク
2. 見出し画像
3. alt記述しわすれた（文字と勘違いしてた）
4. 文字画像差替時にalt記述の訂正し忘れた
デザイン性を考慮して、今までは見出しやグローバルナビゲーションを文字画像にすることが多かったような気がします。
最近は、画像文字を極力使用せずシステムフォントで表示するWebサイトが増えてきたと思います。font-familyの記述により、なるべく綺麗な書体が表示させる工夫もできますし。
あとは、Webフォントを上手に活用する方法があります。一時期、日本語Webフォントは遅くて残念な時代がありましたが、今はかなり改善されてます。
●アクセシビリティでITの未来を明るくする
僕自身もWebアクセシビリティについては最近、勉強しはじめたので、深く理解できていません。
なので、今回は専門的なことは書いていません。この半年、Webアクセシビリティのセミナーやコミュニティの集まりに5回以上参加しました。
Webコンテンツが「マシーンリーダブルであること」はますます重要になると肌で感じています。
情報提供する側にとっても、情報を受け取る側にとっても、みんながアクセシビリティをあたり前に配慮すれば、楽しいITの未来が開けると言ってもいいのではないでしょうか。
「何かを伝える」ためにWebサイトを公開しているわけですから、画像データのalt属性記述がWebアクセシビリティに配慮しているかどうかはとても大事なことだし、素敵なことだと思うんです。
まずはそんなところから取り組むのもありだと思ってます。
Google検索エンジンに対してマシーンリーダブルであれば、配信する側にとってはSEO対策になるのでメリットがあります。受け取る側にとっては、欲しい情報が正しく取得できる機会が増えます。
これからはインターネットを活用したライフスタイルに変化するのは間違いないですし、「マシーンリーダブルであること」はWeb制作の当たり前のお作法と考えるのがいいと思います。
肩にあまり力いれずに、Webアクセシビリティのことをもっともっと学んでいこうと思っています。
2015年2月3日に神戸で開催された「アクセシビリティの祭典」で、僕が登壇した際のスライドを共有します。フォントとアクセシビリティに興味のある方はぜひご覧ください。
< http://goo.gl/VmzHSQ
>
【せきぐち・ひろゆき】sekiguchi115@gmail.com
Webフォント エバンジェリスト
< http://fontplus.jp/
>
1960年生まれ。群馬県桐生市出身。電子機器メーカーにて日本語DTPシステムやプリンタ、プロッタの仕事に10年間従事した後、1995年にインターネット関連企業へ転じる。1996年、大手インターネット検索サービスの立ち上げプロジェクトのコンテンツプロデューサを担当。
その後、ECサイトのシステム構築やコンサルタント、インターネット決済事業の立ち上げプロジェクトなどに従事。現在は、日本語Webフォントサービス「FONTPLUS（フォントプラス）」の普及のため、日本全国を飛び回っている。
小さい頃から電子機器やオーディオの組み立て（真空管やトランジスタの時代から）や天体観測などが大好き。パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ。家電オタク。テニスフリーク。
サンプルで掲載した高速道路の看板の文字は、iPadやMacOSに搭載されいるシステムフォント「ヒラギノ角ゴ」ベースの書体です。
以前の高速道路の標識案内の書体はもうちょっと小ぶりの文字でしたが、認識しやすいようにフトコロの大きな文字が最近は多いようです。
豊中の「豊」の文字をじっくり観察してみてください。あれっ、なんか変ですね。横線が一本足りません。間違ったわけなく、わざと間引いているようです。
運転中は、標識の文字を一瞬で認識してもらうことが大事なので、省略した場合としない場合の視認性実験を行って、書体変更を決定したという講演を聞いたことあります。
字形だけでなく、レイアウトや背景色、文字色などの違いにより、視認性にどう変化を与えるかは重要ですよね。
・高速道路の標識 ヒラギノ書体に iPadと同じ
（2010年12月14日 朝日新聞DIGITAL）
< http://www.asahi.com/special/playback/OSK201012140052.html
>
トイレの案内を示すマーク（ピクトグラム）の形や背景色、施設内の案内版の字形や背景色は、人間の感性に認識違いを生じさせない配慮がとても重要なのです。
●インターネットにおけるアクセシビリティ
みなさんは一日のうち何時間ぐらい、パソコンやスマートフォン、タブレットの画面を見ていますか？
僕は少なくとも一日10時間は、パソコンやスマートフォンと格闘してると思います。ブラウザ上で調べごとしたり、ブラウザベースのツールで仕事することが半分くらいあるかもしれません。
ですから、ブラウザコンテンツが使いやすいかどうかはすごく重要ですね。
「アクセシビリティ」は広義な概念です。似た言葉で「Webアクセシビリティ」というのもあります。Webコンテンツにおけるアクセシビリティを指します。
インターネットのWebページは、基本的にHTML（HyperText Markup Language）とCSS（Cascading Style Sheets）で構成されています。それをコンピュータが理解して画面に表示しているわけです。
「目が不自由な方にWebコンテンツの内容を読みあげる」「耳が不自由な方に動画や映画をキャプションで伝える」ということが重要になります。
では、Webアクセシビリティは、障害者を助けるための概念なのでしょうか？もちろん、その観点もすごく大事だけど、Webアクセシビリティは誰にとっても大切な品質基準なのです。
●JIS X 8314-3:2010
Webアクセシビリティを知るためには、JIS X 8314-3:2010を避けて通るわけにはいきません。
ということで、JIS X 8314-3:2010の規格表（冊子）を入手して読んでみましょう。たぶん、眠くなります。というか日本語が難解で理解できません。わかりやすく解説しているWebサイトを参考にするか、セミナーに参加することをおすすめします。
僕が最近参加した、アクセシビリティーのビギナーズ向け勉強会の参加者ブログページをご紹介します。
・アクセシビリティー・ビギナーズ向けのセミナー「AccSell Meetup 008」に参加して（masuP.net 2015-02-15）
< http://masup.net/2015/02/accsell-meetup-008-2015.shtml
>
●ブラウザ上の写真や文字画像
難解な日本語で書いてあるJIS X 8314-3:2010規格表はまたの機会に学ぶこととして、二つ具体的な例で説明します。
まず、自分のプロフィール写真をサイトに掲載するとき、alt記述はどうしますか？
< http://goo.gl/s4TDKy
>
1. 関口浩之の顔写真
2. 顔写真：関口浩之
3. 俺の写真
4. 写真01
5. 画像差替時にalt記述の訂正し忘れた
iOSのVoiceOverを使ったことがある人は想像がつくと思いますが、1番か2番が適切ですよね。3〜5番だと目が不自由な方には情報が伝わらない、または間違った案内をすることになります。そんな間違いはしないと思いますが、たまにみかけます。
文字画像のalt記述はどうでしょうか？ テキストをそのまま記述すればいいのに、2〜4番は完全に残念ですね…。
1. もじもじトーク
2. 見出し画像
3. alt記述しわすれた（文字と勘違いしてた）
4. 文字画像差替時にalt記述の訂正し忘れた
デザイン性を考慮して、今までは見出しやグローバルナビゲーションを文字画像にすることが多かったような気がします。
最近は、画像文字を極力使用せずシステムフォントで表示するWebサイトが増えてきたと思います。font-familyの記述により、なるべく綺麗な書体が表示させる工夫もできますし。
あとは、Webフォントを上手に活用する方法があります。一時期、日本語Webフォントは遅くて残念な時代がありましたが、今はかなり改善されてます。
●アクセシビリティでITの未来を明るくする
僕自身もWebアクセシビリティについては最近、勉強しはじめたので、深く理解できていません。
なので、今回は専門的なことは書いていません。この半年、Webアクセシビリティのセミナーやコミュニティの集まりに5回以上参加しました。
Webコンテンツが「マシーンリーダブルであること」はますます重要になると肌で感じています。
情報提供する側にとっても、情報を受け取る側にとっても、みんながアクセシビリティをあたり前に配慮すれば、楽しいITの未来が開けると言ってもいいのではないでしょうか。
「何かを伝える」ためにWebサイトを公開しているわけですから、画像データのalt属性記述がWebアクセシビリティに配慮しているかどうかはとても大事なことだし、素敵なことだと思うんです。
まずはそんなところから取り組むのもありだと思ってます。
Google検索エンジンに対してマシーンリーダブルであれば、配信する側にとってはSEO対策になるのでメリットがあります。受け取る側にとっては、欲しい情報が正しく取得できる機会が増えます。
これからはインターネットを活用したライフスタイルに変化するのは間違いないですし、「マシーンリーダブルであること」はWeb制作の当たり前のお作法と考えるのがいいと思います。
肩にあまり力いれずに、Webアクセシビリティのことをもっともっと学んでいこうと思っています。
2015年2月3日に神戸で開催された「アクセシビリティの祭典」で、僕が登壇した際のスライドを共有します。フォントとアクセシビリティに興味のある方はぜひご覧ください。
< http://goo.gl/VmzHSQ
>
【せきぐち・ひろゆき】sekiguchi115@gmail.com
Webフォント エバンジェリスト
< http://fontplus.jp/
>
1960年生まれ。群馬県桐生市出身。電子機器メーカーにて日本語DTPシステムやプリンタ、プロッタの仕事に10年間従事した後、1995年にインターネット関連企業へ転じる。1996年、大手インターネット検索サービスの立ち上げプロジェクトのコンテンツプロデューサを担当。
その後、ECサイトのシステム構築やコンサルタント、インターネット決済事業の立ち上げプロジェクトなどに従事。現在は、日本語Webフォントサービス「FONTPLUS（フォントプラス）」の普及のため、日本全国を飛び回っている。
小さい頃から電子機器やオーディオの組み立て（真空管やトランジスタの時代から）や天体観測などが大好き。パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ。家電オタク。テニスフリーク。