Network Accessibility Project (NAP)
音声/点字による Webアクセスに関する勉強会 -- tableについて考える --
1. 概要
- 日時
- 2003年5月10日(土)13:00から16:20
- 場所
- 筑波大学附属盲学校
- 出席者
- 13名 + 手話通訳者2名
2. はじめに (中根)
3. 前回(frameについて考える)のまとめ (内田)
意味を持たせて分けている場合
レイアウトのために使われている場合
例: CNNのWeb: フレームが10個もあり、どこに何があるのか分からな
い。
注: これはしばらく前の話であり、この勉強会開催時点では異なったデザインに変更されている。
3.2 音声ブラウザではどのように表示されているか。
- JAWS+IE
フレームを外して、上から下に並べて読み上げるかたち。なので、左のメニューリストを全部読んで、右のメニュー説明 (1品目分) を読む形。
※意味のあるフレームでもその恩恵にあずかりにくい。
- ホームページリーダー(HPR)
- 各々のフレームを独立のものとして扱うため、1つのフレームを読み上げると読み上げが止まる。
- 次のフレームを読ませたいときは、切り替えを行う。
※読む方に慣れが必要だが、フレームが階層構造の場合は有効である。
- テキストブラウザVEGA
- ページを構成する各フレームに対するリンクが、ファイル名で一覧表示される。
- ※なので、ファイル名にも意味を持たせると使いやすい。
3.3 まとめ
- frame要素にtitle属性を入れることは意味があるが、実際に入っているものはほとんどない。
- 多くの音声環境では、 name属性を frameのタイトルのように読み上げるようである。
- nameと titleの両方がある場合でも、 nameしか読み上げられない環境もある。
4. 音声で表形式のデータにアクセスするには (高村)
4.1 はじめに
- インテリジェントな表の読み方→表を音声でどう伝えるか?
- 理解しやすさ→前後の文章を読まなくても表を見ただけで分かるには?
- なぜこのデータを表にしなければならないのか?→どう読むのか?
4.2 2つの表の例
点字プリント・墨字プリントにて表データ2点配布。「主要国の国面積データ (2列22行、表1)」と、「主要国の実労働時間の年次推移(6列34行、表2)」
- 国からアクセス→国ごとに年代を追って表を横に読む。
- 面積の一番大きい国は? →2列目の数値を縦に読む。大きな数値を読んだら、国を確認する。
- 目的によって、表は横にも縦にも読める。
- 面積の表と同様に、横にも縦にも読める。
- ある年代を取り出し、差を取る読み方もある。
- 表のデータが増えると読み方も増える。
- 音声で伝える場合、「流れて消える」という特性を無視することはできない。
- 表を音で正確に伝えるには、表を読む目的を考える必要がある。
4.3 読み上げのポイント
- 意味を理解して読み方を考える。
- 意味を伝えるには、全体を把握する必要がある。
- 例に出した2つの表でも、ただ各国のデータを横に読んだだけでは目的によっては(縦に読みたいときには)意味が伝わらないこともある。
- 物理的レイアウトを伝える。
- 冗長になるが全体像は伝えられる。
- Excelの場合は、各セルに縦横の座標が与えられているため、A1、A2・・・・B1、B2で、場所を示すことができる。
- 座標と中身を読むことによって、レイアウトを伝えられる。
4.4 聞き手の条件
- 訓練した人としない人で理解度が違う。
- 要求される作業力
- 一次記憶のバッファ量、フラッシュ時間の長さ
表の列を覚えるくらいの記憶力
- 聞き飛ばせる力
- レイアウトのイメージ能力、二次元的座標空間の把握力
テーブルを空想再描画できるか。
- この(1)、(2)、(3)、を考慮して音声読み上げを提供する。
- 朗読者に読んでもらうときは、目的を考え、どう読んでもらうのかを決める。
4.5 聞き手の限界
- あまりにデータが多いと聞きたくなくなる。
- 限界点は、項目1つに数字が2つぐらいまでか。3つはイヤになる。
読み方の例
表2で、1990年の労働時間の大きい国を知りたい場合
方法1:ずらずらと線形に読み上げさせて、小さい数字は聞き飛ばし、大きい数字のみを頭の中で抽出。
※ヒトの「聞き飛ばす力」依存。項目多すぎるとイヤになる。ノイズ。
方法2:1990年の労働時間を縦に読み上げて、大きい数値がでてきたところでストップ、左にある国名まで移動する。また90年の列に戻り、縦に読んで、大きい数値がでてきたら国名まで移動…を繰り返す。
※インテリジェントな機器ではこれが可能。
4.6 オブジェクトがたくさんはってある表について (関連5.3)
- 絵と名前(説明)の対応表(2列n行)
- アイコンの説明が対応している名前と同じの場合、音声で聞いていると2度読みしているだけで意味がない。
- 絵を説明したいなら、絵をイメージできるような説明をつけた方が意味がある。
4.7 評価の観点−どういう読み上げ方がよいのか?
- 読むと言うことの本質は、2次元のものを1次元に直すことであり、平面的なもの、広がりのあるものを直線的に変換することである。
- 多次元、3次元のものを2次元に表現するテーブルもある。
- 評価基準をどこに設けるのか?
- 位相空間論などに出てくる敷石定理を根拠にすることができるのではないかと思う。
- あくまでもそう考えているだけで詳しく検証したことはない。
- 目安としては、一つの表をいくつかの観点から読み上げたとき一つの要素が4回以上読み上げられていたとするとこれは改善できる可能性を考えて見直す必要があると思う。
- 本を読む場合は経験則的には、昨日のしおりのやや直前から読み返すのが普通ではないか。
4.8 まとめ
- 表がわかるかわからないかは、「聞き手の力」に左右される。そのため、「聞き手の力を補える読み方」が必要になる。
4.9 質疑応答
質問:
見る場合は方向を考える。聞く場合は方向はどのように定めるか。(2次元と1次元)
回答:
- 音で伝えるとは、1行の電光掲示板で情報を伝えるということだ。
- 電光掲示板には方向もない。
- どのように文章を作るか。→読む方が方向を伝える。
- 聞き手にそれを解釈する力があるか。
質問:
表に方向を入れてはどうか
回答:
- 何のために読むかで、読み方が変わる。
- 読む方向も目的によって変わるので固定することはできない。
- きちんとした表をきちんと読ませることができると楽になる。(この話がデモへとつながる。)
- 表をブラウザにどう読ませるか、表とブラウザとの連携、目的と合わせてどういう表を作るのかが重要である。
- どういう風に情報を伝えるのか、情報を取るのかが重要である。
5. ホームページリーダー (HPR)でテーブルを読む(デモ) (中根)
5.1 基本的な表
テーブルの例1: とある国際電話料金表 -- 国名、国名英語表記、国コード、料金…料金体系がいくつもある! 各セル間の関連を明示するマークアップなし、8列n行.
(1) HPRの普通モードで読む。
- ひたすら線形によんでいく。ずらずら数字の中に国名が……数字も何の数字かわからない。そもそも何行何列?
- セルごとにカーソルを合わせられ、一応1つ1つ読ませられる。
- →これでは構造はよくわからない。
(2) HPRのテーブルナビゲーションモードで読む。
- テーブルナビゲーションモードに切り替えると、まず行と列の数を読み上げてくれるし、カーソルでセルを上下左右に移動できる。
- 試しに読んでみる。まずはヘッダーを右に移動しながら項目を把握。「通常アクセス料金」の項目に辿り着き、下におりていく。「40.4」という数値でストップ。これは何処の国? 最左列に移動すると「アイスランド」なるほど。
- じゃあアフガニスタンは? 下に降りていく。「アフガニスタン」に着いたので、右に移動。「412.0」。高いなあ。
- 上のように、ピンポイントの情報は読んでいるうちにたどりつく。でも一番高いのはどこかといったことは、わかりにくい。
(3) Webアクセシビリティの鉄則
- ユーザの知識に期待しすぎてはいけない。
- ページ作成者が全部やってくれることを期待しすぎてもいけない。
- ブラウザに期待しすぎてもいけない。
- ページ製作者、ブラウザベンダー、ユーザの3者が努力しなくてはいけない。
5.2 HTMLの書き方を工夫する
htmlの書き方次第でHPRの読み方に影響が出る。
(1) セルの scope 属性
ヘッダーとなるセルに scope属性を付加する。 (scope属性を使った例):
<th scope="col"> 国名 </th>
<th scope="row">アイスランド</th>
- scope="col"は、そのヘッダー・セルを垂直方向のセルに関連付ける。
- scope="row"は、水平方向。
- セルのナビゲーション、上下左右の動きにともなって変化したヘッダーセルを読む。
- 左右に動いている間は国名を読まない。
- 上下に動いている間は電話料金の種類を読まない
- このモードなら、端から端まで知らなくても、何とかなる。
(2) ヘッダー用のABBR属性
このまま項目名を読ませていると長すぎる場合、abbrを使うと略称を指定できる。 (abbr属性を使った例):
<th scope="col"> 国名 </th>
<th abbr ="英語名" scope="col"> Country Name </th>
<th abbr="通常" scope "col"> 通常アクセス料金 </th>
(3) 複雑な表の関係を指定する場合
- scopeは、縦と横の関係しか指定できない。
- もっと複雑な表の場合は、id と headersを使って関係性を明示する。
- id と headers は、あるセルに関連するセルが複数ある場合でも、そのセルの識別し (id) をいくつでも列挙できるのが利点。
- headersにいくらでも識別子をつくれるので、上のセルがいくつに別れていようが識別できるところ。HPRである程度追跡できることも確認済み。
- 関連するセルが2つのときは、scopeの方が楽である。
- idと headersの場合、 idをつけるのがすごい大変…。この程度の表なら、scopeで十分。
- scopeで書いても、id と headers で書いても、HPRは同じ読み方をする。
idと headers属性を付加した例:
<th id ="c1"> 国名 </th>
<th id ="c2"> Country Name </th>
<th id ="c3"> 通常アクセス料金 </th>
<th id = "r1" headers = "c1"> アイスランド </th>
<td headers = "c2 r1"> Icerand </th>
- HPRのテーブルナビゲーションモードは良く出来ている。
- id、headers、scopeのサポート、カーソルキーでのテーブルのナビゲーションの時のアナウンスの実装はなかなか良い。
- テーブルはアクセシビリティを下げるから使うな、と言う暴論を言う人がいるが、正しく使えばアクセシビリティーは向上する。使わないとアクセシビリティを下げることもある。
- 単純な表は、テーブルにせず、テキストベースでpreタグがついていることがあるが、HPRでは読みにくい。
5.3 アイコンと説明 (関連: 4.6)
- アイコンの alt属性と説明(キャプション)で、同じことが書かれていると音声ユーザは同じことを2回聞かされることになる。
- 同じ説明を2度書くなら、altの方には、アイコンをイメージできるような言葉を入れたほうが意味がある。→alt属性を読む人が読んで楽しめる。
- しかし、そういう用途として longdesc 属性が存在する。
5.4 属性の使い分け
- alt属性
- 代替テキスト
- title属性
- そのものに対する説明、名前
- longdesc属性
- より詳細な説明 (を含むリソースの URI)
- 意味によって使い分ける必要がある。
- HPRと Mozilla が longdesc属性をサポートしている。
- alt属性の内容が吹き出すのは、IEやネットスケープの表示である。吹き出すように指定しているわけではないし、本来吹き出すことが期待されている訳でもない。
- alt属性は、アクセシビリティの第一歩だが、意味のないalt属性は返って困る。
例: Windows Updateで「緑色の矢印」というalt属性がついていた。矢印で重要なのは、色より方向ではないのか。
- このaltに「→」とつける手もあるけど、→はそれ自体が意味を持ってるわけではない。
- 日本語は、→をはじめ、文字なのか記号なのか境界線が微妙な文字がたくさんあって、扱いが難しい場合が少なくない。
5.5 ぶち抜きの表
- 音声だけで聞いた場合、慣れていない人は、そこから表を再現できないが、目で見るとそれほど複雑な表ではない。
→音声ユーザーのイメージ能力が求められる。
- ぶち抜きがあるため、座標は、列や行だけでなく、幅や高さという語も用いて表す。
- 内容が同じものは、ぶち抜きにしてある。
- ぶち抜きをしないと音声では良いが、見た目は煩雑になる。もし、これで見栄えが悪くなるなら、グラフィカルユーザーのユーザビリティーを損ねることになり、全体としてアクセシビリティが良くなったとは言えなくなる。
- テーブル内検索は、axis属性を使ってセル同士の関係を示せば可能であることに仕様ではなっている。しかし、そこまでスマートな実装をしているブラウザがあるのか。何でもWebでやろうとするなら、axis属性を使うのだろうが、そこまでやるならExcelでやった方がいいかもしれない。
- 出身地は東京と大阪の2種類、年代は20〜29歳と30〜39歳の2種類、性別は男女の2種類である。
- 3つのセルを関連付けるので、headersを使う。
- 20歳〜29歳が男女の上にかかって横にぶち抜き、同様に30歳〜39歳も横にぶち抜きである。
- ぶち抜きになっているセルは、「幅2、列1」、「高さ2、行1」などとと表現される。
- 男女のセルには、年代は何も書いていないが、音声では、20代男、20代女、30代男、30代女と読みあげられる。 (headersによる指定で実現。)
- よく聞くと「20代、ピロロ、男」と読んでいる。
→HPRのAuditory iconが、ピロロの前後でセルに関連の情報とセルの表示内容の読み上げを行うため
- HPRのこういった機能を意識してhtmlを書くことによって、グラフィカルユーザにとっても音声ユーザにとっても読みやすい表を作ることができる。
- dataに関連のheadersを列挙する。headersの中身が多いと言うことはテーブルが複雑化しているということである。
5.6 質疑応答
質問:
axisはどうか。
回答:
- 実装されているブラウザを確認する必要がある。
- HPRの場合、scopeやid、headersと違ってカーソル異動で変化していない軸方向の属性も読み上げているようだ。
- HTML4.01の欲張りな規格、
- HTML&ブラウザにそこまで求められるのか、スプレッドシートでやりたくならないか。
5.7 まとめ
- テーブルを作るときのアクセシビリティを考える場合、適材適所ということを意識しなくてはならない。
- scopeやidとheadersをつけることは絶対ではない。関係性を示す1つの材料であり、「全くアクセシビリティのない状態」から「少なくともアクセシビリティのある方向」に持っていける方法の1つである。
6. おわりに -- 今後の予定
- 勉強会は、3ヶ月に1度はやりたい。
- 果たして、次の予定とテーマは??
テーマ案 (話の途中、あるいは、終わった後にあちらこちらから聞こえた話)
- テーブルの話が予定の半分で終わっている。(今回は、テーブルで表記されるべきでないものにテーブルが使われている場合はどうなるかまでやる予定だったので。)
- 高村先生の話は、本当は3時間かかる話を30分に圧縮したものだったので、フルバージョンを聞いてみたい。
- 表をやったらグラフはどうなのか興味が出た。
- 音声ユーザには実態が謎のフラッシュを料理してみたい。
- alt属性で画像をどう表現するかだけで、1回分できそう。
[参考]
- Paciello,Michael G.“ウェブ・アクセシビリティ -- すべての人に優しいウェブ・デザイン.
東京,アスキー ,2002,410p.
- フレームについては、「第5章 HTMLを使ったアクセシブル・ウェブの作成」の「フレームとテーブルのコーディング」の前半p.107-108に詳しい。
- テーブルについては、同じ章同じ節の後半p.108-117に詳しい。
- 属性については、同じ章の「すべてを記述するコーディング」p.96-101に詳しい。
- 文献1)は、ウェブ・アクセシビリティについて学ぶには、最良の1冊である。ただし、HTML4.0仕様を前提として書かれているので、HTML4.01仕様以降の属性等はカバーしていない。HTML仕様の最新バージョンを見ておくと良い。
- W3C.HTML 4.01 Specification : W3C Recommendation 24 December 1999.
http://www.w3.org/TR/REC-html40
- HTML 4仕様書邦訳計画 補完委員会.HTML 4.01仕様書1999年12月24日付W3C勧告:W3C勧告私的日本語訳.
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/
- 文献3)は、文献2)の翻訳である。
- フレームは16章で、テーブルは11章である。
- 「パフォーマンス上、実装上、設計上の注意」に、「テーブルに関する注意」、「フレームに関する注意」の項目がある。