Summary

W3CによるWAI-ARIA を用いたUIのパターンと例
スクリーンリーダを考慮したアクセシブルなウェブコンテンツ制作のガイド

Reference

W3C - ARIA Authoring Practices Guide (APG) - Patterns
https://www.w3.org/WAI/ARIA/apg/patterns/

W3C - ARIA Authoring Practices Guide (APG) - Practices
https://www.w3.org/WAI/ARIA/apg/practices/

Summary

ウェブページは 1024 × 768 に最適化するべきだが，
幅広い解像度に対応できるリキッド・レイアウトを使おう．

Reference

Alertbox: 画面解像度とページレイアウト (2006年7月31日)
http://www.usability.gr.jp/alertbox/20060731_screen_resolution.html

via

オレンジニュース - 2006-08-31
http://secure.ddo.jp/~kaku/tdiary/20060901.html#p10

CSSを利用した画像置換によるアクセシビリティ上の懸念

CSSによる画像置換は「CSSが有効，かつ画像は非表示」という閲覧環境で，文字も画像も表示されなくなる．

ナローバンドでインターネット接続をしているユーザが，帯域を有効活用するため，
「CSSが有効，かつ画像は非表示」の設定を行っている可能性がある．

ミツエーリンクスの意見は

コンテンツとして有意な画像，文字情報を含んでいる画像については，
CSS側から表示を制御するよりも，img要素として (適切なalt属性値とともに) マークアップしたほうが，
アクセシビリティ的には好ましいでしょう．

CSSを利用した画像置換によるSEO上の懸念

非可視化されるテキストの内容が，置き換えられる画像の内容が等価ではないと考えられる場合，
SEOスパムとして認められる可能性がある．

テキストと画像の内容が等価であれば問題はない．
また，画像が表現している情報とテキストの内容の等価性を機械的かつ自動的に検証することは困難．

よって，CSSを利用した画像置換を利用しても問題ないと考えられる．

Reference

ミツエーリンクス - Web標準Blog - 2005-06-10 - 画像置換という手法
http://standards.mitsue.co.jp/archives/000038.html

ミツエーリンクス - Web標準Blog - 2006-02-24 - 画像置換とSEOスパム
http://standards.mitsue.co.jp/archives/000153.html

456 Berea Street - 2005-10-21 - Google, SEO and using CSS to hide text
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/

Summary

Remember The MilkというサイトのSignupフォームが素晴らしい．
氏名からユーザ名を自動生成，パスワードのチェック，メールアドレスのチェックが行われる．

Reference

Remember The Milk - Signup
http://www.rememberthemilk.com/signup/

via

最速インターフェース研究会 - 2005-12-15 - 全てのWeb開発者必見 : remember the milk のサインアップフォーム
http://la.ma.la/blog/diary_200512151101.htm

  http://www.universal-design.gr.jp/

  http://www.infoaxia.com/

Reference

http://www.seo-solutions.com/about_this_site/universaldesign/voice_browser.html
http://www.stylesheet-stylebook.com/archives/000078.php

Summary

  <img>は空要素なので，中にデータを書くことが不可能．
  代替テキストは alt 属性しかない．

XHTML2では任意の要素に src 属性を入れることが可能になる．

例:

Reference

XHTML Frequently Answered Questions (私的日本語訳) - Software Linkage
http://linkage.xrea.jp/documents/W3C/XHTML_FAQ/#img

Reference

http://www.zspc.com/

Summary

  音源の方向感を立体的に表現．
  音源の方向感によってウェブページのデザインやページ構成を知ることが可能．

Reference

支援技術(AT)情報サイト「夏への扉」 - 3D音声ブラウザ
http://at.a-brain.com/3d/

Summary

  日本IBMが開発している音声ブラウザ．

Reference

ソフトウェア: ホームページ・リーダー バージョン 3.01
Web系メモ - 音声ブラウザのメモ
http://memo.imagines.jp/memo_aural.html
Web系メモ - ホームページ・リーダー v3.01 の読み上げメモ
http://memo.imagines.jp/memo_hpr.html
朝顔日記 - ホームページリーダーv2.5 読み上げメモ
http://diary.noasobi.net/hpr25memo.html
妄想海岸 - ホームページ・リーダー v3.02体験版 の読み上げメモ
http://www1.rcn.ne.jp/~carat/yomiage/

Reference

http://www-6.ibm.com/jp/accessibility/soft/hpr.html
http://www.amedia.co.jp/product/vs3/press.htm
http://www.pctalker.net/

Reference

http://color.sub.jp/Tools.html