Soumettre la recherche
Mettre en ligne
こんなとき実感!代替テキストと字幕の大切さ
•
1 j'aime
•
1,018 vues
Nozomi Sawada
Suivre
2017-05-17(木)に神戸ジーベックホールにて行われた「アクセシビリティの祭典 2018」でのスライドです。
Lire moins
Lire la suite
Internet
Signaler
Partager
Signaler
Partager
1 sur 86
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Las Vegasで開催されたCGE2012の旅行記
Cge2012 all 600
Cge2012 all 600
安隆 沖
私の暇つぶし方法
私の暇つぶし方法
monoris
WordPress にコミットしてよかったこと | WP-D Fes #01
WordPress にコミットしてよかったこと | WP-D Fes #01
Odyssey Eightbit
2019/11/2(土)にハッシュタグにて行われた「リーダブルな昼下がり on 2019/11/02」でのセッションで使用したスライドです。
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
2019/9/2(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/09/02」でのワークショップで使用したスライドです。
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
2019/7/8(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/07/08」でのスライドです。
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
2019/05/17(金)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。 カラーユニバーサルデザイン 推奨配色セット ガイドブック(第2版) http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。
コントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
Recommandé
Las Vegasで開催されたCGE2012の旅行記
Cge2012 all 600
Cge2012 all 600
安隆 沖
私の暇つぶし方法
私の暇つぶし方法
monoris
WordPress にコミットしてよかったこと | WP-D Fes #01
WordPress にコミットしてよかったこと | WP-D Fes #01
Odyssey Eightbit
2019/11/2(土)にハッシュタグにて行われた「リーダブルな昼下がり on 2019/11/02」でのセッションで使用したスライドです。
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
2019/9/2(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/09/02」でのワークショップで使用したスライドです。
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
2019/7/8(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/07/08」でのスライドです。
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
2019/05/17(金)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。 カラーユニバーサルデザイン 推奨配色セット ガイドブック(第2版) http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。
コントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada
2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】 代替テキスト決定ツリー:http://bit.ly/readable_ALT
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
※ P.83に注釈を追加しました。 2017-06-10(土)に倉敷物語館にて行われた「第7回 okayama-js」でのスライドです。
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
2017-06-03(土)にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
2017-05-18(木)に神戸商工貿易センタービルにて行われた「アクセシビリティの祭典」でのスライドです。
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
(※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09) 2017-03-05(日)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
2016-09-22(木)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。 公開にあたり下記の編集を加えました。 1.資料中の下線箇所にハイパーリンクを張りました。 2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90) ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82) ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90) 3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Contenu connexe
Plus de Nozomi Sawada
2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】 代替テキスト決定ツリー:http://bit.ly/readable_ALT
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
※ P.83に注釈を追加しました。 2017-06-10(土)に倉敷物語館にて行われた「第7回 okayama-js」でのスライドです。
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
2017-06-03(土)にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
2017-05-18(木)に神戸商工貿易センタービルにて行われた「アクセシビリティの祭典」でのスライドです。
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
(※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09) 2017-03-05(日)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
2016-09-22(木)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2014-09-27(土)にJUSO Coworkingにて行われた「第2回 D2D アクセシビリティ勉強会」でのスライドです。 公開にあたり下記の編集を加えました。 1.資料中の下線箇所にハイパーリンクを張りました。 2.「実践してみよう」コーナーで当日ご指摘ありました箇所に追記しました。 ・「達成等級Aを満たす」→「達成等級Aの達成基準を満たす」(p.80/p.82/p.88/p.90) ・「実装方法:H73」→「実装方法:H73(の事例1)」(p.79/p.80) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H73-1)」(p.82) ・「実装方法:H81」→「実装方法:H81(の事例1)」(p.87/p.88) ・「アクセシビリティ・サポーテッド情報」→「アクセシビリティ・サポーテッド情報(H81-1)」(p.90) 3.実装方法から達成基準を遡る手順が説明不足でしたのでページを追加しました。(p.81/p.89)
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Plus de Nozomi Sawada
(14)
代替テキストの基本から応用まで
代替テキストの基本から応用まで
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
こんなとき実感!代替テキストと字幕の大切さ
1.
1 こんなとき実感! 代替テキストと字幕の大切さ アクセシビリティの祭典 2018 2018年5月17日
2.
2 自己紹介
3.
3 浮かべては 飲み干して 神戸の港は グラスのお酒 船の数だけ 想い出を 少し疲れた神戸のマダム 皿海 佳子
4.
4 迷走する 黒眼鏡 くるくるパーマで よそ行きの ガリガリというより シワシワの 老眼の進んだ岡山の中年講師 澤田 望
5.
5 銀河をはなれ イスカンダルへ 必ずここへ 帰ってくると 手を振る人に 笑顔で応え はるばるのぞむ 宇宙戦艦 みるく
6.
6 D2Dアクセシビリティ勉強会って?
7.
7
8.
8
9.
9 講師陣の寸劇を通して アクセシビリティの重要性を学ぶ
10.
10 皆さんに、どうしても見せたい画像があるの。
11.
11 オヤオヤ、みるくさん 今は音声通話してますけど?
12.
12 でも、どうしても見せたいのお!
13.
13 こちらから画像は見えないんですけど、 どんな感じの画像なんですか?
14.
14 アニメ「ワンピース」の登場キャラクター 「ブルック」と、「なりたい顔No.1」の女優 「石原さとみ」のツーショット写真です。
15.
15 どんな写真なのか、想像できましたか?
16.
16 やはり、画像を見たいので メールで送ってもらえますか?
17.
17 はい。送りました。
18.
18 まだ届きませんね。
19.
19 送りましたけど。
20.
20 イスカンダルは遠いですからね。
21.
21
22.
22
23.
23
24.
24
25.
25 大津市
26.
26 船で送ってませんから。
27.
27 届きました。
28.
28
29.
29 寸劇おしまい
30.
30 会場の皆さん: • 画像の情報を視覚的に得られない状況 • 説明(聴覚+文字)だけでどんな画像なのかを想像 寸劇のふり返り
31.
31 会場の皆さん: • 画像の情報を視覚的に得られない状況 • 説明(聴覚+文字)だけでどんな画像なのかを想像 寸劇のふり返り 画像に対する代替テキスト
32.
32 アニメ「ワンピース」の登場キャラクター「ブルック」と 「なりたい顔No.1」の女優「石原さとみ」のツーショット写真
33.
33 正しい情報が提供されていましたね。
34.
34 判断できる人: •画像の内容を視覚的に把握できて、かつ代替テキストの内 容と比較できる人(原稿作成者と実装する制作担当者) 代替テキストの適切さの判断
35.
35 それ以外の人: •画像を見るだけ/代替テキストを読むだけ •比較して適切かどうかという視点を持つことすらない 代替テキストの適切さの判断 間違っていても気がつくことができない
36.
36 みるくさんの説明をもう少し 掘り下げて見ていきましょう。
37.
37 「ブルック」
38.
38 いきなり「ブルック」と言われても 何だか分からない人が多いかも。
39.
39 「ワンピース」の「ブルック」
40.
40 「ワンピース」の中の何なのか 分からないかも。
41.
41 「ワンピース」の登場キャラクター「ブルック」
42.
42 「ワンピース」を知らない人がいるかも 知れないわ! そうよ、「ワンピース」が アニメだということを伝えねば!
43.
43 アニメ「ワンピース」の登場キャラクター「ブルック」
44.
44 これで、完璧な代替テキストができたわ。 ホーッホッホ(誰)
45.
45 「ワンピース」観てないんだよね。
46.
46 アニメ「ワンピース」の登場キャラクター「ブルック」 ブルック | キャラクター
| ワンピースとは | https://one-piece.com/log/character/detail/brook.html より
47.
会場の皆さん:「ワンピース」の内容を知らない アニメ「ワンピース」に登場する くるくるパーマでガリガリのギター弾き キャラクター「ブルック」 47 画像が使われるコンテンツのコンテキスト
48.
48 会場の皆さん:「ワンピース」の内容をよく知っている 「ブルック」だけでいいかも 画像が使われるコンテンツのコンテキスト
49.
49 代替テキストの内容は、コンテンツの コンテキストによるので注意。
50.
50 では、次に「石原さとみ」の件ですが...
51.
51 「なりたい顔No.1」の女優「石原さとみ」
52.
52 ちょっと。
53.
53 はい?
54.
54 そっちも掘り下げるの?
55.
55 だってちゃんと検証しないと。
56.
56 どうして...も?
57.
57 代替テキストについては以上です。
58.
58 最後に、みるくさんから アクセシビリティで欠かせない大切なこと を伝えていただきます。
59.
59 これだけは覚えて帰っていただきたい、 アクセシビリティで欠かせない大切なこと をお伝えします!
60.
60
61.
61 えっ
62.
62 みるくさんの伝えたいこと分かりましたか?
63.
63 でも、今の状況は変えられませんし...
64.
64 あっ! こんな時にアレがあれば 情報が伝えられるはず!
65.
65 分かりました。 もう一度伝えるので、よく聞いてください。
66.
66 普段は耳から情報を得られる人でも、 字幕がないと情報を得られない場面が、ちゃんとあるのよ~
67.
67 どうもありがとうございました。
68.
68 寸劇おしまい
69.
69 普段は耳から情報を得られる人でも、 字幕がないと情報を得られない場面が、ちゃんとあるのよ~
70.
70 耳で聞ける状況でも、別の手段で情報を欲しい場面がある 字幕 ≠ 聴覚障害者向けだけの情報提供 ポイント
71.
71 日本語字幕付きの洋画 Provide alternatives for time-based
media. 時間依存メディアには代替コンテンツを提供しろよ。
72.
72 岡山弁のセリフにつけられる共通弁の字幕 時間依存メディアには代替コンテンツを 提供せにゃぁおえんでぇ。 時間依存メディアには代替コンテンツを提供しなきゃだめだぞ。
73.
73 ちょっと、話が外れてきてない?
74.
74 少し戻します。
75.
75 同じ情報だとしても、時系列で流れてしまうメディア(音声 や字幕など)よりも自分でスピードをコントロールできる メディア(デジタルなテキスト情報など)の方が理解しや すいこともある 耳で聞ける状況でも、別の手段で情報を欲しい場面がある
76.
76 聴覚過敏 聴覚過敏保護シンボルマーク | 株式会社
石井マーク | www.ishiimark.com/symbol_usapin.html より
77.
77UDトーク | App
Store より
78.
78 字幕の基準について少し。
79.
79字幕を制作するときに | テープ起こし・字幕制作・翻訳制作ソフトウエア「おこ助」https://okosuke.jp
より
80.
80 1.長いセリフは一度に多く表示すべき? 細かく分解すべき? 2.各字幕の間は何秒くらい空けるべき? 3.話者や状況説明の入れ方にルールはある?
81.
81 1.28文字 (14文字×2行) を7秒間表示できるなら 表示してしまった方が理解しやすい 2.各字幕の間は0.1秒以上 3.話者
(澤田) や状況説明 (ベル音) は半角()
82.
まとめ 82
83.
視覚から得られる情報 83 得られる情報を近づけたい ≒ 聴覚から得られる情報
84.
84
85.
85
86.
86 ありがとうございました。 @SawadaStdDesign
Télécharger maintenant