アークウェブ
アクセシビリティ
Wiki
Web制作会社アークウェブのスタッフが、アクセシビリティに関するTips・ノウハウをまとめているWikiです
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#topicpath
* ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む...
ビデオの埋め込みなど用途が増えてきたので、あらためて検証...
** FlashをHTMLに埋め込むときの問題点: [#q0b18a37]
- Web標準的な問題
-- IEではFlashを表示するには、embedタグを使用する。
-- ただしこのembedタグは、Web標準的に非推奨の要素で、Vali...
- 代替テキストの問題
-- アクセシビリティ的には、Objectタグ内に代替テキストを入...
-- が、単にObjectタグ内に入れるだけだと、IEではそのまま表...
- JavaScriptで書き出す場合の問題
-- クリックしないとアクティブにならない問題があった(現在...
-- ただし、JSがオンでないと何も表示されず、アクセシブルで...
-- noscript内に静的に書けばよいのだが、最初のWeb標準的な...
** SWFObject 2を使う [#be632910]
SWFObject
http://code.google.com/p/swfobject/
SWFObjectは、JSで書き出すタイプのライブラリ。
現在のところこのタイプの事実上標準であるらしいです。
以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンで...
** SWFObject 2 のHTMLソース [#fa9e1f2e]
ダウンロードすると、index.html と index_dynamic.html が入...
- idは適宜好みで書き換えます。
- IE用とそれ以外(Firefox、Safari等)用のObjectを2つ記述...
- 代替テキストも忘れずに書きます。映像の内容をわかりやす...
<object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-...
<param name="movie" value="http://www.youtube.com/v/XAKr...
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http:...
<!--<![endif]-->
<div>
<h2>Flashプラグインがないユーザへの代替</h2>
<p>代替テキスト:かわいい子猫のムービーです。</p>
<p>ムービーをご覧になるにはFlash Playerのインストールが...
<p><a href="http://www.adobe.com/go/getflashplayer"><im...
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
- こんな感じ。
-- http://www.ark-web.jp/accessibility/misc/SWFObject2/te...
- 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-...
<param name="movie" value="http://www.youtube.com/v/XAKr...
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http:...
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<!--<![endif]-->
<div>
<h2>Flashプラグインがないユーザへの代替</h2>
<p>代替テキスト:かわいい子猫のムービーです。</p>
<p>ムービーをご覧になるにはFlash Playerのインストールが...
<p><a href="http://www.adobe.com/go/getflashplayer"><im...
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
3)なお、このままでも再生に問題ないですが、embedを使って...
<script type="text/javascript" src="swfobject.js"></scri...
<script type="text/javascript">
swfobject.registerObject("swf", "9.0.0", "expressInstall...
</script>
- こんな感じ。
-- http://www.ark-web.jp/accessibility/misc/SWFObject2/te...
** 参考サイト [#yd518bb7]
- [[SWFObject v2.0 ドキュメント日本語訳 : Media Technolog...
-
- [[SWFObject 2を用いたFlash Playerのバージョン検知とSWF...
- [[swfobject.js の expressInstall.swf 使用法 - 左脳Scrip...
- [[小粋空間: YouTube の Embed タグを XHTML valid にする>...
#blikifooter(小森)
終了行:
#topicpath
* ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む...
ビデオの埋め込みなど用途が増えてきたので、あらためて検証...
** FlashをHTMLに埋め込むときの問題点: [#q0b18a37]
- Web標準的な問題
-- IEではFlashを表示するには、embedタグを使用する。
-- ただしこのembedタグは、Web標準的に非推奨の要素で、Vali...
- 代替テキストの問題
-- アクセシビリティ的には、Objectタグ内に代替テキストを入...
-- が、単にObjectタグ内に入れるだけだと、IEではそのまま表...
- JavaScriptで書き出す場合の問題
-- クリックしないとアクティブにならない問題があった(現在...
-- ただし、JSがオンでないと何も表示されず、アクセシブルで...
-- noscript内に静的に書けばよいのだが、最初のWeb標準的な...
** SWFObject 2を使う [#be632910]
SWFObject
http://code.google.com/p/swfobject/
SWFObjectは、JSで書き出すタイプのライブラリ。
現在のところこのタイプの事実上標準であるらしいです。
以前のバージョンだと、JSで書き出す仕様上、JSが必ずオンで...
** SWFObject 2 のHTMLソース [#fa9e1f2e]
ダウンロードすると、index.html と index_dynamic.html が入...
- idは適宜好みで書き換えます。
- IE用とそれ以外(Firefox、Safari等)用のObjectを2つ記述...
- 代替テキストも忘れずに書きます。映像の内容をわかりやす...
<object id="swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-...
<param name="movie" value="http://www.youtube.com/v/XAKr...
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http:...
<!--<![endif]-->
<div>
<h2>Flashプラグインがないユーザへの代替</h2>
<p>代替テキスト:かわいい子猫のムービーです。</p>
<p>ムービーをご覧になるにはFlash Playerのインストールが...
<p><a href="http://www.adobe.com/go/getflashplayer"><im...
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
- こんな感じ。
-- http://www.ark-web.jp/accessibility/misc/SWFObject2/te...
- 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-...
<param name="movie" value="http://www.youtube.com/v/XAKr...
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http:...
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<!--<![endif]-->
<div>
<h2>Flashプラグインがないユーザへの代替</h2>
<p>代替テキスト:かわいい子猫のムービーです。</p>
<p>ムービーをご覧になるにはFlash Playerのインストールが...
<p><a href="http://www.adobe.com/go/getflashplayer"><im...
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
3)なお、このままでも再生に問題ないですが、embedを使って...
<script type="text/javascript" src="swfobject.js"></scri...
<script type="text/javascript">
swfobject.registerObject("swf", "9.0.0", "expressInstall...
</script>
- こんな感じ。
-- http://www.ark-web.jp/accessibility/misc/SWFObject2/te...
** 参考サイト [#yd518bb7]
- [[SWFObject v2.0 ドキュメント日本語訳 : Media Technolog...
-
- [[SWFObject 2を用いたFlash Playerのバージョン検知とSWF...
- [[swfobject.js の expressInstall.swf 使用法 - 左脳Scrip...
- [[小粋空間: YouTube の Embed タグを XHTML valid にする>...
#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指針