「ワイワイガヤガヤアクセシビリティ」 ドットコーダーセッション5で使用したスライドを公開します。 http://tweetvite.com/event/dotcoder_s5

1. Caption is fun!
⼩嶋新／Arata Kojima

2. 01 ⾃⼰紹介

3. ⾃⼰紹介 3
 名前 ⼩嶋新（こじまあらた）
 所属 特定⾮営利活動法⼈しゃらく
 ブログ TRANS
 Twitter @aratakojima
 Facebook aratakojima

4. 4
http://d.hatena.ne.jp/aratako0/

5. 02 アジェンダ

6. 延々とキャプションを語る

7. 7
http://www.slideshare.net/aratakojima/alt-presentation

8. 03 イントロダクション

9. 9
http://www.whitehouse.gov/photos-and-video/video/2010/10/08/president-
obama-signs-21st-century-communications-video-accessibil

10. キャプションのメリットは
聴覚障害者だけではない。

11. キャプションのメリット 11
動画のコンテンツをテキストで⼊⼿し
たい
外的な環境により⾳声を利⽤できない
コンテンツをテキストとして提供でき
るので、さまざまな再利⽤が可能（検
索エンジンのインデックスなど）

12. 12
http://kokumaijp.blog70.fc2.com/blog-entry-40.html

13. 13
http://googleblog.blogspot.com/2009/11/automatic-captions-in-youtube.html

14. 14
http://www.youtube.com/watch?v=o7uLkVrY88k

15. 04 キャプションの作り⽅

16. 16
http://captiontube.appspot.com/

17. キャプションの作り⽅ 17
YouTubeのキャプションフォーマット
SubViewer (*.SUB)
SubRip (*.SRT)

18. SubRip (*.SRT) 18
1
00:00:00,673 --> 00:00:05,224
インターネットをいつ頃からお使いですか？
2
00:00:05,224 --> 00:00:17,299
使い始めたのは中学校の授業からです。中⼀とかですね。
3
00:00:17,299 --> 00:00:27,701
普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

19. 05 HTMLとキャプション

20. 20
http://people.opera.com/brucel/demo/video/multilingual-synergy.html

21. WebSRT 21
1
00:00:00.67 --> 00:00:05.22
インターネットをいつ頃からお使いですか？
2
00:00:05.22 --> 00:00:17.29
使い始めたのは中学校の授業からです。中⼀とかですね。
3
00:00:17.29 --> 00:00:27.70
普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

22. WebSRT 22
1
00:00:00.67 --> 00:00:05.22
<i>インターネット</i>をいつ頃からお使いですか？
<i> </i>
2
00:00:05.22 --> 00:00:17.29
<1>使い始めたのは<b>中学校の授業</b>からです。中⼀とかですね。
<b> </b>
3
00:00:17.29 --> 00:00:27.70
普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

23. WebSRT & CSS 23
::cue {
color: blue;
}
::cue-part(1, b) {
font-style: normal;
text-decoration: underline;
}

24. HTML5 24
<video src=“a11y.webm" controls>
<track label="English" kind="subtitles"
src=“a11y_eng.wsrt" srclang="en">
<track label=“Japanese" kind="subtitles"
src=“a11y_ja.wsrt" srclang=“ja">
</video>

25. HTMLとキャプション 25
WebSRTとtrack要素の課題
HTML5仕様書には記載がない
ブラウザ未対応である

26. Caption is fun!