連載記事ウェブアクセシビリティを知ろう

連載20：ウェブアクセシビリティの基本構成要素

渡辺 隆行（JWAC理事長，東京女子大学）
2022年2月24日

まだ理解されていないなあと思うことがあったので，連載15で少しお話しした「ウェブアクセシビリティの基本構成要素」を詳しく説明したいと思います．

W3C/WAIのEssential Components of Web Accessibility外部サイトを別ウインドウで開きますには，ウェブアクセシビリティは，ウェブコンテンツの製作者がアクセシビリティに配慮すること，ユーザエージェント（ブラウザ＋スクリーンリーダ）の機能，ユーザ（のスキル）の3つが両立しないと成立しないことが示されています．（UAI研究会編：『Webアクセシビリティ～ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践～』（毎日コミュニケーションズ）の1章にも詳しく解説されています．1章「Webアクセシビリティを理解する」はオンラインでも公開していますのでぜひ読んでください．）


ウェブアクセシビリティの構成要素（『Webアクセシビリティ～ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践～』外部サイトを別ウインドウで開きます図1-8）

是非理解していただきたいのは，ウェブコンテンツだけ，言い換えるとウェブコンテンツの制作者だけがアクセシビリティに責任を負っているわけではないことです．例を挙げます．

仮にアクセシビリティに完璧に配慮されたウェブコンテンツがあったとしましょう．この場合，障害を持つユーザはウェブコンテンツを問題なく利用できるでしょうか？点字で読みたいユーザは点字ディスプレイを持っていなければ利用できないので，点字ディスプレイなどの支援技術が必要なことは言うまでもありません．では，音声で利用したいユーザはスクリーンリーダさえ使用できればウェブを利用できるのでしょうか？ 国内ではパソコン利用ならJAWS，NVDA，VoiceOver，ナレーター，PC-TalkerとNetReaderなど様々なスクリーンリーダがあります．価格もそれなりの価格の物から無料で使える物まで幅広いです．そして性能にも幅があります．以下，table要素を例に説明します．

table要素の例
OS 販売会社 対応ハードウェア
Windows Microsoft 各社
Mac OS X Apple Appleのみ

これは1行目と1列目が見出しセルになっている3行3列の表です．表は2次元のデータ構造を持つので，縦方向には，見出しセルに対応する内容がWindowsとMac OS Xでどう異なるのかを示していて，横方向には見出しセルに対応する販売会社や対応ハードウェアがどう違うのかを示しています．視覚的に見ればこの2次元構造が一目瞭然に理解できます．では，音声表示のスクリーンリーダはこれをどう読むのでしょうか？ 音声は視覚のように画面を行ったりきたり（眺望）する機能に欠けていて，巻物のように一次元に一方向だけにスクロールします．ですから2次元の表と音声表示は相性が悪いです．世の中には，そこを補う機能を持っているスクリーンリーダと持っていないスクリーンリーダがあります．例えば無料で高機能なWindows用スクリーンリーダNVDAは，表を読むための機能を持っていて，表のセルを行方向に移動したり列方向に移動したりできます．セルを移動したときにそのセルに付随する見出しセルの内容も読み上げてくれるので，「販売会社が」Microsoftであることも理解できます．今，自分がいるセルが何行何列かもわかります．スクリーンリーダによってはこのような機能がないものもあり，その場合は表の理解が困難になります．

ウェブコンテンツの制作者は，2次元のデータ構造をtable要素でマークアップし，th要素を用いて見出しをマークアップする必要があります．適切なcaptionを付けたり，列方向に関係性があるのか行方向に関係性があるのかをscope属性で指定することも有効です．colspanなどの複数のセルを連結する機能を用いず，正規化された表にすることも大事です．でも，こうして適切にマークアップされた表でも，スクリーンリーダに表を読み上げる機能がなかったら，表を理解することが困難になります．スクリーンリーダに機能があってもユーザがその使用方法を知らなかったら，やはり表を理解することが困難です．

この例でウェブアクセシビリティの基本構成要素を理解していただけたでしょうか．この例では，アクセシビリティに配慮したウェブコンテンツ，アクセシビリティに必要な機能を持ったスクリーンリーダ（支援技術），その機能を使いこなせるユーザの3者がそろってはじめてアクセシビリティが成立します．渡辺の論文[1]でも，見出し要素のアクセシビリティを評価するために，高機能なスクリーンリーダであるJAWSと，それを使いこなせる全盲のユーザを選んで実験を行っています．そうしなければ，見出し要素の有効性を検証できないのです．

表を読む機能を持たないスクリーンリーダが世の中に存在するから，表読み上げの機能を知らないユーザがいるからという理由で，table要素を使用しないのは間違っています．なぜなら，table要素を使うことでユーザの理解が向上するからです．2次元のデータ構造は表で表現するのが最も適切です．これを文章で書き下したら2次元の関係性が見えなくなります．浅川ら[2]は，視覚を用いないユーザの表形式のデータ利用を容易にする機能を論文で呈示し，これらの機能が今のスクリーンリーダに組み込まれています．また，例えばTableView [3]というツールは，ショッピングページなどの繰り返しの規則性があるコンテンツを表を用いて表示することで，画面を拡大して見ているロービジョンユーザのアクセスが容易になることを論文で示しています．

いかがでしょうか．ウェブアクセシビリティを成立させるためにはウェブコンテンツだけが大事ではないことを理解していただけたでしょうか．また，ウェブ制作者だけにアクセシビリティの責任を負わせるのが間違っていることも理解していただけたでしょうか．図に示したように，制作者，制作者が用いるオーサリングツールや評価ツール，ブラウザやスクリーンリーダなどのユーザエージェント，ウェブを利用するユーザ，これらすべてがそろってウェブのアクセシビリティが成立します．コンテンツの制作者だけではなくユーザも，必要な機能を持ったスクリーンリーダを使いこなすことが必要なのです．今はNVDAのように無料でも高機能なスクリーンリーダがありますから，費用は問題になりません．NetReaderと組み合わせれば，PC-Talkerでも表を読み上げることができます．

ウェブアクセシビリティの基本構成要素に目を配って，みんなでウェブアクセシビリティを向上させましょう！

参考文献

[1] Takayuki Watanabe. 2009. Experimental evaluation of usability and accessibility of heading elements, In Disability and Rehabilitation: Assistive Technology 4(4) 236-247.
https://doi.org/10.1080/17483100902903283外部サイトを別ウインドウで開きます
[2] Chieko Asakawa and Takashi Itoh. 1999. User Interface of a Nonvisual Table Navigation Method. In CHI ’99 Extended Abstracts on Human Factors in Computing Systems (Pittsburgh, Pennsylvania) (CHI EA ’99). Association for Computing Machinery, York, NY, USA, 214–215.
https://doi.org/10.1145/632716.632850外部サイトを別ウインドウで開きます
[3] Hae-Na Lee, Sami Uddin, and Vikas Ashok. 2020. TableView: Enabling Efficient Access to Web Data Records for Screen-Magnifer Users. In The 22nd International ACM SIGACCESS Conference on Computers and Accessibility (Virtual Event, Greece) (ASSETS ’20). Association for Computing Machinery, New York, NY, USA, Article 23, 12 pages.
https://doi.org/10.1145/3373625.3417030外部サイトを別ウインドウで開きます

ページの先頭に戻る