Enviar búsqueda
Cargar
アクセシビリティからはじめる、WebサイトのUXデザイン
•
52 recomendaciones
•
51,699 vistas
Yoshinori OHTA
Seguir
デザイニングWebアクセシビリティ刊行記念イベント <http: /> で使用したスライドです。
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 175
Descargar ahora
Descargar para leer sin conexión
Recomendados
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
Yoshinori OHTA
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Recomendados
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
アクセシビリティからはじめる、WebサイトのUI/UXデザイン
Yoshinori OHTA
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
akihiro_0228
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
Yoshinori OHTA
Más contenido relacionado
Destacado
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
akihiro_0228
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
Destacado
(20)
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Sketchで変わるワークフロー
Sketchで変わるワークフロー
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
確実に良くするUI/UX設計
確実に良くするUI/UX設計
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
UX / UIデザインって何?
UX / UIデザインって何?
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
Más de Yoshinori OHTA
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
Yoshinori OHTA
個人情報の観点から見るサイトセキュリティの重要性
個人情報の観点から見るサイトセキュリティの重要性
Yoshinori OHTA
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
Yoshinori OHTA
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編
Yoshinori OHTA
アクセシビリティガイドラインの見方・使い方 002
アクセシビリティガイドラインの見方・使い方 002
Yoshinori OHTA
デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話
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年の変貌
実はできているWebアクセシビリティ ヒカラボ編
実はできているWebアクセシビリティ ヒカラボ編
アクセシビリティガイドラインの見方・使い方 002
アクセシビリティガイドラインの見方・使い方 002
デザイニングWebアクセシビリティ 誕生秘話
デザイニングWebアクセシビリティ 誕生秘話
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
アクセシビリティ vs セキュリティ ~こんな対策はいらない!~
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のwebアプリケーション
「マシンリーダビリティ」がユーザー体験を加速する
「マシンリーダビリティ」がユーザー体験を加速する
アクセシビリティからはじめる、WebサイトのUXデザイン
1.
アクセシビリティからはじめる、 WebサイトのUXデザイン BAの実践例に見る、ボトムアップとトップダウンのアプローチ
2.
注意事項 会場は禁煙です。 喫煙は館外の指定の場所でお願いいたします。 本イベントのハッシュタグは#a11ybooksとなります。
イベントの模様は自由に撮影いただき、ブログやSNS等で 拡散いただいて構いません(むしろお願いします)。 主催者も、公式Facebookページ用に写真撮影をいたします (ご了承ください) スライドの公開は公式Facebookからご案内します。 2
3.
本日の流れ ご挨拶・アイスブレイク セッション1:マークアップからの取り組み ~ボトムアップのアプローチ~
セッション2:デザインからの取り組み ~ビジュアルデザインとコンテンツ設計のアプローチ~ 休憩 セッション3:戦略からの取り組み ~トップダウンのアプローチ~ 3
4.
自己紹介 4
5.
BA 5
6.
ウェブアクセシビリティ基盤委員会(WAIC) 6
7.
デザイニングWebアクセシビリティ 7
8.
マークアップからの取り組み ~ボトムアップのアプローチ~
9.
このセッションでお話しすること HTMLとアクセシビリティ HTMLとは? アクセシビリティとは? マークアップで気をつけること
HTMLと代替テキスト CSSによる画像置換 悩ましい事例とさまざまなアプローチ例 9
10.
HTMLとアクセシビリティ 10
11.
アクセシビリティとは さまざまな利用者が さまざまな環境でアクセス可能であること 情報を認識して理解できる さまざまな選択肢が提供されている
自分に合った形で利用できる 11
12.
さまざまな環境 12
13.
ビジュアルブラウザ(Firefox) 13
14.
テキストブラウザ(w3m) 14
15.
ダウンローダー(SiteSucker) 15
16.
クローラー(Googlebot) 16
17.
ハイコントラストモード 17
18.
ハイコントラストモード 18
19.
拡大ツール(Windows拡大鏡) 19
20.
スクリーンリーダー(NVDA) 20
21.
スクリーンリーダー(VoiceOver) 21
22.
代替マウス 22
23.
点字ディスプレイ 23
24.
視線入力装置 24
25.
さまざまな環境に対応するには? 25
26.
重要なのはマシンリーダビリティ さまざまなプログラムで処理できること =マシンリーダビリティ(機械可読性)が高い アクセシビリティの確保に重要なのは プログラムで処理できるようにしておくこと =マシンリーダビリティを確保すること
Webがアクセシブルなのはマシンリーダブルだから 26
27.
プレーンテキストの場合 ■デザイニングWebアクセシビリティ ●訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実 践的な内容 ・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介 ・上流から下流まで、制作プロセスの全てをカバー ・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 ●取り組みの背景 ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけで なく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力した りと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができま す。 27
28.
プレーンテキスト=ヒューマンリーダブル 見出し、箇条書きらしきものがある 頭に記号を付けるなどして、 見出しや箇条書きを表現している 人間が見ればそれらしく見えるが…… 機械が処理するときどうか?
決まったルールになっているのか? 28
29.
HTMLとは? HypertextMarkupLanguage Webコンテンツの核となるマークアップ言語 テキストにさまざまなマークを付けることで、 その意味(セマンティクス)を明確にする
マークを付けること=マークアップ 29
30.
HTMLでマークアップした場合 <!DOCTYPEhtml> <htmllang=“ja”> <head> <title>デザイニングWebアクセシビリティ</title> </head> <body> <h1>デザイニングWebアクセシビリティ</h1> <h2>訴求ポイント(この本が既存の本と異なる点)</h2> <ul> <li>「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容</li> <li>解決アプローチの例として、実際に公開されているサイトの実例を多数紹介</li> <li>上流から下流まで、制作プロセスの全てをカバー</li> <li>デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視</li> </ul> <h2>取り組みの背景</h2> <p>ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスした り、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることがで きます。</p> </body> </html> 30
31.
HTML=マシンリーダブル マークアップすると要素の意味が明確になる 明確なルールにのっとっているため、 機械的に判断することが容易 マシンリーダビリティが確保される HTMLをきちんとマークアップすれば さまざまなツールで利用しやすくなり アクセシビリティが高まる 31
32.
マークアップで気をつけること 32
33.
HTMLと アクセシビリティといえば? 33
34.
代替テキスト 34
35.
代替テキストとは? 画像の代替となるテキスト 画像が表示できないとき、代わりに使われる HTMLではimg要素のalt属性で指定 例:<imgsrc=”foo.png”alt=”代替テキスト”/> 35
36.
厚生労働省 36
37.
災害情報(?)部分の冒頭 37
38.
そのソース <divid="earthquakettitle"class="prt-disasterInfo"> <pstyle="margin:0010px-3px"> <ahref="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message_large.png"alt="日本年金機構にお ける不正アクセスによる情報流出事案について"border="0"></a> </p> <!— <pstyle="margin:0010px-3px"> <ahref="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message.png"alt="日本年金機構不正アクセ ス事案について 年金情報をめぐり、なりすましなどの犯罪が起こっています。ご 注意ください。"border="0"></a> </p> --> 38
39.
大臣・副大臣・政務官の紹介 39
40.
スクリーンリーダーで読むと、 大臣・副大臣の名前は 何回読まれるでしょう? 問題 40
41.
答え:合計7回 41
42.
うち大臣は3回 42
43.
大臣のHTML <divclass=“contents”> <pclass=“ruby”>しおざき やすひさ</p> <pclass=“name”>塩崎 恭久</p> <p><ahref=“/kouseiroudoushou/profile/daijin.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <divclass=“image”> <imgsrc=“images/daijin_img_01.jpg”alt=“塩崎
恭久” width=“137”height=“155”/> </div> 43
44.
副大臣のHTML <divclass=“contents”> <pclass=“ruby”>たけうち ゆずる</p> <pclass=“name”>竹内 譲</p> <p><ahref=“/kouseiroudoushou/profile/hukudaijin01.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <divclass=“image”> <imgsrc=“images/hukudaijin_img_01.jpg”alt=“” width=“137”height=“155”/> </div> 44
45.
冗長な代替テキスト 45
46.
46
47.
代替テキストまとめ 代替テキストを適切に指定することが重要 適切に付けられていないと、 全くアクセスできなくなることがある つけすぎも良くない 写真や装飾に過剰なテキストを指定しない
装飾には空の代替テキストを 47
48.
代替テキストの悩ましい例と アプローチの例 48
49.
特許庁の組織図 49
50.
特許庁の組織図のalt <divid=“tmp_contents”> <h1>組織図</h1> <p><imgalt=“特許庁の組織図” width=“530” height=“706” src=“/shoukai/soshiki/images/soshikizu.jpg” /></p> <p class=“right”><em>[更新日
2015年5月13日] </em></p> </div> 50
51.
文部科学省のアプローチ 51
52.
文部科学省の組織図 52
53.
文部科学省の組織図のalt <imgsrc=“04/001.gif”alt=“平成27年度文部科学省の組織図 (平成27年10月1日現在) 文部科学大臣 副大臣(2名) 大臣政務官(2名) 事務次官 文部科学審議官(2名) 大臣官房 人事課 総務課 会計課 政策課 国際課 文教施設企画部 施設企画課 施設助成課 計画課 参事官 生涯学習政策局 政策課 調査企画課 生涯学習推進課 (後略、全129行) 53
54.
法務省のアプローチ 54
55.
法務省の組織図 55
56.
AOI Pro. のアプローチ 56
57.
AOIPro.の組織図 57
58.
AOIPro.の組織図周辺のマークアップ <objectclass=“svg-image”data=“/files/chart-5-2.svg”width=“100%”> <divclass=“bass-list-A01”> <ul> <li>株主総会 <ul> <li>監査役会</li> </ul> </li> <li>取締役会</li> <li>代表取締役社長 <ul> <li>経営会議</li> <li>第一プロダクションディビジョン <ul> <li>制作ユニット</li> (後略) 58
59.
AOIPro.の組織図そのもののマークアップ(抜粋) <gid=“svg-obj01-01”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>株主総会</text> </g> <gid=“svg-obj01-02”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>取締役会</text> <pathd=“M1000v-49”/> </g> <gid=“svg-obj01-03”> <usexlink:href=“#svg-box01-01”/> <textx=“100”y=“21”>代表取締役社長</text> <pathd=“M1000v-50”/> </g> <gid=“svg-obj02-01”> <usexlink:href=“#svg-box01-02”/> <textx=“100”y=“21”>監査役会</text> <pathd=“M015h-100”/> </g> 59
60.
考えてみよう! 60
61.
考えてみよう どのアプローチが望ましいでしょうか? アクセスのしやすさ 運用のしやすさ もっと他のアプローチはないでしょうか? 61
62.
CSSによる画像置換 62
63.
厚生労働省 63
64.
ハイコントラストモード 64
65.
DOMツリー 65
66.
CSSまとめ CSSで指定された背景画像はあくまで背景 背景なので、背景を非表示にすると消えてしまう ハイコントラストモードや印刷時に出てこない 意味のある画像は背景にしない
意味のある画像はCSSではなく、HTMLで 66
67.
OK:意味のある画像は前景に置く 67
68.
OK:代替テキストが必要な画像は前景に置く 68
69.
デザインからの取り組み ~ビジュアルデザインとコンテンツ設計のアプローチ~
70.
このセッションでお話しすること コンテンツをデザインするプロセス ビジュアルデザインで気をつけること 悩ましい代替テキストへのアプローチ インタラクション
カルーセル問題とさまざまなアプローチ例 要件定義で気をつけること 70
71.
コンテンツをデザインするプロセス 71
72.
コンテンツをデザインするプロセス 要件定義 このサイトにどのようなコンテンツが必要になるか? コンテンツ設計 コンテンツとしてどのような要素を持たせるか? ビジュアルデザイン
コンテンツの各要素をどのように見せるか? 72
73.
それぞれのプロセスで決めることの例 要件定義 このサイトには買い物かごの機能が必要 コンテンツ設計 表示するのは商品名、商品写真、金額、個数……etc. ビジュアルデザイン
写真を左に配置して商品名を大きく、 その後に金額と個数も読めるように配置……etc. 73
74.
ビジュアルデザインで 気をつけること 74
75.
よく言われる「わかりやすい」デザイン 1. コントラストを高めて見分けやすく 2. 行間や一行の文字数を工夫して読みやすく 3.
どこが押せるかわかりやすく 4. リンクやボタンを大きくして押しやすく 5. スタイルを一貫させて認識しやすく 75
76.
実は重要な5つのポイント 1. 視覚に依存せずテキストで示す 2. 文字は画像にせずテキストにする 3.
フォーカス表示を消さない 4. 閃光を使わない 5. 拡大できるようにする 76
77.
特に重要なのは 視覚に依存しないこと 77
78.
NG:色に頼った表現 78
79.
OK:色だけでなくテキストにも変化をつける 79
80.
NG:配置に頼った表現 80
81.
OK:見た目の特徴だけでなく名前でも指示する 81
82.
NG:文字の装飾に頼った表現 82
83.
OK:打ち消し線だけでなくテキストも併記する 83
84.
悩ましい代替テキストへの デザインプロセスからのアプローチ 84
85.
代替テキストが悩ましい例は、 デザインに遡ることで 解決できることがある 85
86.
グラフと元データを併記する 86
87.
充実したキャプションをつける 87
88.
インタラクション 88
89.
インタラクションとは Inter-action 相互作用のこと ユーザーとシステムの相互作用のこと 狭義には
ユーザーがなんらか操作(入力)すると 動いたり変化したりして反応(出力)するもの 89
90.
Webにおけるインタラクションの例 テキストリンク ボタン テキスト入力欄 スクロールバー 90
91.
動きを伴うインタラクションの例 91
92.
動きを伴うインタラクションの例 92
93.
カルーセル問題とアプローチ例 93
94.
カルーセルとは? 94
95.
Rio2016 95
96.
Rio2016 96
97.
Rio2016下部 97
98.
Rio2016下部 98
99.
なぜカルーセルが問題なのか 99
100.
読み終わる前に消えてしまう/誤操作する 100
101.
不意に動いた要素に注意を引かれてしまう 101
102.
動き続ける要素に注意を引かれてしまう 102
103.
OK:コンテンツが自動で動くが、すぐ止まる 103
104.
首相官邸のアプローチ 104
105.
首相官邸 105
106.
首相官邸 106
107.
富士通のアプローチ 107
108.
富士通 108
109.
じぶん銀行のアプローチ 109
110.
じぶん銀行 110
111.
考えてみよう! 111
112.
考えてみよう どのアプローチが望ましいでしょうか? アクセスのしやすさ 運用のしやすさ そもそも、 なぜカルーセルが求められるのでしょうか? 112
113.
要件定義で気をつけること 113
114.
危険なパターン 114
115.
PDF問題 115
116.
116
117.
紙もののコンテンツは要注意 PDFはアクセスしづらい場合がある 作り方によるが、スキャンした物は基本NG HTMLにするほうが圧倒的にアクセシブル HTMLにする場合も、ほぼ再構成が必要
固定のレイアウトが想定されていることが多く、 複雑な表や図版など、Webに適さない表現が多い 117
118.
戦略からの取り組み ~トップダウンのアプローチ~
119.
このセッションでお話しすること 戦略とは? 戦略で気をつけること アクセシビリティ方針を作ろう! アクセシビリティ方針の注意点
悩ましい事例とさまざまなアプローチ例 おわりに 119
120.
戦略とは? 120
121.
戦略とは? プロジェクトの目的を明確にするプロセス 企業や組織の行動には必ず目的がある 何のためにサイトを作るのか分からないと、 サイトに何が必要で何が不要かわからない 121
122.
戦略フェイズでやること 与件の整理 RFPの確認、前提の確認など ビジネス要件の調査 運営者、ビジネス、ユーザーなどの確認 プロジェクト要件定義
プロジェクトの目的、数値目標、スコープ等の確認 122
123.
戦略で気をつけること 123
124.
アクセシビリティ方針を作ろう! 124
125.
ウェブアクセシビリティ方針策定ガイドライン 125
126.
方針に明記すべき事項 対象範囲 サイト名やドメインなど、対象とする範囲を明示 除外する部分がある場合は、特定できるように明記 達成等級及び対応度
A~AAAのうち、どのレベルを目標とするか明記する 5つの対応度のうち、どの対応度とするか選択 適合/ 準拠/ 一部準拠/ 配慮し試験/ 配慮 126
127.
達成等級とは? WCAG 2.0は、アクセシビリティ確保のために 守るべき達成基準を定めている 達成基準にはA, AA,
AAA の 3つのレベルがある 127
128.
WCAG2.0 128
129.
レベルA どんなサイトも満たすべき、最低限の基準 この基準を満たせないと、支援技術を駆使しても 全くアクセスできなくなる場合がある 25項目の基準
非テキストコンテンツにテキストを用意する、 キーボードでも操作できるようにする、など 129
130.
レベルAA 望ましい基準 この基準を満たすと、支援技術を駆使しなくても 多くの環境でアクセスできるようになる 13項目の基準
最低限のカラーコントラスト、文字サイズなど 130
131.
レベルAAA 発展的な基準 この基準を満たすと、 よりアクセスしやすくなることがある 23項目の基準
レベルA~AAの基準を厳しくしたものに加え、 わかりやすい言葉を使う、など 131
132.
アクセシビリティ方針の注意点 132
133.
あいまいな方針 133
134.
厳しすぎる方針、具体的すぎる方針 134
135.
手段が目的になってしまう 135
136.
ランキング対策の「アクセシビリティ対応」 136
137.
ランキング対策の「アクセシビリティ対応」 137
138.
ガイドラインに適合させるもっとも簡単な方法 138
139.
アクセシビリティ方針のポイント 139
140.
無理のない範囲で定める 140
141.
明確に定める ガイドラインに沿って 目標とするレベルを決める 特にアクセシビリティが重要ならレベルAA 適用範囲、期限などをはっきりさせる 基本的にはサイト全体、公開時に対応でよい
例外ができてしまう場合は明確にする 141
142.
目的もドキュメント化する なぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる 公開されている他社の方針を参考にするのも良い
ただし、意味も分からずにコピペはNG 142
143.
厚生労働省のアプローチ 143
144.
アクセシビリティについて 144
145.
アクセシビリティについて(拡大) 145
146.
文部科学省のアプローチ 146
147.
アクセシビリティへの対応について 147
148.
ウェブアクセシビリティ方針 148
149.
ウェブアクセシビリティ取組み状況 149
150.
首相官邸のアプローチ 150
151.
151
152.
ヤフー株式会社のアプローチ 152
153.
ウェブアクセシビリティ方針 153
154.
ウェブアクセシビリティ方針(続き) 154
155.
グリー株式会社のアプローチ 155
156.
156
157.
ユーザー vs コンテンツ提供者 157
158.
ユーザーの都合とコンテンツの都合 基本的に、コンテンツは ユーザーに向けて提供されているもの そのため、ユーザーの方向を見ている しかし時には、コンテンツ提供側の都合で ユーザーメリットのない対応をすることも 典型例は広告
必ずしも悪いわけではなく、必要なこともある 158
159.
どうやって判断する? 159
160.
カルーセルの話 160
161.
カルーセルは何を解決するのか? コンテンツ提供側から見た カルーセルのメリットは 複数の要素を「同列」に表示できること 161
162.
なぜ「同列」であることが重要なのか? 序列をつけたくない場合がある 何を先頭に表示するのか、もめる場合 複数のコンテンツを平等に扱いたい場合 ユーザーのためというより、 コンテンツ提供側の政治的な要因 162
163.
考えてみよう! 163
164.
考えてみよう どうすればアクセシビリティへの取り組みを 進めていけるのでしょうか? そのために、 あなたには何ができるでしょうか? 自身のこととして、具体的に考えてみてください 164
165.
おわりに 165
166.
取り組むための重要なポイント1 制作の最初の段階から考える必要がある ビジュアルデザインや実装だけでは解決できない どのプロセスにも アクセシビリティのポイントがある 166
167.
取り組むための重要なポイント2 どのプロセスにも アクセシビリティのポイントがある Webに関わる全ての人に関係がある Webに関わるどんな人にもできることがある 167
168.
目の見えない人に 伝えるなんて無理? 168
169.
目の見えない人に 100%全てを伝えるのは無理 169
170.
100%でなければ ならないのか? 170
171.
アクセシビリティは0か100かではない! より多くの人により多くの情報が伝わればよい 少しでも多くの人に伝わるなら、 それは意味があること 171
172.
誰にもできることがある ほんの少しでも意味がある 172
173.
さあ、はじめよう! 173
174.
デザイニングWebアクセシビリティ 174
175.
ありがとうございました 175
Descargar ahora