ポインティングデバイス以外からの操作

マウスを使ってのナビゲーションに慣れてしまうとそれが当然のように感じられるが,ノングラフィカルな UA ではキーボードと使ったナビゲーションが当然だし,マウスを使うことができないようなハンデを持った人もいる。音声入力でページを使っている人もいる。そのような人にとってポインティングデバイスによるナビゲーション方法しかないページはアクセス不能という事態に陥ってしまう。多くの人に開かれたページにするためにアクセスキーなどによるナビゲーションや代替方法を用意しよう。

ショートカットキー

■ アクセスキー ACCESSKEY 属性

HTML にはキーボードでのナビゲーションを可能にする ACCESSKEY 属性がある。この属性を用いてショートカットキーを作っておくことによってノングラフィカルな UA やマウスを使えないハンディを持った人にも開かれたページを作ることができる。

<A HREF="./" ACCESSKEY="i">目次へ(I)</A>

目次へ(I)

一般に,Windows では Alt(GRPH)を押しながら,MacOS では Cmd を押しながら指定したキーを押すとその要素が選択されたり,動作する。リンクにアクセスキーが付けられていたらその文書にジャンプするし,何らかのボタンならそのボタンが押される。大事なことはソースに ACCESSKEY 属性を指定したら必ずそのキーが何なのかを書いておくことである。

■ タブインデックス TABINDEX 属性

キーボードを用いたナビゲーションでは Tab キーを使ってフォーカスを移動させるが,要素がフォーカスを得る順序を指定するのが TABINDEX 属性である。

<A HREF="index.html" ACCESSKEY="i" TABINDEX=3>目次へ</A>
<A HREF="wai05.htm" ACCESSKEY="n" TABINDEX=1>次章へ</A>
<A HREF="wai03.htm" ACCESSKEY="p" TABINDEX=2>前章へ</A>

上の例ではタブを押すと,「次章へ」,「前章へ」,「目次へ」の順にカーソルが移動していく。このようにタブインデックスでフォーカスの順序を指定することができるわけだが,フォーカスの移動順序にも適切な順序というものがある。一連の文章において,文章のながれを崩さないように指定することが大切だ。今読んでいるところから前に戻るリンク文が,先に進むリンク文よりも先にフォーカスを得てしまっては,ユーザは使いにくいだろう。

イメージマップについて

ポインティングデバイスを使うことができないユーザにとって,イメージマップはそれに替わる手段が用意されていないとアクセス不可能である。アクセスを可能にするためには,テキストによるリンクをつけなくてはならない。またアクセスキーを設定しておくのもユーザに対しての心遣いというものだろう。

フォームについて

フォームを用いることによって,インタラクティブなページを構築することができる。これは WWW による情報発信の醍醐味である。ポインティングデバイスなしでもフォームへの書き込みが容易にできるように工夫しよう。

<FIELDSET> は,フォーム内でひとつのまとまりをなすフォームコントロールをグループ化する。<FIELDSET> を用いることによりフォームの構造が理解でき,どんなことが求められているか分かる。さらにこのグループ化したフォームには <LEGEND> を用いてそのグループの表題を付け,いっそう理解しやすくなる。この <LEGEND> は ACCESSKEY 属性を持つ。フォームのグループへのアクセスキーを作ることによっても,アクセシビリティを向上させることが可能となるだろう。

<FORM ACTION="http://www.tg.rim.or.jp/%7Ehexane/ach/taw/taw.cgi" METHOD="post">
<FIELDSET>
<LEGEND>あなたの症状について</LEGEND>
頭痛はありますか?<BR>
<LABEL><INPUT NAME="headach" VALUE="yes" TYPE="radio">はい</LABEL>
<LABEL><INPUT NAME="headach" VALUE="no" TYPE="radio">いいえ</LABEL><BR>
熱はありますか?<BR>
<LABEL><INPUT NAME="temperature" VALUE="yes" TYPE="radio">はい</LABEL>
<LABEL><INPUT NAME="temperature" VALUE="no" TYPE="radio">いいえ</LABEL>
<LABEL><INPUT NAME="temperature" VALUE="normal" TYPE="radio">当然ある</LABEL>
</FIELDSET>
<FIELDSET>
<LEGEND>普段の生活について</LEGEND>
<LABEL ACCESSKEY="m">週何時間運動しますか(M)</LABEL>
<INPUT NAME="txtime" TYPE=text size=5>時間</LABEL><BR>
<LABEL FOR="others" ACCESSKEY="o">その他なにか気がつくことがあったらご記入ください(O)</LABEL>
<TEXTAREA ID="others" NAME="txothers" COLS=60 ROWS=5></TEXTAREA>
</FIELDSET>
</FORM>

あなたの症状について 頭痛はありますか?

熱はありますか?
普段の生活について 時間

解決! センター化学 I
解決! センター化学 I ◆ Z 会出版