アクセシビリティ・チェックポイント（４）- テキストに相対サイズを使用する？

（４）テキストに相対サイズを使用する？

これも「イメージ要素には ALT 属性を付ける」ぐらい有名なものですが、最近はこのチェック項目に対しての重要度が変わりつつあります。

本来は文字の大きさを変更させようとしても、絶対サイズ（pxなど）を使用していると大きくならない場合があるため、サイズを指定する際には相対サイズ（emなど）を使用するようにする、というルールがあり、一般的に浸透していました。

チェックツールでもスタイルシート内の px を探す事でチェックできるので容易に問題点を探せるという事もあり、調べやすい点や有効度などもあって浸透したものと思われます。

ですが、最近は

最近リリースされているブラウザはほとんどの種類で、「文字の大きさを変える」機能はなくなり、代わりに「画面全体のズーム」機能が追加されるようになりました。この「画面全体のズーム」機能ですが、画像なども併せてレイアウト崩れなく、全体的に大きくなるようになっています。ですので、絶対サイズで指定していても問題なく表示できます。

つまり、絶対サイズで指定することで困るユーザーが極端に減ってきています。

画面全体に１文字を大きく表示させるような強度の弱視の方はテキストブラウザベースのものを利用しますので、スタイルシートは関係ないですし、スタイルシートを利用して見れる程度の弱視の方は上記のようなズームで対応できます。

ということで、このチェックポイント「テキストに相対サイズを使用する」は優先度は下げても問題無いと思います。

この機能が必要な方がいらっしゃいましたら失礼ですが、連絡いただけますと嬉しいです。私の知識が足りない点をお詫びさせていただくと共に訂正をさせていただければと思います。

それでは。

アクセシビリティ・チェックポイント（３）- イメージタイプの要素（img/area/input等）には ALT 属性を指定する

（３）イメージタイプの要素（img/area/input等）には ALT 属性を指定する

画像には ALT 属性を指定する必要があります。

現象

目の見えない方向けの対策でもあり、SEO対策としても有名なポイントです。クライアントサイドイメージマップにALT属性を入れ忘れると、目の見えない方はそこから先のページに進むことができません。フォームのボタンもそうです。ページ移動する場合などは特に気を付ける必要があります。

対処方法

「スペーサーやボタン系には ALT="" を設定する」というルールで運営されている企業が多いと思います。ですが、できるだけ前後の意味がテキストだけで通じるか？を考えながら必要な場合は入れるようにしてください。

また、ページ移動する場合、移動する旨の説明を入れるとより親切です。例えば「○○のイメージ」と記載しているところで、「○○のイメージ。クリックで拡大表示します」といった記載にすることで、より動作をイメージすることができます。

（１）、（２）でも記載しましたが、誰の為に必要か？その人にとって分かりやすいか？間違った認識を持つ事はないか？という点でテキスト入力するようにしてください。

よくある間違い

矢印（→）画像に「矢印」と書いたり、四角（■）画像に「四角」や「■」と書いてあるページを良く見ますが、それだと前後の意味が通じなくなる事があります。前後の意味がスムーズに通じる事に重点を置いて修正してください。

7/4 Google Analytics 利用率は 34.7% (前週から 0.2ポイント増）

今週も上場企業のWebサイト 3,828社分を調査してGoogle Analytics の利用率を調べてみました。

今週は先週から比べて 9社増えてました。

合計で 1,328社。前回の 34.5% から 0.2ポイント増えて 34.7% となりました。

ちなみに

SiteCatalystは 1社増えていました。

企業サイトには 104社に入っています。
※SiteCatalyst は企業サイトには入れずにサービスサイトのみ導入している企業も多いので、これがそのまま導入数ではありません。

１年も半分が過ぎました。皆さん年初に立てた計画は半分以上進んでますでしょうか？私はこれから追い上げが必要です（笑）。こらから暑い夏がやってきます。夏バテすると身体が思うように動かなくなるので、今のうちから冷たいモノは控えて夏バテしないように注意したいと思います。皆さんも体調に気を付けてください。

それでは。

アクセシビリティ・チェックポイント（２）- ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

（２）ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

ポップアップ等、新規ウィンドウが開かれる時、またはアクティブ・ウィンドウが変更される時にはユーザーにその旨を通知する必要があります。

現象

商品の詳細を見せる時などに、ページをクリックするとポップアップ画面が表れて商品が表示され、ｘボタンで画面をクローズするといったページを良く見ます。これらは読み上げツールなどを利用しているユーザーには非常に使いづらいシステムです。アクティブ・ウィンドウが変更されたのに気付かずに前のページへ戻ろうと back ボタンを押しても戻れません。前のページへも戻れず、先のページへも進めずといった状態で、また最初からと思わせてしまうことも多くあるという事を認識してください。

対処方法

新規ウィンドウが開かれることをユーザーに通知しないまま、target="_blank" または target= "_new" 等を使用することはなるべく避けてください。
新規ウィンドウを開く事自体あまりお勧めいたしません。必要な場合はその旨をユーザーに通知することで、上記のような混乱を防ぐことができます。

（ここ重要）よくある間違った対処 - 誰の為の対策か？

ここでよくある間違った対処方法を紹介します。

新規ウィンドウを開く場合に、その旨を知らせるアイコンを表示させるのですが、これを CSS で定義して、"_blank" があった場合にそのアイコンを表示させるといった記述をしている企業サイトがたくさんあります。
ルール上はそれで対応したことになります。

でも、良く考えてみてください。それが無いと誰が困るのか？

上でも記述したように、読み上げツールのユーザーは特にこの問題には悩まされます。また、読み上げツールのユーザーは目の見えない方が多く、そういった方々は CSS を必要としません。つまり CSS は読み込まない設定となっています。CSS を読み込まないということはアイコンが表示されません。本当に必要なユーザーにはその旨を伝えていない事になります。

新規ウィンドウが開く場合はその旨を「CSSで記述しないで」必ずHTML文中に記述するようにしてください。

アクセシビリティ・チェックポイント（１）- リンクに JavaScript を使用している

今回から、アクセシビリティに重点を置き、どういった部分に優先度を置き、どのように対応すべきかについて記載していきたいと思います。

（１）リンクに JavaScript を使用している

このパターンで最も多いのがページ内の文字を大きくする機能などでの「大」「中」「小」ボタンです。ソースをみると「<a href="javascript:void(0)">」等の表記がみられます。

現象

これらのタイプのリンクは、多くの携帯電話やPDAのブラウザなど、JavaScriptをサポートしていないブラウザでは機能しません。「押しても押しても何も反応しない」という状態になります。また、一部の企業ではポリシーとしてJavaScriptを無効にしている企業もあります。目が不自由な方の読み上げツール等でも無効にしている場合がほとんどです。

対処方法

このような場合でも対応ができるように href 属性には実リンクを貼るようにしてください。
また、JavaScriptが機能しないと意味のないコンテンツの場合は、それら全てを <script>タグで囲って、無効なブラウザでは表示すらしないようにすることで、より優しいページにすることができます。

その他

twitterアイコンや rssアイコン、はてなブックマークアイコンなど、アイコン系にはこのような記述のものが多くみられます。これらもアクセシビリティの面では不都合になりますので、

・href はそれぞれのサービスサイトへリンクし、onclick で実行する
・全体を <script> タグで囲み、JavaScript が無効なユーザーには見せない

のどちらかの対応をおすすめいたします。