ホーム » ビジネスブログ » Webアクセシビリティ »

アクセシビリティ:原稿作成時にもできること

2009年1月22日

アクセシビリティ:原稿作成時にもできること

投稿者 小森

小森です。

昨年、株式会社NTTデータからリリースされたHARELというサービスを試してみました。
URLを入れると、オンラインでアクセシビリティチェックを行ってくれるツールです。
http://harel.nttdata.co.jp/

harel.png

画面は、アクセシビリティWikiのもの。診断結果はお恥ずかしいものですが、こんな感じで「良い」「悪い」「要確認」の項目を、「晴れ」「雨」「曇り」のメタファで表現しています。
(PukiWikiというツールの特性でしかたない部分もあるのですが、できるところから少しずつ直しています...。)

さて今回の記事では、このとき出たチェック項目のいくつかが面白いと思ったので、紹介したいと思います。たとえば以下。

  • 見出しテキストの文頭(10文字)が重複しています(解説
  • 見出しテキストが長すぎます(解説
  • リンクテキストが短い(全角2文字以下)です(解説
  • リンクテキストが長い(全角30文字以上)です(解説
  • リストに8つ以上の項目(li要素)があります(解説
  • 読み上げ不可能な記号ですが、意味を伝える必要がないか確認して下さい(解説

詳しくはリンク先を参照いただくとして、私のほうでも簡単に解説を加えますと、下記のような背景があります。

  • 視覚障害者の方は見出しやリンクのみを飛ばし読みをするので、文頭が重複していたり長いテキストだと瞬時に区別がつきにくい
  • また極端に短いと、リンクの場合はリンク操作する前に読み上げが終わってしまうので、リンクであることに気づかなかったり、リンク操作そのものができなかったりする
  • 俗にマジックナンバー7と言われますが、人間が短期的に覚えていられる項目数は7つ程度まで、という説があります。つまり、それ以上になるとグルーピングを再考したり、階層化したほうがよい
  • 「○」「×」「※」などの記号はHomePageReaderのデフォルト状態では読み上げられません。記号に意味を与えている場合は、別の手段を考える必要があります


アクセシビリティ対応にはHTMLマークアップを改善すればよい、と単純に考えがちですが、それ以前の、こういったラベリング設定、原稿作成時にもできること・改善できることが案外重要だったりします。

音声ブラウザで聞いてみて、すーっと情報が入ってくるのかどうか?認識しやすいのかどうか?
今一度そういった視点で自分のWebサイトを見直してみるとよいかもしれません。


余談:
あと文脈から外れるので余談扱いですが、下記も面白いと思いました。20px未満って、アイコンとかでよく使うのでデザイナーからすると結構微妙ですね...。もう少し大きくしたほうがいいのかも。

  • リンク画像が小さい(20px×20px未満)です(解説
投稿者 小森 : 2009年1月22日 11:35

カテゴリー: Webアクセシビリティ

タグ:


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8