Enviar búsqueda
Cargar
デザイニングWebアクセシビリティ 誕生秘話
•
3 recomendaciones
•
2,976 vistas
Yoshinori OHTA
Seguir
2015-08-26 アクセシビリティやるぞ!夏祭り 〜ライトニングトーク花火6連発〜 のライトニングトークのスライドです。
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 33
Descargar ahora
Descargar para leer sin conexión
Recomendados
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編
Yoshinori OHTA
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?
ourmaninjapan
「UXの期間」のループ構造と、 それぞれの内容を再考する ~ゲームをネタに
「UXの期間」のループ構造と、 それぞれの内容を再考する ~ゲームをネタに
Hideki Tabata
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
Daichi Isami
Recomendados
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編
Yoshinori OHTA
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?
ourmaninjapan
「UXの期間」のループ構造と、 それぞれの内容を再考する ~ゲームをネタに
「UXの期間」のループ構造と、 それぞれの内容を再考する ~ゲームをネタに
Hideki Tabata
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
Daichi Isami
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
Takaaki Ichijo
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Oss on Azure, Websites, WordPress
Oss on Azure, Websites, WordPress
Microsoft Openness Japan
20130222 osc tokyo
20130222 osc tokyo
Masaki Takeda
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
Hideto Ishibashi
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
Takaya Saeki
コンテナ技術と普及がシステム・インテグレータに与える影響
コンテナ技術と普及がシステム・インテグレータに与える影響
Masahito Zembutsu
第29回長岡開発者勉強会
第29回長岡開発者勉強会
Masaki Takeda
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
GoAzure
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Aya Tokura
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
Web OSで可能になる世界
Web OSで可能になる世界
Kensaku Komatsu
Windows phone!そういうのもあるのか
Windows phone!そういうのもあるのか
信之 岩永
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Hayato Hiratori
20141004 青森ハンズオン Azure概要
20141004 青森ハンズオン Azure概要
Sunao Tomita
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
Yoshinori OHTA
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
Más contenido relacionado
Similar a デザイニングWebアクセシビリティ 誕生秘話
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
Takaaki Ichijo
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Oss on Azure, Websites, WordPress
Oss on Azure, Websites, WordPress
Microsoft Openness Japan
20130222 osc tokyo
20130222 osc tokyo
Masaki Takeda
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
Hideto Ishibashi
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
Takaya Saeki
コンテナ技術と普及がシステム・インテグレータに与える影響
コンテナ技術と普及がシステム・インテグレータに与える影響
Masahito Zembutsu
第29回長岡開発者勉強会
第29回長岡開発者勉強会
Masaki Takeda
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
GoAzure
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Aya Tokura
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
Web OSで可能になる世界
Web OSで可能になる世界
Kensaku Komatsu
Windows phone!そういうのもあるのか
Windows phone!そういうのもあるのか
信之 岩永
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Hayato Hiratori
20141004 青森ハンズオン Azure概要
20141004 青森ハンズオン Azure概要
Sunao Tomita
Similar a デザイニングWebアクセシビリティ 誕生秘話
(19)
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
インタラクティブ・ストリーミングが変えるゲームコンテンツの未来
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Oss on Azure, Websites, WordPress
Oss on Azure, Websites, WordPress
20130222 osc tokyo
20130222 osc tokyo
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
第31回WebSig会議【セッション2】 タブレットが与える影響について考える
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
Ss systemdのwslディストロを作る kernelvm探検隊online part 3
コンテナ技術と普及がシステム・インテグレータに与える影響
コンテナ技術と普及がシステム・インテグレータに与える影響
第29回長岡開発者勉強会
第29回長岡開発者勉強会
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
ハイブリッドクラウドとして進化するWindows azureのご紹介 day1ハイライト
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Web OSで可能になる世界
Web OSで可能になる世界
Windows phone!そういうのもあるのか
Windows phone!そういうのもあるのか
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
20141004 青森ハンズオン Azure概要
20141004 青森ハンズオン Azure概要
Más de Yoshinori OHTA
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
Yoshinori OHTA
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
Yoshinori OHTA
アクセシビリティガイドラインの見方・使い方 002
アクセシビリティガイドラインの見方・使い方 002
Yoshinori OHTA
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
Yoshinori OHTA
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
Yoshinori OHTA
「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する
Yoshinori OHTA
Más de Yoshinori OHTA
(10)
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
アクセシビリティガイドラインの見方・使い方 002
アクセシビリティガイドラインの見方・使い方 002
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する
デザイニングWebアクセシビリティ 誕生秘話
1.
実はできている!? Webアクセシビリティ
2.
本⽇の流れ アクセシビリティとは? 実はできている!?
アクセシビリティだと思っていたが……? 2
3.
3
4.
BA 4
5.
WAIC 5
6.
デザイニングWebアクセシビリティ 6
7.
アクセシビリティとは?
8.
アクセシビリティとは accessibility=accsess+ability さまざまな利⽤者が 情報を さまざま
形で利⽤できる 8
9.
さまざまな 環境 9
10.
ビジュアルブラウザ(Firefox) 10
11.
テキストブラウザ(w3m) 11
12.
ダウンローダー(SiteSucker) 12
13.
クローラー(Googlebot) 13
14.
ハイコントラストモード 14
15.
ハイコントラストモード 15
16.
拡⼤ツール(Windows ) 16
17.
スクリーンリーダー(NVDA) 17
18.
スクリーンリーダー(VoiceOver) 18
19.
さまざまな⼊⼒環境 19
20.
さまざまな⼊⼒ マウス、トラックパッド、トラックボール、マウス キー、代替マウス、タッチデバイス、キーボード、 … … 20
21.
21
22.
22
23.
を使ってアクセスしている http://www.soumu.go.jp/menu_news/s- news/2005/051215_1_wmv.html 23
24.
アクセシビリティだと 思っていたが……?
25.
何を思い浮かべますか? したサイトとは? 25
26.
26
27.
「本⽂へ」リンク 27
28.
カルーセル停⽌/再⽣ボタン 28
29.
JIS 1.4.4 なしで200 %までサイズ変更できる AA 29
30.
? 30
31.
サイズ:⼩ 31
32.
サイズ:中 32
33.
サイズ:⼤ 33
34.
を満たさないサイトが多い 200%の拡⼤が求められているが、 例⽰したサイトでは約133%まで
画像が多⽤されていると ほとんど変わらないことも 34
35.
総務省 35
36.
2.1.4. 36
37.
2.1.4. ホームページ する事例がありますが、これだけでは、ウ ェブアクセシビリティに対応しているとは 37
38.
Webアクセシビリティの確保は特別なことではない。 38
39.
植⽊さんのコメント 、ほとんど⽂字の⼤きさが変わ らない⽂字サイズ変更ボタンが少なくない Webブラウザであれば 意味のない⽂字サイズ変更ボタンは 39
40.
基準を満たす⽅法の例 40
41.
⽂字サイズを変えられるようにする ⽂字サイズ変更ボタンをつける ⽂字サイズを変えても はみ出したりしないようにする 41
42.
ここまでのまとめ 42
43.
ここまでのまとめ あまり役に⽴っていないこともある ⽂字サイズが変更できることは⼤切だが ⽂字サイズ変更ボタンでなくてもよい 43
44.
⽂字サイズ変更ボタンは なくてもいい! もっと⼤切なことがある! ? 44
45.
気づかないうちに アクセシビリティを確保していた! デザイン編〜
46.
ガイドライン(続き) ホームページ等にアクセスしています。 46
47.
アクセスできることが つまり 47
48.
テキストが明確 ちゃんとマークアップされている
テキストが存在しない、あいまい ちゃんとマークアップされてない 48
49.
実は⼤切なこと 1. ページタイトルをきちんとつける 2. 3. 4. 画像に 5.
キーボードだけで操作できる 49
50.
ページタイトルをきちんとつける 50
51.
ブラウザのタブ名 ブックマークのタイトル サーチエンジンやサイト内検索結果 からのリンク 51
52.
OK:内容 52
53.
NG:ページタイトルがない 53
54.
NG:他のページと区別できないタイトル 54
55.
55
56.
56
57.
OK:レベルに沿った具体的 57
58.
OK: 58
59.
NG: がない 59
60.
NG: から内容を推測できない 60
61.
NG: 61
62.
62
63.
形・⼤きさ 63
64.
OK: だけでなくラベルに変化をつける 64
65.
NG: 65
66.
NG: 66
67.
画像に 67
68.
画像は利⽤できないことがある 画像が利⽤できない状況 スクリーンリーダーを使っている 68
69.
OK:本⽂ 69
70.
NG:画像だけで情報が提供されている 70
71.
代替テキストとは? 画像の代替となるテキスト HTMLでは img
alt属性で指定 例: <img src=”foo.png” alt=”代替テキスト” /> 71
72.
画像だけに着⽬すると失敗しやすい 前後の⽂や、ページのテーマを含めて考える 「alt
ない alt属性」 本⽂がきちんとしていれば「カラ alt=“” 」 72
73.
OK: 73
74.
OK: 74
75.
NG: 75
76.
NG:代替テキストとキャプションがかぶっている 76
77.
NG:画像 77
78.
HTMLのimg 代替テキストが できる
スクリーンリーダーやクローラーにも伝わる CSS ハイコントラストモードや印刷プレビューで消える スクリーンリーダーやクローラーには伝わらない 78
79.
OK:意味のある画像は前景に置く 79
80.
NG: 80
81.
NG: 81
82.
キーボードだけで操作できる 82
83.
OK:キーボード 83
84.
OK:切り替えボタンを明⽰する 84
85.
OK:フォーカス 85
86.
NG:マウスクリックでしか操作できない 86
87.
NG:マウスオーバーでしか操作できない 87
88.
NG:スワイプでしか操作できない 88
89.
NG:フォーカス 89
90.
まとめ
91.
⽂字サイズ変更ボタンは なくてもいい! さらに もっと⼤切なことがある! もう⼀度 91
92.
テキストが明確 ちゃんとマークアップされている
テキストが存在しない、あいまい ちゃんとマークアップされてない 92
93.
実は特別なことではない 何 テキストが存在しなければマークアップできない マークアップしてもわかりにくいまま 93
94.
つまり… どのプロセスにも アクセシビリティのポイントがある Web Web 94
95.
さあ、はじめよう! 95
96.
デザイニングWebアクセシビリティ 96
97.
ありがとうございました
Descargar ahora