Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

ブロガーのためのアクセシビリティガイドライン

ユーザビリティ・アクセシビリティ

唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。


といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概　　要」とか、「2007年1月11日（水）」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。


前提として、

  • アクセシビリティに詳しい方にとっては、「何を今更」という内容。
  • デザインやマークアップよりも、コンテンツを書く＝ウェブライティングに特化したガイドライン。
  • ブログの記事を書く際に、ちょこっとだけアクセシビリティを意識できる。

といった内容です。


このガイドラインはPDFとWordでも配布していますので、もし印刷向けに必要であれば、ダウンロードしてください。


では、以下から本文。


文章を書く際のアクセシビリティ



  • 誤字や脱字、誤記には気をつける。

  • 日付や時間は書き方によっては音声読み上げがうまくいかないことがある。

    • 2007年1月10日←2007.1.10、2007/01/10

    • 13時から14時←13:00 - 14:00

    • 水曜日←（水）



  • 単語、テキストは、文字間のスペースや全角による数字を記述しない。

    • 概要←概　要

    • 5,000円←￥５，０００

    • 1,000←１，０００



  • 機種依存文字は原則として使わない。

    • ①、Ⅰ、㈱など。



  • 難しい漢字や専門用語、外国語の場合は、平易な一般用語に置き換えるようにする。ただし、単語の後ろに（ ）をつける、またはルビを振ることでもよい。

  • 英単語を記述する際には、全て小文字、もしくは先頭一文字のみ大文字にする。

    • page、Page←PAGE




リンクを貼る際のアクセシビリティ



  • クリックしなくても、意味が分かるリンクテキストを記載する。

    • 会社概要のページ←ここをクリック、次のページへ



  • クリックしやすいようにリンクテキストは十分な面積を確保する。

    • ページ1、ページ2←1、2



  • PDFファイルなどは印刷用のみに限定する。また、PDFファイルなどはtarget=_blankを用い、別ウィンドウで開くようにする。

  • ただし、通常のリンクでは新しいウィンドウを原則として開かせない。


画像を使う際のアクセシビリティ



  • 画像を使う際には、必ずalt属性をつける。

    • <img src="picture.jpg" width="100" height="100" alt="イベントの写真" />

    • しかし、画像が単なる枠線やアイコンなどの際には、alt=" "と半角スペースを入れる。

    • 画像にリンクを貼る際には、alt属性に説明文を入れる。




タグの使い方や効果的な構成



  • 意味がはっきりと分かるページタイトルと見出しをつける。

    • ページ名 – サイト名←サイト名のみ、title要素が未記入

    • 見出しは、デザイン目的だけではなく、文章の起点に配置する。



  • 色に依存した表現をしない。strong要素などを併記する。

  • 文字を点滅、移動させない。

    • 文字が点滅するblink要素

    • 文字をスクロールさせるmarquee要素



  • 取り消し線を用いて変更履歴を残す場合は、同時に訂正後の文章も書く。

    • 対象は、s要素、strike要素、del要素、もしくはCSSによるtext-decoration: line-through;など。

    • 1月10日（中止になりました）←1月10日



  • 表を使う際には、音声読み上げの順番に気をつける。

    • セルを結合することによって、複雑な表を作らない。

    • 複雑な表には、caption要素やsummary属性で表の概要を記述する。

    • 場合によっては、scope属性、id属性、headers属性を用いる。

    • 行や列の見出しは、td要素を使わずに、th要素を用いる。




参考サイト


追記（1月13日）
画像を使う際のアクセシビリティに追記しました。alt属性は空白よりも、半角スペースのほうが最適であること、リンクを貼る際にはalt属性に説明文があったほうがよいこと、この2点を追加し、PDFおよびWordファイルも更新しました。


追記（1月14日）
はてブのコメントを受けて。alt属性に半角スペースを空けるという理由は、以下のサイトからの情報を得て、そういうふうに判断しました。

掻い摘んで書いておくと、

  1. そもそも何も意味がない画像という意味をalt属性で表すには、空白よりもスペースを入れたほうが適切なのではないか。
  2. 音声ブラウザによっては、alt属性に空白を入れてしまうと、「画像」と読み上げるものがある。
  3. 全角スペースの場合は、2バイト文字にしか対応していない音声ブラウザの場合に、文字化けを引き起こす可能性がある。

とのことです。


追記（1月23日）
はてブのコメントを受けて。空白はalt=""と何も入れない状態で、スペースというのはalt=" "と半角スペースを入れるような意味合いで使いました。今思えば、ちょっと分かりづらい表現ですね。