注意

発表の都合上、このページは10分間表示された後、自動的にトップページに切り替わります。
しかしながら次にご覧になる方の為に、 読み終わりましたら上記のトップページへのリンクをクリックして元に戻していただければ幸いです。
色を変更された方は、上記のプルダウンメニューから『標準』を選んで『切替』をクリックし、元の配色に戻しておいてください。

本発表の詳細についてのお問い合わせは、下記のメールアドレスにお願いいたします。
tanakat@hiroshima-u.ac.jp

障がい者Web Accessibilityに配慮してGrid-Layoutを採用した医療機関用Webpageの試作

田中武志*1、津久間秀彦*1, 池内 実*1, 氏間和仁*2, 藤田利恵*1
*1広島大学病院, *2広島大学大学院教育学研究科

要旨

【背景】病院のWebpageは障がい者にとって健康とQOLを維持する上で貴重な情報源である。特に視覚障がい者は視覚情報よりもWebpageの読み上げSoftwareによる音声情報に頼ることが多い。 音声によるWebpage閲覧は、画像情報を代替の文字情報で置換する以外にも、 1)SoftwareがHTML-FileをSequentialに読むため、 情報の提示順序が一意になること及び 2)意味論的にTag付けされた重要語句を説明・強調して読み上げると共に情報をSkipする際の目印にすること、 の２つの点で視覚情報による閲覧とは大きく異なる。 これら1)2)により以下の問題が生じる： A)上記1)に関して、 縦横の二次元配列が可能な視覚情報と一次元的な情報の提示しか出来ない音声情報のどちらかで作成者の意図との食い違いが起こりうる； B)上記2)に関して、意味論的に正しいTag付けがされなければ、 視覚情報ならば色や文字Fontによって重要性を強調できる箇所でも、 音声情報においては重要性の把握に困難が生じる。 実際、著者達の調査では多くの国立大学病院Websiteで適切なTag付けが為されていない。

【目的】 上記の問題を解決しWeb Accessibilityに配慮した病院Webpageの実装Modelを試作する。

【方法】HTML5とCSS3の規格を用いJIS8341-3のAA等級に準拠した病院WebsiteのTop-Pageを試作する。 Grid-Layoutを用いてPageをSection毎に分割しCSSで位置指定をすることでA)の問題に、 Section内の詳細なTag付けによりB)の問題に、それぞれ対応した。

【結果】 患者の必要度の高い交通アクセス情報や電話番号などの情報を視覚的に目立つ位置に配置すると同時に音声情報として優先的な順序で提示することが可能になった。 また各セクションの名称の確実で且つ短時間での把握が可能になった。

【考察】Grid-Layoutは将来主流になるSmartphone等の小画面端末による閲覧に対応した画面設計が大きな利点であるが、 更に詳細にTagを付けることにより、障がい者にとっても何処に何が書いてあるのかが判り易いWebpage作成が可能になる。

キーワード

視覚障がい者、Webアクセシビリティ、Responsible Web Design, 医療機関Webページ

謝辞

本研究は文部科学省科研費基盤研究(C)(JP15K00438)の助成を受けた。

本研究で使用したフリーウェア・チェックツール

本モデルページで使用したプログラム

Webアクセシビリティチェックツール

HTML文法チェック用Webサイト

WebブラウザのHTML5+CSS3への対応状況情報Webサイト

Can I use... Support tables for HTML5, CSS3, etc： http://caniuse.com/

これまでの研究の経緯