Webアクセシビリティを考慮して「文字サイズを変更する」機能を付けると、見る人に“優しい”ページになるかもしれない。

Javascriptを使ってスタイルシートの属性をいじくることで、文字サイズを変更することができるため、Javascriptをちょっと勉強すれば「文字サイズを変更する」機能を自分のページに組み込むことができる。手っ取り早く実現したかったら「行政」のサイトからテクニックをパクッてくるのもひとつの手。

苦労するも楽するも、とりあえず組み込んでみると結構良い感じである。

ところがここで終わってしまっては単なる自己満足である可能性が高い。

この「Javascriptを使って実現する機能」というものは、Webアクセシビリティ的には問題があるのでは?

いや問題があるのかどうかは分からないが、矛盾はあるように思える。

Webアクセシビリティのために「文字拡大機能」を組み込んだ。
　↓
しかし、それにはJavascriptが動く環境が必要である。
　↓
Javascriptが動かない場合はどうするのだ。
　↓
ということはWebアクセシビリティに反しているのではないのか。

本当に問題があるのかどうかは分からないが、外野から「こんなのダメじゃん」と変なツッコミが入るネット時代である。

そこでJavascriptを使わないで「文字拡大機能」を実現する方法にチャレンジ。

「Javascriptでスタイルシートの属性をいじくる」のではなく、なんらかの方法でスタイルシートを切り替えれば良い。

ここは難しく考えることなく、やりたいことを「PHP」で実現させてみた。

まずは、「文字サイズを拡大させる」ためのスタイルシートを用意する。

bigfont.css

body
{
  font-size: 160%;
}

次に、表示させるページに以下のスクリプトを組み込む。

ページの先頭でパラメータをチェックする。

他のページに引き継がせるためクッキーに仕込む。(他のページにも同じものを組み込む)

$fontsizeflg = htmlspecialchars($_GET[‘f’]) ;
if ($fontsizeflg==””){
  if (isset($HTTP_COOKIE_VARS[“fontsize”])) {
    $fontsizeflg = $HTTP_COOKIE_VARS[“fontsize”];
  } else {
    $fontsizeflg = “normal”;
  }
}
if ($fontsizeflg == “normal” || $fontsizeflg == “big”){
  $expire = time() + 365*24*3600;
  setcookie(“fontsize”, $fontsizeflg, $expire,”/”,”blueroad.sakura.ne.jp”);
} else {
  $fontsizeflg = “”;
}

[注](いちおう補足しますが)”blueroad.sakura.ne.jp”は各自のドメイン名に要変更

そして、「文字拡大」の場合に「文字サイズを拡大させる」ためのスタイルシートが使われるように組み込む。
(組み込む場所は「styles-site.css」の直後)

if($fontsizeflg==”big”){
print ‘<link rel=”stylesheet” href=”<$MTBlogURL$>bigfont.css” type=”text/css” />’;
}

最後に「文字サイズを拡大させる」ためのメニューを表示させる

文字の大きさ ：
<a href=”index.php?f=big” title=”文字サイズを拡大する”>大きくする</a> |
<a href=”index.php?f=normal” title=”文字サイズを元に戻す”>元に戻す</a>

以上の方法で、Javascriptを使わなくても「文字サイズを変更する」機能を組み込むことができる。

ツイート