SlideShare a Scribd company logo
Submit Search
Upload
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Report
Share
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
•
1 like
•
1,655 views
1
of
41
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
•
1 like
•
1,655 views
Report
Share
Download Now
Download to read offline
Internet
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
Read more
Nozomi Sawada
Designer at SAWADA STANDARD DESIGN
Follow
Recommended
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」 by
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2.2K views
•
67 slides
岡山で アクセシビリティ はじめよーでー by
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
2.4K views
•
42 slides
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」 by
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
2.4K views
•
57 slides
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 by
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
8.4K views
•
43 slides
ギリギリUXD by
ギリギリUXD
uenoyuuki
2.7K views
•
36 slides
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪 by
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
4.6K views
•
38 slides
More Related Content
What's hot
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性 by
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
185 views
•
32 slides
デザイナーからみた仕事をしやすいディレクター by
デザイナーからみた仕事をしやすいディレクター
take-it
73.9K views
•
53 slides
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮 by
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
3.4K views
•
56 slides
Webアクセシビリティが無視されすぎで気にくわない。 by
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
27K views
•
47 slides
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト by
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
2.2K views
•
35 slides
コーディングを考慮したWebデザインガイドライン by
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
188.1K views
•
44 slides
What's hot
(20)
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性 by yukahatakeyama
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
•
185 views
デザイナーからみた仕事をしやすいディレクター by take-it
デザイナーからみた仕事をしやすいディレクター
take-it
•
73.9K views
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮 by schoowebcampus
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
•
3.4K views
Webアクセシビリティが無視されすぎで気にくわない。 by uenoyuuki
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
•
27K views
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト by Yuya Toida
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
•
2.2K views
コーディングを考慮したWebデザインガイドライン by Hiroyuki Makishita
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
•
188.1K views
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次 by schoowebcampus
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
schoowebcampus
•
5.6K views
デザイナーが複業でデザイナーしてる話 by Yuya Toida
デザイナーが複業でデザイナーしてる話
Yuya Toida
•
2.8K views
あなたの価値を高めるWebアクセシビリティ by 力也 伊原
あなたの価値を高めるWebアクセシビリティ
力也 伊原
•
10.9K views
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司 by schoowebcampus
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
•
20.6K views
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫 by Yusuke Tamukai
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
Yusuke Tamukai
•
2.3K views
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み by Yuya Toida
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
•
3.9K views
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで by Yusuke Tamukai
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
Yusuke Tamukai
•
3.4K views
デザインスプリントを実践して分かったこと by sizucca
デザインスプリントを実践して分かったこと
sizucca
•
1.6K views
聞いて覚えるマテリアルデザイン入門 by 正樹 平野
聞いて覚えるマテリアルデザイン入門
正樹 平野
•
5.3K views
あなたの言葉で伝えるWebアクセシビリティ by Kobayashi Daisuke
あなたの言葉で伝えるWebアクセシビリティ
Kobayashi Daisuke
•
9.8K views
コンセプトの重要性についてうんぬん by Kenta Nakamura
コンセプトの重要性についてうんぬん
Kenta Nakamura
•
96.5K views
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8 by Koji Aihara
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
Koji Aihara
•
852 views
ワークショップとUX ――なぜ今ワークショップが重要なのか by Hitomi Yamagishi
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
•
4.3K views
アクセシビリティとこれからのWebデザイン by 力也 伊原
アクセシビリティとこれからのWebデザイン
力也 伊原
•
24.8K views
Similar to 第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏 by
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
Developers Summit
19K views
•
93 slides
デスクトップアプリを『一歩前へ』進める方法 by
デスクトップアプリを『一歩前へ』進める方法
グレープシティ株式会社 ツール事業部
1.2K views
•
50 slides
Dxライブラリテンプレート作成のすすめ by
Dxライブラリテンプレート作成のすすめ
Umebosi
1.6K views
•
20 slides
アジャイルリーダーシップと組織改革 ~楽天のアジャイル開発というリアル~ by
アジャイルリーダーシップと組織改革 ~楽天のアジャイル開発というリアル~
Dai FUJIHARA
10.9K views
•
105 slides
アジャイルリーダーシップと組織改革 by
アジャイルリーダーシップと組織改革
Rakuten Group, Inc.
979 views
•
105 slides
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD] by
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
Koichiro Matsuoka
3.8K views
•
32 slides
Similar to 第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
(20)
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏 by Developers Summit
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
Developers Summit
•
19K views
デスクトップアプリを『一歩前へ』進める方法 by グレープシティ株式会社 ツール事業部
デスクトップアプリを『一歩前へ』進める方法
グレープシティ株式会社 ツール事業部
•
1.2K views
Dxライブラリテンプレート作成のすすめ by Umebosi
Dxライブラリテンプレート作成のすすめ
Umebosi
•
1.6K views
アジャイルリーダーシップと組織改革 ~楽天のアジャイル開発というリアル~ by Dai FUJIHARA
アジャイルリーダーシップと組織改革 ~楽天のアジャイル開発というリアル~
Dai FUJIHARA
•
10.9K views
アジャイルリーダーシップと組織改革 by Rakuten Group, Inc.
アジャイルリーダーシップと組織改革
Rakuten Group, Inc.
•
979 views
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD] by Koichiro Matsuoka
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
Koichiro Matsuoka
•
3.8K views
Blendの便利機能振り返り by 一希 大田
Blendの便利機能振り返り
一希 大田
•
2.4K views
夏サミ2013 基調講演 「DevOpsは開発現場とビジネスの間に何を生むか?」(新野淳一氏) by Developers Summit
夏サミ2013 基調講演 「DevOpsは開発現場とビジネスの間に何を生むか?」(新野淳一氏)
Developers Summit
•
4.7K views
MY JOB WEND TO VIETNUM? DevSumi ver. by Ryo Amano
MY JOB WEND TO VIETNUM? DevSumi ver.
Ryo Amano
•
8.7K views
ドメイン駆動設計再入門 by Yukei Wachi
ドメイン駆動設計再入門
Yukei Wachi
•
14.8K views
【15-e-7】Kinectから始まったスタートアップ #devsumi by Kaoru NAKAMURA
【15-e-7】Kinectから始まったスタートアップ #devsumi
Kaoru NAKAMURA
•
2.7K views
プロジェクト管理ツールを使いこなせるようになった現場の話 by GuildWorks
プロジェクト管理ツールを使いこなせるようになった現場の話
GuildWorks
•
545 views
プロジェクト管理ツールを使いこなせるようになった現場の話 by Yoh Nakamura
プロジェクト管理ツールを使いこなせるようになった現場の話
Yoh Nakamura
•
2.6K views
プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう! by Yasuhiko Yamamoto
プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう!
Yasuhiko Yamamoto
•
1.4K views
ドメイン駆動設計を実践するプログラマーの悩み by haljik Seiji
ドメイン駆動設計を実践するプログラマーの悩み
haljik Seiji
•
4.6K views
ドメイン駆動設計におけるシナリオテストの活用 by Takehiro Inoue
ドメイン駆動設計におけるシナリオテストの活用
Takehiro Inoue
•
3.5K views
Glide活用イメージ紹介20220421 by kazu_1803
Glide活用イメージ紹介20220421
kazu_1803
•
122 views
Visual Studio を使わず .NET する by m ishizaki
Visual Studio を使わず .NET する
m ishizaki
•
274 views
「アジャイル入門」(AgileJapan2013チュートリアルセッション資料) by Makoto Nishikawa
「アジャイル入門」(AgileJapan2013チュートリアルセッション資料)
Makoto Nishikawa
•
14.3K views
次世代Web業務アプリケーション by Fumio SAGAWA
次世代Web業務アプリケーション
Fumio SAGAWA
•
12.8K views
More from Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ by
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
1.9K views
•
84 slides
「誰」が「何」をする?みんなで考えてみよう! by
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
564 views
•
22 slides
UDトークで会話をアクセシブルにしてみよう by
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
1.5K views
•
48 slides
色にまつわるエトセトラ(いろいろ) by
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
1.2K views
•
95 slides
コントラスト高めでいこう by
コントラスト高めでいこう
Nozomi Sawada
2.9K views
•
81 slides
代替テキストの基本から応用まで by
代替テキストの基本から応用まで
Nozomi Sawada
5.3K views
•
62 slides
More from Nozomi Sawada
(15)
中小企業のWebサイトでも気にしておきたいアクセシビリティ by Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
•
1.9K views
「誰」が「何」をする?みんなで考えてみよう! by Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
•
564 views
UDトークで会話をアクセシブルにしてみよう by Nozomi Sawada
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
•
1.5K views
色にまつわるエトセトラ(いろいろ) by Nozomi Sawada
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
•
1.2K views
コントラスト高めでいこう by Nozomi Sawada
コントラスト高めでいこう
Nozomi Sawada
•
2.9K views
代替テキストの基本から応用まで by Nozomi Sawada
代替テキストの基本から応用まで
Nozomi Sawada
•
5.3K views
岡山をリーダブルな世界に by Nozomi Sawada
岡山をリーダブルな世界に
Nozomi Sawada
•
725 views
こんなとき実感!代替テキストと字幕の大切さ by Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
•
1K views
Webアクセシビリティ 今ならどうするの? by Nozomi Sawada
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
•
1.3K views
第7回 okayama-js 実践 WAI-ARIA by Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
•
2.5K views
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと by Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
•
17.4K views
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜 by Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
•
3.3K views
WAI-ARIAの考え方と使い方を整理しよう by Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
•
14.2K views
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント by Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
•
2.9K views
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 by Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
•
2.9K views
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
1.
D2Dサイトをアクセシブルにマークアップ 2015年8月30日 第7回 D2Dアクセシビリティ勉強会
2.
2 自己紹介
3.
3 SAWADA STANDARD DESIGN
澤田 望 @SawadaStdDesign WAIC WG2委員(2011年〜) キヤノンサイトのデザイン監修/運用(〜2013年) 2014年、岡山で独立
4.
4 今回の目標
5.
5 D2Dサイトのビジュアルデザインは作った。 フォームも作った。いよいよマークアップだけ!
6.
6 今までの復習で、さくっとJIS対応してしまおう!
7.
7 マークアップを始める前に
8.
8 第5回で作成したデザインはこちら。 https://github.com/D2DRAFT/a11y5A/blob/master/design_data/index.fw.png
9.
9 今回実装してもらうのはこちら。 https://github.com/milk54/a11yd2d7/blob/master/index.png
10.
10 より実用に耐えられるように、 いくつか改善点を盛り込みました。
11.
11 各ボタン/テキストリンクにhoverのスタイルを追加 ON OFF OFF ON OFF ON OFF ON
12.
12 「イベント一覧」の下向き▼を横向き▶に変更 ※「イベント一覧」だけページ内リンクではないので。
13.
13 別サイト用アイコンを追加
14.
14 D2Dサイトをアクセシブルに マークアップする際のポイント
15.
15 制作プロセス 1. 前提条件の確認 2. 文書構造の作成 3.
代替コンテンツの用意 4. マークアップ
16.
16 1. 前提条件の確認 • JIS
X 8341-3:2010 達成等級 A に準拠すること。 • 使用する技術:HTML5/CSS3/JavaScript • 依存する技術:HTML5/CSS3 • 設計:アクセシビリティが確保されていること。(第5回ワイヤーフレーム) • コンテンツ:アクセシビリティが確保されていること。(第5回デザイン) • 入力フォーム:前回作成したものを流用。(第6回フォーム) • 見出し:公開時にはWebフォントを使う想定。→ プレーンテキストでOK。
17.
17 2. 文書構造の作成 見た目ではなく、リニアライズして考えてみる。 →
読み上げ順序に影響。 • ページタイトル • 大見出し(h1) • セクショニング • 見出し(h2〜h6) • 文章/段落 • 箇条書き • 表 • 画像
18.
18 3. 代替コンテンツの用意 代替コンテンツが必要になる主なコンテンツ •
画像(代替テキスト) • イメージマップ(代替テキスト) • 音声(代替テキスト) • 動画(代替テキスト/音声ガイド) • ライブ映像(代替テキスト) • Flash/SVG等埋め込みオブジェクト(代替テキスト/代替画像) • 入力フォーム(ラベル/識別名) • CAPTCHAなどの仕掛け(別の代替手法)
19.
19 では、マークアップのポイントを上から順番に。
20.
20 「D2Draft」ロゴマーク • 代替テキストが必要。 •
代替テキストの内容をどうするかは意見の分かれるところ。 • リンクは不要。 参考になる達成⽅方法:G94/H37
21.
21 ナビゲーション • ラベルテキストと背景色のコントラスト。(できるだけhover時も) •
Scriptを仕込むならキーボード操作用のonfocusも忘れずに。 • キーボード操作でリンクした後にフォーカスが残らないように。 • 別サイトへのリンクであることを(代替テキストで)伝える。 • 文字サイズ拡大時に白文字がはみ出さないように。 参考になる達成⽅方法:G18/G145/H91/G90/SCR2/SCR20/SCR35/G146/G179
22.
22 キービジュアル • キャッチコピーをどうするか?(画像化/テキスト) •
(上記をテキスト化した場合)キービジュアル自体の代替テキスト。 • 「〼」をNVDA/VoiceOverが読まない。(IE11+PC-Talker7は読む) 参考になる達成⽅方法:G18/G145/G94/H37
23.
23 活動紹介 • 写真の文書構造上の扱い。(紐付くのは活動紹介?/各イベント?) •
写真の代替テキスト。 • 詳細ボタンはナビゲーションと同様。 • 「過去の活動はこちら」ボタンも同様。(hoverスタイル/コントラスト) 参考になる達成⽅方法:C6/G94/H37/G18/G145
24.
24 関連情報 • リンクテキストhover時のスタイル。 •
別サイトへのリンクであることを(代替テキストで)伝える。 (デザイン上支障がなければテキストで伝える方が尚良い) 参考になる達成⽅方法:H91/G90/H2
25.
25 お問い合せ •前回の通り。(第6回「アクセシブルな入力フォームを作ろう」) •前回の模範解答。(コピーして使ってOK)
26.
26 SNSボタン/フッター • hover時のスタイル。 •
代替テキスト。 • リンク先 facebook:https://www.facebook.com/groups/192199647655920/ Twitter:https://twitter.com/search?q=%23d2draft&src=typd&lang=ja • 文字サイズ拡大時に白文字がはみ出さないように。 参考になる達成⽅方法:H91/G90/G94/H37/G146/G179
27.
27 個々のマークアップテクニックは、 Techniques for
WCAG 2.0(達成方法集) を参照してください。
28.
28 マークアップし終わったら、実装チェックリスト (抜粋版)でチェックしてみてください。 便利なツールもあります。(ただしどのツールでも目視チェックは必要です) •HTML_CodeSniffer(ブックマークレット) •Web
Accessibility Toolbar 2012J(IEのみ) •miChecker(HTML5非対応) •PowerCMS 8341(Movable Typeプラグイン) •WorldSpace(大規模サイト向き) •今すぐ使える Web アクセシビリティ・ツール総目次
29.
29 では、制作開始!(2時間)
30.
30 お疲れさまでした!
31.
31 では解答例を。 ※解答例はあくまで「例」です。 達成基準が満たせるならマークアップ手法は自由です。 • プレビュー表示:https://htmlpreview.github.io/?https://github.com/milk54/ a11yd2d7/blob/master/index.html
32.
32 最後に、補足を。
33.
33 今まで、この勉強会ではJIS X 8341-3:2010へ
対応することを前提に勉強してきましたが. . .
34.
34 JIS X 8341-3:2010対応は必須ではありません!
(きっぱり) ※公共サイトを除く。
35.
35 JISは、あくまで品質の指標にすぎません。 JIS対応を「目的」にしないでね。
36.
36 サイト内の全ての情報は得られないような 「まぁ、だいたい分かる」レベルでも、 「情報が全く得られない」よりは大きな前進。
37.
37 100点満点のサイトが1つ増えることよりも、 50点のサイトが10個増えることのほうが大事。 JIS X
8341-3:2010 達成等級 A 準拠サイト 画像にAlt属性を 入れたサイト 見出しを適切に つけたサイト WAI-ARIAを 組み込んだサイト フォームにラベル をつけたサイト 動画に字幕を つけたサイト 一貫したラベルを つけたサイト 色のコントラスト を高めたサイト カルーセルに一時停止 ボタンをつけたサイト 色とパターンを 使ったサイト <
38.
38 50点のサイトがどんどん増えれば、 生活の中で得られる情報の質と量が底上げできます。 (障害のある人もない人も) 画像にAlt属性を
入れたサイト 見出しを適切に つけたサイト WAI-ARIAを 組み込んだサイト フォームにラベル をつけたサイト 動画に字幕を つけたサイト 一貫したラベルを つけたサイト 色のコントラスト を高めたサイト カルーセルに一時停止 ボタンをつけたサイト 色とパターンを 使ったサイト 装飾画像のAlt属性 を空にしたサイト
39.
39 なので、気負わずに
40.
40 アクセシビリティで関西Web界隈の底上げをしよう! 串かつ食いたい... たどり着けるぜ!
41.
41 ありがとうございました。