Submit Search
Upload
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
•
3 likes
•
2,453 views
Nozomi Sawada
Follow
2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。
Read less
Read more
Internet
Report
Share
Report
Share
1 of 57
Download now
Download to read offline
Recommended
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
ギリギリUXD
ギリギリUXD
uenoyuuki
終電もふつうになっちゃってるデベロッパーのUXD。 少ない時間でも繰り返せばできることもあるかもでしょ。
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
2021/10/25 ポップインサイトUXリサーチ共有会 はたけ登壇資料 UXリサーチ共有会10月:https://popinsight.jp/seminar/?p=22902 はたけとは:https://twitter.com/yuw12_
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
sizucca
2018/01/24 デザインスプリント ハンズオンセミナー + 事例報告会 in SONY City「社内のプロダクト開発でデザインスプリントを実践して分かったこと」
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 http://schoo.jp/class/1611/room ーーーーーーーーーーーーーーーーーーーーーーー
Recommended
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
2015-04-26(日)に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
2015-06-21(日)に大阪JUSO Coworkingにて行われた「第6回 D2D アクセシビリティ勉強会」でのスライドです。
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
オープンセミナー2015@岡山 懇親会LTで使用したスライドです。
ギリギリUXD
ギリギリUXD
uenoyuuki
終電もふつうになっちゃってるデベロッパーのUXD。 少ない時間でも繰り返せばできることもあるかもでしょ。
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
2021/10/25 ポップインサイトUXリサーチ共有会 はたけ登壇資料 UXリサーチ共有会10月:https://popinsight.jp/seminar/?p=22902 はたけとは:https://twitter.com/yuw12_
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
sizucca
2018/01/24 デザインスプリント ハンズオンセミナー + 事例報告会 in SONY City「社内のプロダクト開発でデザインスプリントを実践して分かったこと」
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 http://schoo.jp/class/1611/room ーーーーーーーーーーーーーーーーーーーーーーー
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
nanapi勉強会 - チームで作るデザイン / チームを作るデザイン / 2014.11.11
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
2018/2/26 ポートフォリオナイトで発表した資料です。 自分のこれまでのポートフォリオの履歴です。 素敵なポートフォリオがいっぱいあるけど、まずは地道に作っていきましょうという話です。
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
2017/12/6 Cybozu Days 2017 大阪 のセッション「みんなが働きたい場所で働けるリモート開発チームを目指してやっていること」の発表資料です
次の5年のUIを考える
次の5年のUIを考える
Saori Baba
2014年10月20日(月) スマホUI勉強会@GMO Yoursで、「次の5年のUIを考える」という題でお話しました。
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
マテリアルデザインの基本的なポイントをまとめた資料です。 Wordbench京都のセッションで使用しました。
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
最近クライアント向けにワークショップとUXについて説明してほしいという要望が増えたために作った資料。
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
パソナテック<SKILL BASECAMP 2013> 「Groundwork ! 未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー」資料 ※こちらのスライドの内容と重複しますが、ロクナナさんの10周年記念のビデオで実際の操作画面とかがご覧頂けます。 ロクナナ10周年記念サイト https://67.org/ws10th/ こもりまさあきのWeb制作環境 [67WS10周年記念] http://www.youtube.com/watch?v=gKeAJJhX2Og
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
ライトニングトーク付きクリエイターズ交流会 in東京で発表したデザイナーの複業の話です。
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
Yasuhito Yabe
http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
2016/01/08 ux tokyo - ux jam コラボ企画、新年会 LT用スライド
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
サイボウズのMeetup第5回のLT資料です。 Cybozu Meetup#5 デザイン&アクセシビリティ
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
2014年6月5日 GarageAKIHABARAにて開催されたワンコインカレッジ!で話した「Webデザイナーが仕事をしやすいWebディレクター」のスライドです。
javascriptの基礎
javascriptの基礎
Masayuki Abe
JavaScriptの基礎です。
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
2016/1/29 OBS社内勉強会 in 飯田橋 基本的には、いつものとおり、愚痴。
Experience sketch board
Experience sketch board
Naoka MISAWA
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
Koji Aihara
UX Bridge vol.8(2019年1月31日開催)登壇資料 https://uxbridge.connpass.com/event/117026/ アライドアーキテクツ株式会社:相原幸司
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
9/27 UX Cafe B2BサービスのUXデザインを語ろう 発表資料
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
Csspage1 2014-06-22
Csspage1 2014-06-22
Keiichiro Shikano
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
More Related Content
What's hot
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
nanapi勉強会 - チームで作るデザイン / チームを作るデザイン / 2014.11.11
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
2018/2/26 ポートフォリオナイトで発表した資料です。 自分のこれまでのポートフォリオの履歴です。 素敵なポートフォリオがいっぱいあるけど、まずは地道に作っていきましょうという話です。
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
2017/12/6 Cybozu Days 2017 大阪 のセッション「みんなが働きたい場所で働けるリモート開発チームを目指してやっていること」の発表資料です
次の5年のUIを考える
次の5年のUIを考える
Saori Baba
2014年10月20日(月) スマホUI勉強会@GMO Yoursで、「次の5年のUIを考える」という題でお話しました。
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
マテリアルデザインの基本的なポイントをまとめた資料です。 Wordbench京都のセッションで使用しました。
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
最近クライアント向けにワークショップとUXについて説明してほしいという要望が増えたために作った資料。
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
パソナテック<SKILL BASECAMP 2013> 「Groundwork ! 未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー」資料 ※こちらのスライドの内容と重複しますが、ロクナナさんの10周年記念のビデオで実際の操作画面とかがご覧頂けます。 ロクナナ10周年記念サイト https://67.org/ws10th/ こもりまさあきのWeb制作環境 [67WS10周年記念] http://www.youtube.com/watch?v=gKeAJJhX2Og
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
ライトニングトーク付きクリエイターズ交流会 in東京で発表したデザイナーの複業の話です。
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
Yasuhito Yabe
http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
2016/01/08 ux tokyo - ux jam コラボ企画、新年会 LT用スライド
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
サイボウズのMeetup第5回のLT資料です。 Cybozu Meetup#5 デザイン&アクセシビリティ
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
2014年6月5日 GarageAKIHABARAにて開催されたワンコインカレッジ!で話した「Webデザイナーが仕事をしやすいWebディレクター」のスライドです。
javascriptの基礎
javascriptの基礎
Masayuki Abe
JavaScriptの基礎です。
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
2016/1/29 OBS社内勉強会 in 飯田橋 基本的には、いつものとおり、愚痴。
Experience sketch board
Experience sketch board
Naoka MISAWA
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
Koji Aihara
UX Bridge vol.8(2019年1月31日開催)登壇資料 https://uxbridge.connpass.com/event/117026/ アライドアーキテクツ株式会社:相原幸司
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
9/27 UX Cafe B2BサービスのUXデザインを語ろう 発表資料
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
What's hot
(19)
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
次の5年のUIを考える
次の5年のUIを考える
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
groundwork-pasona-tech
groundwork-pasona-tech
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
javascriptの基礎
javascriptの基礎
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
Experience sketch board
Experience sketch board
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Similar to オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
Csspage1 2014-06-22
Csspage1 2014-06-22
Keiichiro Shikano
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Yasuhisa Hasegawa
見た目が良いのに、なんとなく上手くいかない理由は、Web デザインにおける『核』を省いたまま、サイトを制作しているからです。その核とはコンテンツです。 コンテンツはあって当たり前。あとで流し込めば良いという先入観から制作を始めると、見た目はなんとなく良いけど中身がないという結果に陥ります。また、クライアントですら、自分たちが出していくべきコンテンツが何かを把握していない場合があります。私たちが考えているほど、コンテンツは訪問者のニーズを満たしていないわけです。 核があり、それを補助するサイトはプロフェッショナルの手を借りないと作ることができないはずです。セッションでは、Web サイトにおける『核』の重要性と、その見つけ方を紹介します。そして、見つけ出した核をどのようにコンテンツ設計やビジュアルに活かすのかを事例をみながら解説します。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
11/18イベント登壇資料です。
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
CSS Nite in OSAKA Vol.20 前夜祭でお話したDreamweaverのコードヒントのカスタマイズについてのスライドです
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
貴志 上坂
de:code 2016のセッションで使用した資料です。
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
swwwitch inc.
2013年11月21日(木)19:00-20:00、アップルストア銀座で開催されたCSS Nite in Ginza, Vol.72のスライド。 http://cssnite.jp/ginza/vol72/ 参照リンクなど http://bit.ly/1blGiqd
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
Yu Morita
UXデザインの専門家でない人向けに、何をどうするとUXデザインになるのか、なんのためにやるのかを、ちょー乱暴に解説したスライドです。まだこれ自体が模索中であり、本当におかんが見たら意味がわからないこと請け合い。今後のバージョンアップが期待されます。なお、スライド中の解説について、深く知りたい場合はそれぞれ別個にぐぐるなり何なりして頑張ってください。 (本バージョンはversion 0.4です。CSS Nite in SENDAI, Vol.8で発表いたしました)
ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
ワイヤーフレームとはどういうものか?という概略 ワイヤーフレームだけでは説明しきれないところをどう補うか、が課題 Adobe XD Meeting #05での発表内容です
Multi Cloud Design Pattern(Beta)
Multi Cloud Design Pattern(Beta)
Terui Masashi
July Tech Festa 2015 D40 http://2015.techfesta.jp/p/program.html#multiple_cloud_usecase
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
CSS設計についてまとめた資料です。 本資料の構成は以下の通りです。 はじめに CSS設計準備 ・ ブラウザに対する理解 ・ normalize.css / reset CSS ・ 新しいリセット用CSSのご紹介 私的CSS設計における ベストプラクティス - コンパイル言語について
Jaws festa-2014-cdp-01
Jaws festa-2014-cdp-01
宗 大栗
JAWS Festa Tohoku 2014のCDP道場 中上級編の導入編資料です。
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
WordCamp Osaka 2012
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
CSS Nite in OSAKA, Vol.32 でやったやつです。
[Adobe XD] リピートグリッドで遊ぼう
[Adobe XD] リピートグリッドで遊ぼう
Risa Yuguchi
2017/02/07 (火) に開催されたAdobe XD Meeting #03 (https://xd-study.connpass.com/event/49530/) で発表したリピートグリッドを活用する方法を紹介したスライドです。
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
WordBench神戸のレスポンシブ座談会でLTさせていただた資料です。 低コスト案件においてレスポンシブWebデザインに取り組むときの、考え方、取り組み方などについて、ひとつの考えをまとめてました。 内容的にはやや偏りがありますが、ディレクションの一つの方向性として、参考になればと思ってのお話です。
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Satoshi Noda
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/000/room ーーーーーーーーーーーーーーーーーーーーーーー
Similar to オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
(20)
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Csspage1 2014-06-22
Csspage1 2014-06-22
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
ワイヤーフレームとは?
ワイヤーフレームとは?
Multi Cloud Design Pattern(Beta)
Multi Cloud Design Pattern(Beta)
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
Jaws festa-2014-cdp-01
Jaws festa-2014-cdp-01
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
[Adobe XD] リピートグリッドで遊ぼう
[Adobe XD] リピートグリッドで遊ぼう
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
More from Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
2019/11/2(土)にハッシュタグにて行われた「リーダブルな昼下がり on 2019/11/02」でのセッションで使用したスライドです。
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
2019/9/2(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/09/02」でのワークショップで使用したスライドです。
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
2019/7/8(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/07/08」でのスライドです。
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
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-05-17(木)に神戸ジーベックホールにて行われた「アクセシビリティの祭典 2018」でのスライドです。
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
※ P.83に注釈を追加しました。 2017-06-10(土)に倉敷物語館にて行われた「第7回 okayama-js」でのスライドです。
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
2017-06-03(土)にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
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」でのスライドです。
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
2016-09-22(木)にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2016」でのスライドです。
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
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)
More from Nozomi Sawada
(15)
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
コントラスト高めでいこう
コントラスト高めでいこう
代替テキストの基本から応用まで
代替テキストの基本から応用まで
岡山をリーダブルな世界に
岡山をリーダブルな世界に
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
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アクセシビリティチェックのポイント
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
1.
アクセシブルなCSSをつくろう 2015年11月22日 オマケ会 D2Dアクセシビリティ勉強会
2.
2 自己紹介
3.
3 SAWADA STANDARD DESIGN
澤田 望 @SawadaStdDesign WAIC WG2委員(2011年〜) キヤノンサイトのデザイン監修/運用(〜2013年) 2014年、岡山で独立
4.
4 今回の目標
5.
5 D2Dサイトのマークアップまで出来たけど、 CSSもアクセシビリティに気を付けることがあるの?
6.
6 今までやってることが多いので、思い出してみよう。
7.
7 一般的にCSSに求められる アクセシビリティとは
8.
8 コンテンツが、CSSによってアクセシブルではな くなることを想像してみると、分かりやすいかも。
9.
9 アクセシブルではないスタイルとは? テキストや画像は、 適切にマークアップされている。 スタイルを適用すると、
情報が得られなく(読めなく)なる。
10.
10 アクセシブルではないスタイルとは? ❶ 無いことにされる。 display :
none とか visibility : hidden とか
11.
11 【 無いことにされる例 】画像置換
1 テキストラベルを display : none で隠し、CSSで背景画像を表示させると、PC-Talker7 は「だるま」と読み上げるが、NVDA、VoiceOverともにリンク先のURL「index」のみ 読み上げ、「だるま」であることは伝わらない。(TAB移動時) <a href="index.html" id="logoDaruma"><span>だるま</span></a> a#logoDaruma { background: url(daruma.png) no-‐‑‒repeat 0 0; 〜~ } a#logoDaruma span { display: none; }
12.
12 【 無いことにされる例 】hover効果 視覚的効果のために、hover/focus時に画像を消すスタイルをvisibility
: hiddenで 指定していると、hover時にNVDAがalt属性ではなく、URLを読み上げてしまう。 (focus時にはalt属性を読むが挙動不安定) <a href="omy.html" id="omy"><img src="omy.png" alt="近江屋"></a> a#omy { background: url(omy_̲h.png) no-‐‑‒repeat 0 0; 〜~ } a#omy:hover img, a#omy:focus img { visibility : hidden; 〜~ }
13.
13 アクセシブルではないスタイルとは? ❷ あるけど見えない。 ページの外にあるとか サイズが小さいとか
透明とか コントラスト不足とか
14.
14 【 見えなくなる例 】画像置換
2 Windowsのハイコントラスト モードでは、背景画像は表示さ れない。 CSSで背景画像のみ表示させ、 テキストはページ外にレイアウ トされている。
15.
15 【 見えなくなる例 】エリアに収まりきらない 段落に対するスタイルに
overflow:hidden を指定していると、エリアに収まりき らない部分が隠れて読めなくなる。(スクリーンリーダーでは読み上げられる) <blockquote>⻄西⽇日本地区(特に⼤大阪府)においては、⼩小ぶりに切切った⽜牛⾁肉や⿂魚介類、野菜を 個別に串串に刺刺して⾐衣をまぶして揚げた料料理理を指す。⼤大阪市浪浪速区新世界のカウンター形式の店 が発祥の地とされ、⼤大阪⼀一円の下町の繁華街には串串カツ店が多く存在する。関東、中京地⽅方の ものに⽐比べ、様々な⾷食材が串串カツになる。また数を捌くため、多くの店が⾐衣に溶き⽟玉⼦子と⼩小⻨麦 粉を使う代わりに、⽟玉⼦子と⼩小⻨麦粉があらかじめ配合された「バッター粉」を使って⾐衣つけを能 率率率化している。ナガイモを使った柔らかな⾐衣を⽤用いる店もある。⼤大阪近辺では、1929年年(昭 和4年年)に開店した「だるま」の⼥女女将が、⻄西成区釜ヶ崎の⾁肉体労働者たちのために串串に刺刺した ⾁肉を揚げて饗したのがはじまりとされる[1]。【Wikipediaより】</blockquote> blockquote { width:300px; height:300px; overflow:hidden; 〜~ }
16.
16 アクセシブルではないスタイルとは? ❸ 見えるけど触れない。 フォーカスがどこにあるのか分からないとか
17.
17 【 触れない例 】フォーカスが見えない アンカー要素に対して
outline : none でフォーカスインジケーターを消していると、 キーボード操作時にフォーカスがどこにあるか分からなくなる。 <ul> <li><a href="yaekatsu.html"><img src="yaekatsu.png" alt="⼋八重勝"></li> <li><a href="yakko.html"><img src="yakko.png" alt="やっこ"></li> </ul> a { outline: none; }
18.
18 アクセシブルではないスタイルとは? ❹ 意味が通じなくなる。 順序や配置が変わるとか
19.
19 【 意味が通じなくなる例 】表示順変更 ウィンドウサイズの制限等によって、マークアップ順と異なる順序で表示するように スタイルを定義すると、前提となる情報が得られず、意味が通じなくなることがある。 このようにソースの⼆二度度漬けは
厳しく禁⽌止されている。 No Double-Dipping!! <div> <p>このようにソースの⼆二度度漬けは厳しく禁⽌止 されている。</p> <img src=“doubledip.png” alt=“図:「No Double-‐‑‒Dipping!!」ソース容器”> </div> div { position:relative; height:400px; 〜~ } p { position:absolute; bottom:0; 〜~ } img { position:absolute; top:0; 〜~ }
20.
20 そうならないようにすれば、アクセシブルってことね。
21.
21 ウェブアクセシビリティの4つの原則 •知覚可能 スタイルをオフっても情報を得ることができ、 •操作可能 どこを操作しているかが分かる。 •理解可能
•堅牢性
22.
22 アクセシブルなCSSの基本 •構造(マークアップ)と見映え(スタイル)を分離する。 •CSSの有効/無効で、得られる情報量を変えない。 •CSSの有効/無効で、コンテンツの意味を変えない。
•CSSの有効/無効で、操作可能な範囲を変えない。 ※ デバイスや解像度の違いはスタイル有効時の1パターンと考える。
23.
23 JIS X 8341-3:2010
達成等級 Aの 達成基準を満たすために必要なこと 参考:実装チェックリストの例例 2012年年11⽉月版
24.
24 とはいえ、CSSに関する達成基準はそんなにない。
25.
25 CSSで指定する画像は、装飾的なものだけ。 7.1.1.1 非テキストコンテンツ C9: CSS を用いて、装飾目的の画像を付加する。 達成方法の例
26.
達成方法の例 26 C6: 構造を示すマークアップをした上で、コンテンツを配置する。 C8:
CSS の letter-spacing プロパティで単語内の文字間隔を調整する。 C27: DOMの順序を表示順序と一致させる。 7.1.3.2 意味のある順序 コンテンツを意味のある順序で並べる。 単語の文字間にスペースやタグを用いない。
27.
27 コンテンツの順序に意味がある場合、 その順序通りにフォーカスを移動させる。 7.2.4.3 フォーカス順序 C27: DOMの順序を表示順序と一致させる。 達成方法の例
28.
28 リンクラベル単独でリンクの目的を説明できない場合は、 CSSを使ってコンテキストを補足する。 7.2.4.4 リンクの目的(コンテキスト内) C7: CSSを用いて、リンクテキストの一部を非表示にする。
※ あまりお勧めではない。 達成方法の例
29.
29 たしかに少ないかも。
30.
30 D2DサイトのCSSを アクセシブルにする際のポイント
31.
31 では、スタイル定義のポイントを上から順番に。
32.
32 ナビゲーション • このくらいならテキストで。(画像にしない) •
hoverだけではなくfocusのスタイルも定義する。 • 文字サイズ拡大時に白文字がはみ出さないように。 参考になる達成方法:C6/C8/C9/C12/C15/C22
33.
33 活動紹介 • 画像と見出し/テキストのブロックの左右入れ替え。 ※
コンテンツの意味が変わらない前提で。 参考になる達成方法:C6/C9/C12/C15/C19/C22
34.
34 えっ、これだけ...?
35.
35 制作に入る前に
36.
36 前提条件のおさらい • JIS X
8341-3:2010 達成等級 A に準拠すること。 • 使用する技術:HTML5/CSS3/JavaScript • 依存する技術:HTML5/CSS3 • 設計:アクセシビリティが確保されていること。(第5回ワイヤーフレーム) • コンテンツ:アクセシビリティが確保されていること。(第5回デザイン) • 入力フォーム:以前作成したものを流用。(第6回フォーム) • 見出し:公開時にはWebフォントを使う想定。→ プレーンテキストでOK。
37.
37 ビジュアルデザインはこちら。 ●PC表示用デザイン https://github.com/D2DRAFT/a11y7-‐‑‒2A/blob/master/assets/index.png ●モバイル表示用デザイン https://github.com/D2DRAFT/a11y7-‐‑‒2A/blob/master/assets/index_̲s.png ●PC表示用デザイン(hover時)
https://github.com/D2DRAFT/a11y7-‐‑‒2A/blob/master/assets/index_̲h.png ●モバイル表示用デザイン(hover時) https://github.com/D2DRAFT/a11y7-‐‑‒2A/blob/master/assets/index_̲s_̲h.png (ボタンのグレー:#4d4d4d/テキスト背景グリーン:#54b032)
38.
38 マークアップされたHTMLはこちら。 https://github.com/milk54/a11yd2d7-‐‑‒2/blob/master/index.html
39.
39 では、制作開始!(2時間)
40.
40 お疲れさまでした!
41.
41 では解答例を。 ※ 解答例はあくまで「例」です。達成基準が満たせるならCSS定義手法は自由です。 ●プレビュー表示 https://htmlpreview.github.io/?https://github.com/milk54/a11yd2d7-‐‑‒2/ blob/master/index.html
42.
42 最後に、補足を。
43.
43 視野を広げよう。
44.
44 アクセシビリティに対する知識が増えてくると、つい、 最新の技術に飛び付いてみたくなったりします。
45.
45 もちろん、それらによって、今までアクセシブルで はなかった分野をアクセシブルにできる可能性はあ ります。それは楽しいこと。素敵なこと。
46.
46 でも、Webは元々アクセシブルに出来ています。
47.
47 マークアップ言語の各要素のセマンティクスに忠実 にマークアップすれば、それだけでアクセシビリティ は高まります。
48.
48 また、基本的なコンテンツの品質を上げることも アクセシビリティの向上に役立ちます。
49.
49 リンクが切れてたら、情報にたどり着けないよね? アクセシブルじゃないってことね。 表記の揺れも同じ。たどり着けなくなっちゃうよね。
50.
50 コンテンツや運用の改善でアクセシビリティを向 上させられることも案外多いことを覚えておこう。
51.
51 視野を広げよう。
52.
52 アクセシビリティというと、視覚に頼らない操作に 対する施策にフォーカスされがち。
53.
53 高齢者や子供、外国人や岡山県人も使うね。 聴覚障害者もWebは使いますよね。 そして、あなたも。
54.
54 視覚障害者 聴覚障害者 高齢者
子供 外国人 岡山県人 → 音声 → テキスト → 簡易な日本語表現 → 漢字に対するルビ → 外国語(翻訳できるテキスト) → 岡山弁 共通弁 ※ あくまで例
55.
55 偏ったアクセシビリティにならないように。少しでも 多くの方がWebの恩恵にあずかれるように。
56.
56 視野を広げよう。
57.
57 ありがとうございました。
Download now