アークウェブ
アクセシビリティ
Wiki
Web制作会社アークウェブのスタッフが、アクセシビリティに関するTips・ノウハウをまとめているWikiです
http://www.ark-web.jp/accessibility/2274.html
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
Ajaxのアクセシビリティ対応
Ajaxのアクセシビリティ対応/DOMで追加、修正されたコンテンツを読み上げさせることができるか?
Ajaxのアクセシビリティ対応/JavaScript OFF用、アンカーリンク
Ajaxのアクセシビリティ対応/JavaScript+OFF用、アンカーリンク
Ajaxのアクセシビリティ対応/情報収集
BracketName
FormatRule
FrontPage
Help
InterWiki
InterWikiName
InterWikiSandBox
InterWikiテクニカル
MenuBar
PHP
PukiWiki
PukiWiki/1.4
PukiWiki/1.4/Manual
PukiWiki/1.4/Manual/Plugin
PukiWiki/1.4/Manual/Plugin/A-D
PukiWiki/1.4/Manual/Plugin/E-G
PukiWiki/1.4/Manual/Plugin/H-K
PukiWiki/1.4/Manual/Plugin/L-N
PukiWiki/1.4/Manual/Plugin/O-R
PukiWiki/1.4/Manual/Plugin/S-U
PukiWiki/1.4/Manual/Plugin/V-Z
RecentDeleted
SandBox
ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法
WAI-ARIA
WAI-ARIA/Live Regionのサポート状況、利用現状
WAI-ARIA/NVDAのLive Regionのサポート状況(2009.12.28)
WikiEngines
WikiName
WikiWikiWeb
YukiWiki
Zen Cart日本語版のアクセシビリティ対応/JIS:2009(改正原案)への追加対応
Zen Cart日本語版のアクセシビリティ対応/PC-Talkerでチェック
Zen Cart日本語版のアクセシビリティ対応/ホームページリーダーのチェック+α
Zen Cart日本語版のアクセシビリティ対応/現標準テンプレートを「富士通アクセシビリティ・アシスタンス」でチェック
Zen Cart日本語版のアクセシビリティ対応/現標準テンプレートをキーボード操作でチェック
Zen Cart日本語版のアクセシビリティ対応/目視チェック(JIS2009)
clip/Windows Vista対応の音声ブラウザ:アクセシビリティ対応ソフトウェア
jCarouselLiteのautoにて停止/再スタートできるようにするアクセシビリティ対応
jQuery UI に見る WAI-ARIA の実装:dialog 編
tag
tag/Ajax
tag/HTML5
tag/JIS X 8341-3
tag/JavaScript
tag/WCAG 2.0
tag/jQuery
tag/だれコン
tag/スクリーンリーダー
tag/試験方法
だれコン/2010-11-26シンポジウム
アクセシビリティメモ
アクセシビリティメモ/JIS X 8341-3 2009の7.3.3.4をZen-Cartに適用するには。
アクセシビリティメモ/JIS:2009 改正原案公開レビュー版 エクストリームリーディング会(1)
アクセシビリティメモ/W3CのMobile Web Best Practices 1.0
アクセシビリティメモ/「JIS X 8341-3 2009」のeXtream Reading(1)
アクセシビリティメモ/「JIS X 8341-3 2009」のeXtream Reading(2)
アクセシビリティメモ/「JIS X 8341-3」を読む(1)
アクセシビリティメモ/「JIS X 8341-3」を読む(2) (附属書1 (参考) ウェブコンテンツに関する例示)
アクセシビリティメモ/「Webアクセシビリティ JIS規格完全ガイド 改訂版」エクストリーム・リーディング会(1)
アクセシビリティメモ/「Webアクセシビリティ JIS規格完全ガイド 改訂版」エクストリーム・リーディング会(2)
アクセシビリティメモ/「改正迫るウェブアクセシビリティの規格(JIS X 8341-3)の改正のポイントと動向」
アクセシビリティメモ/『本物のWebアクセシビリティー・セミナー』 パネルディスカッション「東西の視覚障害者に、生の声を聞く」
アクセシビリティメモ/アックゼロヨン・アワード アクセシビリティ最高得点サイトのPDCAサイクル
アクセシビリティメモ/アックゼロヨン・シンポジウムVol.1「アクセシビリティのこれから」メモ
アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト2」をシェア
アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト」をシェア
アクセシビリティメモ/書籍「Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~」 第1章
プロジェクト/lightwindowをアクセシブルにしよう
プロジェクト/lightwindowをアクセシブルにしよう/lightwindow2.0とは?
プロジェクト/lightwindowをアクセシブルにしよう/lightwindowの課題
ヘルプ
機能テスト/1/1
議事録/template
近藤
計画
志田
実践アクセシビリティ
実践アクセシビリティ/JIS X 8341-3 2009を試験してみてわかった制作上の問題点
整形ルール
竹村
中野
日本語
* ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法 [#ecbee1b2] ビデオの埋め込みなど用途が増えてきたので、あらためて検証してみました。
タイムスタンプを変更しない
#topicpath * ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法 [#ecbee1b2] ビデオの埋め込みなど用途が増えてきたので、あらためて検証してみました。 ** FlashをHTMLに埋め込むときの問題点: [#q0b18a37] - Web標準的な問題 -- IEではFlashを表示するには、embedタグを使用する。 -- ただしこのembedタグは、Web標準的に非推奨の要素で、Validatorエラーになってしまう。代替テキスト用であるnoembedも同様。 - 代替テキストの問題 -- アクセシビリティ的には、Objectタグ内に代替テキストを入れる必要がある。 -- が、単にObjectタグ内に入れるだけだと、IEではそのまま表示されてしまう。(Flashと代替表示が並んで表示されてしまう) - JavaScriptで書き出す場合の問題 -- クリックしないとアクティブにならない問題があった(現在は解消されてきているらしい)ことから、JSで書き出す方法が主流になった背景がある。 -- ただし、JSがオンでないと何も表示されず、アクセシブルではない。 -- noscript内に静的に書けばよいのだが、最初のWeb標準的な問題がそのまま残る。。 ** SWFObject 2を使う [#be632910] SWFObject http://code.google.com/p/swfobject/ SWFObjectは、JSで書き出すタイプのライブラリ。 現在のところこのタイプの事実上標準であるらしいです。 以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンでないとFlashが表示されない状態でしたが、バージョン2になってからはJSオフの状態も考慮されており、上記をクリアする内容になっています。 ** SWFObject 2 のHTMLソース [#fa9e1f2e] ダウンロードすると、index.html と index_dynamic.html が入っていますが、index_dynamic.html は旧バージョン形式の「jsオン時のみ対応」用なので、index.html を使います。 - idは適宜好みで書き換えます。 - IE用とそれ以外(Firefox、Safari等)用のObjectを2つ記述するかたちなので、Flashへのパスとサイズも2箇所記述します。 - 代替テキストも忘れずに書きます。映像の内容をわかりやすく書きます。 <object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="385"> <param name="movie" value="http://www.youtube.com/v/XAKroNeQhf0&hl=ja&fs=1&" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/XAKroNeQhf0&hl=ja&fs=1&" width="480" height="385"> <!--<![endif]--> <div> <h2>Flashプラグインがないユーザへの代替</h2> <p>代替テキスト:かわいい子猫のムービーです。</p> <p>ムービーをご覧になるにはFlash Playerのインストールが必要です。</p> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> - こんな感じ。 -- http://www.ark-web.jp/accessibility/misc/SWFObject2/test1.html - IEでもちゃんと表示されます。代替表示も表示されません。 - JSオフのときも問題なく表示 - Flashがインストールされていないときは、下記のような代替表示が出るようになります &ref(cap.png,,70%); 最後に、 1)YouTubeはビデオのURLに「&」が含まれているので、「&」は & と実体参照に置き換えます。 これでHTMLValidatorエラーは消えます。 2)YouTubeのコードにはフルスクリーン化などの制御に使う2つのパラメータがあるので、これを記述します。 <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> ただ、これもIE用とその他で2箇所に書かないとダメみたいでした。 <object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="385"> <param name="movie" value="http://www.youtube.com/v/XAKroNeQhf0&hl=ja&fs=1&" /> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/XAKroNeQhf0&hl=ja&fs=1&" width="480" height="385"> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <!--<![endif]--> <div> <h2>Flashプラグインがないユーザへの代替</h2> <p>代替テキスト:かわいい子猫のムービーです。</p> <p>ムービーをご覧になるにはFlash Playerのインストールが必要です。</p> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> 3)なお、このままでも再生に問題ないですが、embedを使っていたときはIEでできていたFlash Playerの自動インストールや自動バージョンアップなどができなくなってしまうので、SWFObjectを使い、head内に以下のように書いておけば、SWFObject側がバージョンチェックをしてくれますので、入れておきましょう。 <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("swf", "9.0.0", "expressInstall.swf"); </script> - こんな感じ。 -- http://www.ark-web.jp/accessibility/misc/SWFObject2/test2.html ** 参考サイト [#yd518bb7] - [[SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ>http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html]] - - [[SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み | デベロッパーセンター>http://www.adobe.com/jp/devnet/flashplayer/articles/swfobject_print.html]] - [[swfobject.js の expressInstall.swf 使用法 - 左脳Script>http://n-yagi.0r2.net/script/2009/06/swfobjectjs_expressinstallswf.html]] - [[小粋空間: YouTube の Embed タグを XHTML valid にする>http://www.koikikukan.com/archives/2007/01/05-003003.php]] #blikifooter(小森)
テキスト整形のルールを表示する
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針