Re: JavaScriptとアクセシビリテ ィ

中根です。

この件について、個人メールで参考情報をいただきました。

WAI-ARIA:
http://www.w3.org/WAI/intro/aria.php

WCAG2の Techniques Documentの
2. Client-side Scripting Techniques:
http://www.w3.org/TR/WCAG20-TECHS/#N11799

それぞれ、きわめておおざっぱにですが読んでみました。もし以下に私が書く
ことで間違っている点に気づかれたら、ぜひご指摘ください。

まず WAI-ARIA (Accessible Rich Internet Application) は、 AJAXなどの動
的なコンテンツなどについてアクセシビリティを確保するための WAIの取り組
みで、どうやら既存の技術をどう使うかよりも、 XHTMLなどにどのような拡張
を加えればアクセシビリティを確保できるかということを提案しているようで
す。ただ、その過程で既存の問題については分析しているようなので、その点
が参考になるのではないかという気がしました。 (細かくはこれから改めて読
む予定です。)

WCAG2 の Techniques Documentの方は、大半が、 WCAG2が定める要件を満たす
ために使える JavaScriptの例なのではないかという気がしました。 (たとえ
ば制限時間を延ばしたりする機能を JavaScriptで実装する例とか。)

私がざっと読んだ中で唯一求めている情報に近かったのは、 onchangeイベン
トを使って別の要素の内容を変更する場合、その変更される要素は HTML的に
トリガーとなる onchangeが設定されている要素よりも後になるようにしない
と、スクリーンリーダーのユーザが変化に気づかない可能性がある、というも
のでした。具体的には、大陸を選ばせる select要素と、国を選ばせる select
要素があって、前者の選択が変わると、後者のリストもそれに合わせて変わる、
という場合が例として紹介されていました。この場合、大陸を選ぶものの後に、
国を選ぶものが出てくるように HTMLの中で配置しないといけない、というこ
とです。

この例を見る限り、まだまだ WAIの中でも検討が不十分なのではないかという
印象を受けました。というのは、この例では、 noscript要素の中に
「JavaScript使ってね」というメッセージが書いてあるだけで、これでは
JavaScriptが無効になっているとどうにもなりません。

本来この例の場合、国を選ばせることが最終目的で、大陸を選ばせるのは、そ
の国を選ぶ作業の繁雑さを回避するための仕組みだと思います。そうだとすれ
ば、 JavaScriptを使わなくても国を選ばせることは (煩雑にはなるけれど) 
できるので、 JavaScriptが使えない環境だとまるで歯が立たないようなコー
ディングになっているこの例は不適切だと思います。 (というのは、そのうち
WAIにコメントを送ろうと思っています。)

ただ、ではどうすれば良いのか、というと、最適解がよく分かりません。私が
思いつくのは、

1. noscript要素をうまく使う

2. HTMLファイルは、 JavaScriptが無効の時にちゃんとレンダリングされるよ
   うな物を作って、 onloadイベントで JavaScriptが有効なユーザにとって
   使いやすいように変更する

という方法くらいです。このどちらが良いのか私には分かりませんし、また他
にも方法があるかもしれません。そういったことをまとめたような情報が、や
はりそろそろ必要ではないかという気がしています。

中根雅文



On Wed, 11 Apr 2007 17:42:26 +0900,
Masafumi NAKANE <max@xxxxxxxxxxxxxxxxx> wrote:
> 中根です。

> 最近、 JavaScriptを使った Webページ作りについてあれこれと試しています。
> とは言うものの、私はこれまで Bookmarkletをいじるくらいしか JavaScript
> を触ったことがなかったので、いろいろと分からないことがあります。そこで
> みなさんに質問です。

> 1. JavaScriptを使ったページ作成に関して、アクセシビリティを確保するた
>    めのガイドラインのようなもので広く用いられているものがあるでしょう
>    か。

> 2. 実際に単純なページを作って JAWS+IEで試してみると、以下の点が特に問
>    題になるような印象を受けましたが、他にも注意すべき点があるでしょう
>    か。また、以下に挙げる方法よりも良い方法があるでしょうか。 (もちろ
>    ん他にも、クリックしたのとはかけ離れた部分が変更されたり、ページの
>    内容が大きく変更されたり、クリックした時に何が起こるのか推測しにく
>    いようになったりしているのは論外だと思いますが。)

> * a要素、もしくは input要素以外の要素で onclickを使った場合、タブでフォー
>    カスしないので、以下のいずれかの方法をとるべき。

>    a. tabindex="0"を指定する。 (IE, Firefox 1.5で動作するものの、
>    Opera, Safariでは未対応、また valid HTMLではない。)

>    b. あきらめて aまたは input要素を使う。

> * a要素を使う場合、実際にはページの移動が発生しない場合でも、ページの
>   移動の際と同じ動作が発生してしまう。 (ので読んでいるユーザはフォーカ
>   スが変わってしまって不便。) href属性に 0を返す JavaScriptの関数を指
>   定すれば良い。 (ような気がする。)

> * 何らかの関数を実行した後に、適切な場所がフォーカスされるようにする。
>   (element.focus()を使う。 <a href="#id">...</a>だと、前述のページ移動
>   の動作が発生する。)

> 3. 他のスクリーンリーダーの対応状況はどのようになっているのか、ご存じ
>    の方がいらっしゃいましたらお教えください。

> 4. 基本的に、 JavaScriptが無効の環境でも情報が読める、ということを意識
>    する必要があると思いますが、加えて、 JavaScriptは無効だが CSSは有効
>    である場合、そのどちらも無効である場合についても配慮が必要だと思い
>    ます。そういった部分、それから上に挙げたような点、さらには私がまだ
>    気づいていない点に関して考慮されて作られている JavaScript/AJAXライ
>    ブラリーというのは存在するでしょうか。

> 以上、質問ばかりで恐縮ですが、何か情報をお持ちの方がいらっしゃいました
> らよろしくお願いします。

> 中根雅文