memo.xight.org

日々のメモ

カテゴリ : アクセシビリティ

1ページ目 / 全1ページ

ARIA Authoring Practices Guide (APG) - W3CによるWAI-ARIA を用いたUIのパターンと例

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/

画面解像度とページレイアウト - 1024 x 768に最適化し,リキッドレイアウトで

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が有効,かつ画像は非表示」の設定を行っている可能性がある.

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

コンテンツとして有意な画像,文字情報を含んでいる画像については,
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フォームが素晴らしい.
氏名からユーザ名を自動生成,パスワードのチェック,メールアドレスのチェックが行われる.
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

XHTML2 で<img> タグ

Summary

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

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

例:
<p src="map.png">
駅を出て左折後に<strong>メインストリート</strong>を直進して下さい。
</p>

Reference

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

音声ブラウザ「ホームページ・リーダー」と読み上げ結果

Summary

  日本IBMが開発している音声ブラウザ.
Amazon - ソフトウェア: ホームページ・リーダー バージョン 3.01

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/