1 / 30

Web アクセシビリティの実際

Web アクセシビリティの実際. 独立行政法人 国立特殊教育総合研究所 情報教育研究部 渡辺哲也. HTML ファイル. Web コンテンツ製作者. 一般 Web ブラウザ. オーサリングツール. アクセシビリティの実現は共同作業. インターネット. Web ページを作成. Web 音声化ブラウザ ／スクリーンリーダ. WAI ガイドライン. WAI: Web Accessibility Initiative World Wide Web Consortium の１組織 Web コンテンツ アクセシビリティ ガイドライン

abel-franco
Download Presentation

Web アクセシビリティの実際

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webアクセシビリティの実際 独立行政法人 国立特殊教育総合研究所 情報教育研究部 渡辺哲也

  2. HTML ファイル Webコンテンツ製作者 一般Webブラウザ オーサリングツール アクセシビリティの実現は共同作業 インターネット Webページを作成 Web音声化ブラウザ ／スクリーンリーダ

  3. WAIガイドライン • WAI: Web Accessibility Initiative World Wide Web Consortiumの１組織 • Webコンテンツ アクセシビリティ ガイドライン • オーサリング ツール ガイドライン • ユーザー エージェント ガイドライン

  4. Webコンテンツ アクセシビリティガイドライン 1. 聴覚的および視覚的コンテンツに等価代替物を提供する 2. 色だけに頼らない 3. マークアップとスタイルシートを適切に使用する 4. 自然言語の使用を明確にする 5. スムーズに変換されるようなテーブルを作成する 6. 新しい技術を使用したページのスムーズな変換を保証する 7. 時間に敏感なコンテンツ変更のユーザー制御を保証する （石川准訳）

  5. Webコンテンツ アクセシビリティガイドライン 8. 埋込みユーザー・インターフェースへの直接的なアクセシビリティを保証する 9. デバイスに依存しない設計 10. 暫定的ソリューションを使用する 11. W3Cの技術と指針を使用する 12. コンテンツとオリエンテーションに関する情報を提供する 13. わかりやすいナビゲーション機構を提供する 14. わかりやすく、シンプルな文書を保証する

  6. オーサリング ツール* ガイドライン 1. アクセス可能なオーサリング実施をサポートする 2. 標準マークアップを生成する 3. アクセス可能なコンテンツの作成をサポートする 4. アクセス不可能なコンテンツをチェックおよび修正するための方法を提供する 5. アクセシビリティ・ソリューションを全体的「ルック＆フィール」に統合化する 6. ヘルプと文書におけるアクセシビリティを促進する *Webコンテンツの作成に使用されるソフトウェア （石川准訳）

  7. ユーザー エージェント • ユーザー・エージェントとは、ブラウザをはじめとした、Webページを見るためのアプリケーションを指す。 • 具体的にはMicrosoft Internet Explorer, Netscape Navigator, Lynxなど • WebTV，携帯電話，電子キオスクもユーザー エージェント

  8. ユーザー エージェント ガイドライン 1. 入出力デバイスに依存しないアクセスをサポートする 2. すべてのコンテンツに対するユーザー・アクセスを保証する 3. ユーザーがレンダリングをオフにしたり、アクセシビリティを低下させるような動作を停止することができるようにする 4. スタイルのユーザー制御を保証する 5. システム規定と標準インターフェースを監視する 6. アクセス可能な仕様を実装する （石川准訳）

  9. ユーザー エージェント ガイドライン 7. ナビゲーション機構を提供する 8. ユーザーに正しいオリエンテーションを持たせる 9. コンテンツおよびビューポートの変更をユーザーに通知する 10. 構成およびカスタマイズを可能にする 11. アクセス可能な製品文書およびヘルプを提供する

  10. Webサイトのアクセシビリティチェック • チェックツールを使う ― 以下の２つの手順でテストを行う。 • HTMLの文法に従っているかをチェックする • アクセシビリティガイドラインに従っているかをチェックする • 音声ブラウザ等を使ってチェックする

  11. HTML文法チェックツール • W3C HTML検証サービス • W3C CSS検証サービス • Another HTML-lint

  12. W3C HTML検証サービス • http://validator.w3.org/ • W3CのHTML仕様に従っているかどうかをチェック

  13. W3C CSS検証サービス • http://jigsaw.w3.org/css-validator/ • 適切なカスケーディングスタイルシートのコーディングがされているかどうかをチェック • 日本語で利用可能

  14. Another HTML-lint • http://openlab.ring.gr.jp/k16/htmllint/htmllint.html • HTMLの文法をおおむねDTDに則ってチェック • 満点は 100点とし，文法違反があれば減点 • 文法以外には，好ましくないスタイルや，日本語特有の情報(コード系や言い回しなど)もチェック • Weblint(jweblint)に触発されて開発（作者:石野惠一郎氏） • 日本語で利用可能

  15. アクセシビリティチェックツール • Bobby • LIFT • ウェブヘルパー • WebInspector

  16. Bobby • http://www.cast.org/bobby • WAIのページ オーサリング ガイドラインに従ってWebのアクセシビリティをチェック • 複数のOS，ブラウザ，特殊なユーザ エージェント，HTML DTDレベルに対して検証可能 • 検証にパスするとBobby Approvedアイコンを掲載できる

  17. LIFT • http://www.usablenet.com/index.htm • 使い方は至って簡単 • LIFTのよい点はどこを直すかだけでなくコードの直し方を示す点 • 日本語版 • ソシオメディアから販売 • Macromedia Dreamweaver対応

  18. ウェブヘルパー（総務省） • http://www.jwas.gr.jp/helper/ • Webサイトからダウンロードして利用（無料） • URL指定に加えて，利用者のローカルPC上のHTMLファイルの点検や修正も可能

  19. WebInspector（富士通） • http://design.fujitsu.com/jp/universal/webinspector/ • 背景色と文字色の見やすさを診断できる • ColorSelectorにより，簡単に見やすい色を選択できる • 複数ファイルを一括して診断できる

  20. 音声ブラウザ等を使ったチェック • 音声ブラウザまたはスクリーンリーダを使って，アクセシビリティをチェック • 様々な条件（種類とバージョン）下で試す • 音声ブラウザ • スクリーンリーダ • OS

  21. 特殊学校Webサイトのアクセシビリティチェック特殊学校Webサイトのアクセシビリティチェック • 対象：　短期研修参加者の所属校6校のWebサイトのホームページのみ • 調査方法： • Another HTML-lintを使用 • ウェブヘルパーを使用

  22. チェック結果 • 100点満点の減点法 • 最高値：　11 • 最低値：　-417

  23. 問題点の例代替テキストのない画像 • 配慮の足りない例 • 配慮されている例(1) • 配慮されている例(2) • 配慮の足りない例 • 配慮されている例(1) • 配慮されている例(2) • 配慮の足りない例 • 配慮されている例(1) • 配慮されている例(2) • 配慮の足りない例 • 配慮されている例(1) • 配慮されている例(2)

  24. 画像を読み上げた理由 ― alt属性 • <DIV style="top : 368px;left : 29px; position : absolute; z-index : 5; visibility : visible;" id="Layer5"><IMG src="DSC000021.jpg" width="186" height="139" border="0" alt="三棟目廊下の様子"></DIV>

  25. よくあるアクセシビリティの問題点 • 不適切なHTML 4.0及びCSSコーディング • タイトルの欠如 • 画像に対する代替テキストの欠如 • 構造要素を表現のために使用している • フォームとフレームへのラベル付けが足りない • 代替出力や変換サービスなしにPDFを使用 • Javascriptまたは他のプログラミングコード • アクセスできないマルチメディア（ストリーミングビデオ/サウンド）

  26. 問題があれば再設計 アクセス可能なWebサイトの設計 • アクセス可能なHTMLファイルを設計・作成 • チェックツールなどで検証

  27. アクセス可能なHTMLを作成する • ユーザを想定する • ガイドラインを使う • HTML 4.0アクセシビリティ強化事項 • 構造と表現の分離 • すべて書き出す • アクセシブルなフォーム • フレームとテーブル

  28. HTMLファイルの作成方法 • テキストエディタを使う • メモ帳，WZ Editor，秀丸エディタ，‥ • ワープロソフトを使う（保存時にHTMLファイルを指定） • Microsoft Word，ジャストシステム一太郎，‥ • HTMLオーサリングソフトを使う • ホームページ・ビルダー，FrontPage，Dreamweaver

  29. オーサリング ツールのアクセシビリティ • オーサリングツールのアクセシビリティは次の２点 • 制作者がツールを利用できるか • そのツールを使うとユーザにアクセシブルなWebページが自動的に生成されるか

  30. 参考書籍・Webページ • 『ウェブ・アクセシビリティ―すべての人に優しいウェブ・デザイン』（マイケル・G. パチェロ （著）, ソシオメディア （監訳）） • 『ウェブ・ユーザビリティ＆アクセシビリティ』（石田優子（著）, ソシオメディア （協力）） • 静岡県立大学国際関係学部教授　石川准　　情報バリアフリー(http://fuji.u-shizuoka-ken.ac.jp/~ishikawa/webacc.htm)

More Related