いま、身体障害者のための施設のサイト制作に取り組んでいます。
事故や病気で四肢が不自由になった人だけでなく、視力障害者の自立支援なども行なっているところ。
当然、今回のサイトはユーザビリティを今まで以上に厳しくチェックしなければなりません。
どんな色使いなら、色覚障害の人にも見やすいページになるか。
読み上げブラウザを使った場合には、どういうコーディングをしておくと使いやすくなるのか。
いろいろ工夫しなければならない点がありますが、今回はフォントサイズを変更できるようにしてみました。
最初、jQueryを使ってやってみましたが、ローカルでうまくいくのにワードプレスに組み込むとなぜかうなく動作しなかったり、、、
プラグインを使ってみても、使用しているテーマでは機能しなかったりして、しばらく悩んでいました。
しかし！探せばあるものですね〜
prototype.jsを使った、コレなら簡単に組み込めて、動作も完璧！！
詳しい説明は上記にあるので省きますが、
手順は超簡単。
その１：ヘッダーにjavascriptを読み込む！
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="cookiemanager.js"></script>
<script type="text/javascript" charset="utf-8" src="fontchanger.js"></script>
その２：body内に「小・中・大」と表記させる。
<script type="text/javascript">FontChanger.start("fontChanger");</script>
たったこれだけで使えるようになります！
show: function() {
var id = this.id;
document.writeln([
'<span id="' + id + '-small"><a href="javascript: void(0);" title="文字を小さくする">小</a></span>',
'<span id="' + id + '-medium"><a href="javascript: void(0);" title="文字を標準に戻す">中</a></span>',
'<span id="' + id + '-large"><a href="javascript: void(0);" title="文字を大きくする">大</a></span>',
].join("\n"));
Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
},
fontchanger.jsの中身には、こんな風に書かれているので、CSSで
id="id-small"
id="id-medium"
id="id-large"
に画像を指定してあげれば、キレイな「小」「中」「大」ボタンになります。
