ウェブアクセシビリティについて考える

ウェブアクセシビリティとは、年齢や障害の有無にかかわらず誰もがウェブコンテンツにアクセスできることやアクセスのしやすさを表す言葉。

以前自治体職員として公式サイトの担当をしたときに知り、大事な考え方だと思っているので紹介してみる。

国や地方自治体などが運営する公共サイトは、総務省ガイドラインに沿った対応が求められている。その中で、JIS X 8341-3:2016(高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)AA(ダブルエー)が基準とされたため、最近の公共サイトは以下リンク先のように試験結果やウェブアクセシビリティ方針を掲載している。

総務省|総務省ウェブアクセシビリティ方針

ガイドラインについて詳しくは触れないが、以下のリンク先に掲載されているのでもし興味があれば。

総務省|情報バリアフリー環境の整備|みんなの公共サイト運用ガイドライン(2016年版)

今のところ公共サイト以外についてのガイドラインは自分の知る限り見当たらないが、誰でもウェブサイトやウェブサービスを作れる時代、ウェブアクセシビリティについて知っておいて損はないと思う。

さて、前置きが長くなったが、ウェブアクセシビリティを確保するために、具体的にどんなことに気をつければよいのか。

ウェブページを作る人が気をつけるべきこと

具体的なルールの例

  • 画像の代替テキストを適切に設定する
    • 画像が表示できなかった場合や画像を見ることができない人に伝えるべきことを書く
    • 画像にテキストが含まれる場合はそのテキストを書く
    • 画像の目的が装飾のみであれば空にしてよい
    • ファイル名をそのまま入れたりローマ字で入力したりしない
  • 色だけで意味を表さない(白黒でもわかるようにする)
    • 色の違いが見分けづらい人は思っているよりかなり多い
    • 悪い例)青色の日は時短営業、赤色の日は定休日です。
  • リンクテキストはリンク先(どこへ飛ぶのか)がわかるようにする
    • 悪い例)こちら
  • レイアウト目的で記号やスペース・改行を使用しない
    • 悪い例)日 時
  • ページタイトルや見出しを適切につける
  • 画像のコントラストを確保する

本質は何か?

上のルールは一部に過ぎない。たくさんのルールを全部覚えるのは難しいし、表面上のルールだけ守っても意味がない。

結局何を目的としているのか?どうやったらアクセシビリティを確保できるのか。

自分なりに考えた一番簡単な方法は、以下の問いを常に自問自答することだ。

スクリーンリーダー(音声読み上げソフト)や自動翻訳を使ったときに、きちんと意味が伝わるか?

今の時代、視覚障害のある人も多くがウェブを利用している。

スクリーンリーダー (screen reader) |「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

たとえば、以下の文字を見たときに、何だと思うだろうか?

(月)

多くの人は「月曜日」のことだと思うかもしれない。でもスクリーンリーダーや自動翻訳ソフトにそれがわかるだろうか?

「つき」や「moon」と解釈される可能性はないだろうか。

9/10

これも同じ話だ。「9月10日」なのか、「10分の9」なのか。文脈を読まないとわからないような表現は極力避ける。

実際やってみたら、9/18(金)は「きゅう スラッシュ じゅうはち かね」と読まれたMac の VoiceOver の場合。ソフトによって違うかもしれない)。

ウェブページでは、9月18日(金曜日)のように書いた方がよいだろう。略語などの使用もできるだけ控えたほうがよさそう。「表(ひょう)」を「表(おもて)」と読まれるなど、どうしようもないこともあるが…。

誤解されがちだが、ウェブアクセシビリティは障害のある人だけのために求められているものではない。最近人気のオーディオブックのように、近い将来、音声でネットサーフィンする時代が来るかもしれない。外国語のサイトを自動翻訳を使って読むなんて、自分含め多くの人が現実にやっていることだ。

スクリーンリーダーを使ってみよう

一度でいいから、実際に使ってみてほしい(自分も Mac では今日初めて使った)。Mac には VoiceOver というスクリーンリーダーが内蔵されていて、簡単に使うことができる。

VoiceOver の起動(Mac

Touch ID がある Mac:Command キーを押しながら Touch ID をすばやく3回押す

Touch ID がない Mac:Command キー + F5 キー

f:id:masuyama13:20200910143234p:plain

「VoiceOver を使用」をクリックすれば、開いているウェブページの読み上げが始まる。

Macでアクセシビリティ機能を使用する - Apple サポート

使ってみると、適切なマークアップ(HTMLによる構造化)が大事だということもわかる。実際利用が多いのはもっと高性能かもしれないが、雰囲気がつかめる。

余談だが、公共サイトではこういった音声読み上げをウェブサイト側の機能として提供するのがウェブアクセシビリティ対応として常識のように考えられているのはなんか違う気がしている。多分あれを使ってる人いないと思う。