SlideShare a Scribd company logo
1 of 86
Download to read offline
1
こんなとき実感!
代替テキストと字幕の大切さ
アクセシビリティの祭典 2018
2018年5月17日
2
自己紹介
3
浮かべては 飲み干して
神戸の港は グラスのお酒
船の数だけ 想い出を
少し疲れた神戸のマダム 皿海 佳子
4
迷走する 黒眼鏡
くるくるパーマで よそ行きの
ガリガリというより シワシワの
老眼の進んだ岡山の中年講師 澤田 望
5
銀河をはなれ イスカンダルへ
必ずここへ 帰ってくると
手を振る人に 笑顔で応え
はるばるのぞむ 宇宙戦艦 みるく
6
D2Dアクセシビリティ勉強会って?
7
8
9
講師陣の寸劇を通して
アクセシビリティの重要性を学ぶ
10
皆さんに、どうしても見せたい画像があるの。
11
オヤオヤ、みるくさん
今は音声通話してますけど?
12
でも、どうしても見せたいのお!
13
こちらから画像は見えないんですけど、
どんな感じの画像なんですか?
14
アニメ「ワンピース」の登場キャラクター
「ブルック」と、「なりたい顔No.1」の女優
「石原さとみ」のツーショット写真です。
15
どんな写真なのか、想像できましたか?
16
やはり、画像を見たいので
メールで送ってもらえますか?
17
はい。送りました。
18
まだ届きませんね。
19
送りましたけど。
20
イスカンダルは遠いですからね。
21
22
23
24
25
大津市
26
船で送ってませんから。
27
届きました。
28
29
寸劇おしまい
30
会場の皆さん:
• 画像の情報を視覚的に得られない状況
• 説明(聴覚+文字)だけでどんな画像なのかを想像
寸劇のふり返り
31
会場の皆さん:
• 画像の情報を視覚的に得られない状況
• 説明(聴覚+文字)だけでどんな画像なのかを想像
寸劇のふり返り
画像に対する代替テキスト
32
アニメ「ワンピース」の登場キャラクター「ブルック」と
「なりたい顔No.1」の女優「石原さとみ」のツーショット写真
33
正しい情報が提供されていましたね。
34
判断できる人:
•画像の内容を視覚的に把握できて、かつ代替テキストの内
容と比較できる人(原稿作成者と実装する制作担当者)
代替テキストの適切さの判断
35
それ以外の人:
•画像を見るだけ/代替テキストを読むだけ
•比較して適切かどうかという視点を持つことすらない
代替テキストの適切さの判断
間違っていても気がつくことができない
36
みるくさんの説明をもう少し
掘り下げて見ていきましょう。
37
「ブルック」
38
いきなり「ブルック」と言われても
何だか分からない人が多いかも。
39
「ワンピース」の「ブルック」
40
「ワンピース」の中の何なのか
分からないかも。
41
「ワンピース」の登場キャラクター「ブルック」
42
「ワンピース」を知らない人がいるかも 
知れないわ! そうよ、「ワンピース」が
アニメだということを伝えねば!
43
アニメ「ワンピース」の登場キャラクター「ブルック」
44
これで、完璧な代替テキストができたわ。
ホーッホッホ(誰)
45
「ワンピース」観てないんだよね。
46
アニメ「ワンピース」の登場キャラクター「ブルック」
ブルック | キャラクター | ワンピースとは | https://one-piece.com/log/character/detail/brook.html より
会場の皆さん:「ワンピース」の内容を知らない
アニメ「ワンピース」に登場する
くるくるパーマでガリガリのギター弾き
キャラクター「ブルック」
47
画像が使われるコンテンツのコンテキスト
48
会場の皆さん:「ワンピース」の内容をよく知っている
「ブルック」だけでいいかも
画像が使われるコンテンツのコンテキスト
49
代替テキストの内容は、コンテンツの
コンテキストによるので注意。
50
では、次に「石原さとみ」の件ですが...
51
「なりたい顔No.1」の女優「石原さとみ」
52
ちょっと。
53
はい?
54
そっちも掘り下げるの?
55
だってちゃんと検証しないと。
56
どうして...も?
57
代替テキストについては以上です。
58
最後に、みるくさんから
アクセシビリティで欠かせない大切なこと
を伝えていただきます。
59
これだけは覚えて帰っていただきたい、
アクセシビリティで欠かせない大切なこと
をお伝えします!
60
61
えっ
62
みるくさんの伝えたいこと分かりましたか?
63
でも、今の状況は変えられませんし...
64
あっ! こんな時にアレがあれば
情報が伝えられるはず!
65
分かりました。
もう一度伝えるので、よく聞いてください。
66
普段は耳から情報を得られる人でも、
字幕がないと情報を得られない場面が、ちゃんとあるのよ~
67
どうもありがとうございました。
68
寸劇おしまい
69
普段は耳から情報を得られる人でも、
字幕がないと情報を得られない場面が、ちゃんとあるのよ~
70
耳で聞ける状況でも、別の手段で情報を欲しい場面がある
字幕 ≠ 聴覚障害者向けだけの情報提供
ポイント
71
日本語字幕付きの洋画
Provide alternatives
for time-based media.
時間依存メディアには代替コンテンツを提供しろよ。
72
岡山弁のセリフにつけられる共通弁の字幕
時間依存メディアには代替コンテンツを
提供せにゃぁおえんでぇ。
時間依存メディアには代替コンテンツを提供しなきゃだめだぞ。
73
ちょっと、話が外れてきてない?
74
少し戻します。
75
同じ情報だとしても、時系列で流れてしまうメディア(音声
や字幕など)よりも自分でスピードをコントロールできる
メディア(デジタルなテキスト情報など)の方が理解しや
すいこともある
耳で聞ける状況でも、別の手段で情報を欲しい場面がある
76
聴覚過敏
聴覚過敏保護シンボルマーク | 株式会社 石井マーク | www.ishiimark.com/symbol_usapin.html より
77UDトーク | App Store より
78
字幕の基準について少し。
79字幕を制作するときに | テープ起こし・字幕制作・翻訳制作ソフトウエア「おこ助」https://okosuke.jp より
80
1.長いセリフは一度に多く表示すべき?

細かく分解すべき?
2.各字幕の間は何秒くらい空けるべき?
3.話者や状況説明の入れ方にルールはある?
81
1.28文字 (14文字×2行) を7秒間表示できるなら

表示してしまった方が理解しやすい
2.各字幕の間は0.1秒以上
3.話者 (澤田) や状況説明 (ベル音) は半角()
まとめ
82
視覚から得られる情報
83
得られる情報を近づけたい
≒
聴覚から得られる情報
84
85
86
ありがとうございました。
@SawadaStdDesign

More Related Content

More from Nozomi Sawada

代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用までNozomi Sawada
 
岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界にNozomi Sawada
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Nozomi Sawada
 
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIANozomi Sawada
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことNozomi Sawada
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜Nozomi Sawada
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようNozomi Sawada
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントNozomi Sawada
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」Nozomi Sawada
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」Nozomi Sawada
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」Nozomi Sawada
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでーNozomi Sawada
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」Nozomi Sawada
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」Nozomi Sawada
 

More from Nozomi Sawada (14)

代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
 
岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
 
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
 

こんなとき実感!代替テキストと字幕の大切さ