Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
アクセシブルなCSSをつくろう
2015年11月22日
オマケ会  D2Dアクセシビリティ勉強会
2
自己紹介
3
SAWADA  STANDARD  DESIGN  
澤田  望  
@SawadaStdDesign  
WAIC  WG2委員(2011年〜)  
キヤノンサイトのデザイン監修/運用(〜2013年)  
2014年、岡山で独立
4
今回の目標
5
D2Dサイトのマークアップまで出来たけど、  
CSSもアクセシビリティに気を付けることがあるの?
6
今までやってることが多いので、思い出してみよう。
7
一般的にCSSに求められる  
アクセシビリティとは
8
コンテンツが、CSSによってアクセシブルではな
くなることを想像してみると、分かりやすいかも。
9
アクセシブルではないスタイルとは?
テキストや画像は、  
適切にマークアップされている。  
スタイルを適用すると、  
情報が得られなく(読めなく)なる。
10
アクセシブルではないスタイルとは?
❶  無いことにされる。
display  :  none  とか  
visibility  :  hidden  とか
11
【  無いことにされる例  】画像置換  1
テキストラベルを  display  :  none  で隠し、CSSで背景画像を表示させると、PC-Talker7
は「だるま」と読み上げるが、NVDA、VoiceOverともにリンク先のU...
12
【  無いことにされる例  】hover効果
視覚的効果のために、hover/focus時に画像を消すスタイルをvisibility  :  hiddenで
指定していると、hover時にNVDAがalt属性ではなく、URLを読み上げてし...
13
アクセシブルではないスタイルとは?
❷  あるけど見えない。
ページの外にあるとか  
サイズが小さいとか  
透明とか  
コントラスト不足とか
14
【  見えなくなる例  】画像置換  2  
Windowsのハイコントラスト
モードでは、背景画像は表示さ
れない。
CSSで背景画像のみ表示させ、
テキストはページ外にレイアウ
トされている。
15
【  見えなくなる例  】エリアに収まりきらない
段落に対するスタイルに  overflow:hidden  を指定していると、エリアに収まりき
らない部分が隠れて読めなくなる。(スクリーンリーダーでは読み上げられる)
<blockquo...
16
アクセシブルではないスタイルとは?
❸  見えるけど触れない。
フォーカスがどこにあるのか分からないとか
17
【  触れない例  】フォーカスが見えない
アンカー要素に対して  outline  :  none  でフォーカスインジケーターを消していると、
キーボード操作時にフォーカスがどこにあるか分からなくなる。
<ul>  
<li><a  ...
18
アクセシブルではないスタイルとは?
❹  意味が通じなくなる。
順序や配置が変わるとか
19
【  意味が通じなくなる例  】表示順変更
ウィンドウサイズの制限等によって、マークアップ順と異なる順序で表示するように
スタイルを定義すると、前提となる情報が得られず、意味が通じなくなることがある。
このようにソースの⼆二度度漬けは  ...
20
  そうならないようにすれば、アクセシブルってことね。
21
ウェブアクセシビリティの4つの原則
•知覚可能  スタイルをオフっても情報を得ることができ、  
•操作可能  どこを操作しているかが分かる。  
•理解可能  
•堅牢性
22
アクセシブルなCSSの基本
•構造(マークアップ)と見映え(スタイル)を分離する。  
•CSSの有効/無効で、得られる情報量を変えない。  
•CSSの有効/無効で、コンテンツの意味を変えない。  
•CSSの有効/無効で、操作可能な範...
23
JIS  X  8341-3:2010  達成等級  Aの  
達成基準を満たすために必要なこと
参考:実装チェックリストの例例  2012年年11⽉月版
24
とはいえ、CSSに関する達成基準はそんなにない。
25
CSSで指定する画像は、装飾的なものだけ。
7.1.1.1 非テキストコンテンツ
C9:  CSS  を用いて、装飾目的の画像を付加する。
達成方法の例
達成方法の例
26
C6:  構造を示すマークアップをした上で、コンテンツを配置する。  
C8:  CSS  の  letter-spacing  プロパティで単語内の文字間隔を調整する。  
C27:  DOMの順序を表示順序と一致させる。...
27
コンテンツの順序に意味がある場合、  
その順序通りにフォーカスを移動させる。
7.2.4.3 フォーカス順序
C27:  DOMの順序を表示順序と一致させる。
達成方法の例
28
リンクラベル単独でリンクの目的を説明できない場合は、  
CSSを使ってコンテキストを補足する。
7.2.4.4 リンクの目的(コンテキスト内)
C7:  CSSを用いて、リンクテキストの一部を非表示にする。  
※  あまりお勧めではな...
29
たしかに少ないかも。
30
D2DサイトのCSSを  
アクセシブルにする際のポイント
31
  では、スタイル定義のポイントを上から順番に。
32
ナビゲーション
• このくらいならテキストで。(画像にしない)  
• hoverだけではなくfocusのスタイルも定義する。  
• 文字サイズ拡大時に白文字がはみ出さないように。
参考になる達成方法:C6/C8/C9/C12/C15/...
33
活動紹介
• 画像と見出し/テキストのブロックの左右入れ替え。  
  ※  コンテンツの意味が変わらない前提で。
参考になる達成方法:C6/C9/C12/C15/C19/C22
34
えっ、これだけ...?
35
制作に入る前に
36
前提条件のおさらい
• JIS  X  8341-3:2010  達成等級  A  に準拠すること。  
• 使用する技術:HTML5/CSS3/JavaScript  
• 依存する技術:HTML5/CSS3  
• 設計:アクセシビリ...
37
ビジュアルデザインはこちら。
●PC表示用デザイン  
https://github.com/D2DRAFT/a11y7-‐‑‒2A/blob/master/assets/index.png
●モバイル表示用デザイン  
https://...
38
マークアップされたHTMLはこちら。
https://github.com/milk54/a11yd2d7-‐‑‒2/blob/master/index.html
39
では、制作開始!(2時間)
40
    お疲れさまでした!
41
では解答例を。
※  解答例はあくまで「例」です。達成基準が満たせるならCSS定義手法は自由です。
●プレビュー表示  
https://htmlpreview.github.io/?https://github.com/milk54/a...
42
最後に、補足を。
43
視野を広げよう。
44
アクセシビリティに対する知識が増えてくると、つい、
最新の技術に飛び付いてみたくなったりします。
45
もちろん、それらによって、今までアクセシブルで
はなかった分野をアクセシブルにできる可能性はあ
ります。それは楽しいこと。素敵なこと。
46
でも、Webは元々アクセシブルに出来ています。
47
マークアップ言語の各要素のセマンティクスに忠実
にマークアップすれば、それだけでアクセシビリティ
は高まります。
48
また、基本的なコンテンツの品質を上げることも
アクセシビリティの向上に役立ちます。
49
リンクが切れてたら、情報にたどり着けないよね?  
アクセシブルじゃないってことね。
表記の揺れも同じ。たどり着けなくなっちゃうよね。
50
コンテンツや運用の改善でアクセシビリティを向
上させられることも案外多いことを覚えておこう。
51
視野を広げよう。
52
アクセシビリティというと、視覚に頼らない操作に
対する施策にフォーカスされがち。
53
高齢者や子供、外国人や岡山県人も使うね。
聴覚障害者もWebは使いますよね。
そして、あなたも。
54
視覚障害者  
聴覚障害者  
高齢者  
子供  
外国人  
岡山県人
→ 音声  
→ テキスト  
→ 簡易な日本語表現  
→ 漢字に対するルビ  
→ 外国語(翻訳できるテキスト)  
→ 岡山弁 共通弁    
  ※  あ...
55
偏ったアクセシビリティにならないように。少しでも
多くの方がWebの恩恵にあずかれるように。
56
視野を広げよう。
57
    ありがとうございました。
Upcoming SlideShare
Loading in …5
×

オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」

1,646 views

Published on

2015-11-22(日)に大阪JUSO Coworkingにて行われた「オマケ会 D2Dアクセシビリティ勉強会」でのスライドです。

Published in: Internet
  • Be the first to comment

オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」

  1. 1. アクセシブルなCSSをつくろう 2015年11月22日 オマケ会  D2Dアクセシビリティ勉強会
  2. 2. 2 自己紹介
  3. 3. 3 SAWADA  STANDARD  DESIGN   澤田  望   @SawadaStdDesign   WAIC  WG2委員(2011年〜)   キヤノンサイトのデザイン監修/運用(〜2013年)   2014年、岡山で独立
  4. 4. 4 今回の目標
  5. 5. 5 D2Dサイトのマークアップまで出来たけど、   CSSもアクセシビリティに気を付けることがあるの?
  6. 6. 6 今までやってることが多いので、思い出してみよう。
  7. 7. 7 一般的にCSSに求められる   アクセシビリティとは
  8. 8. 8 コンテンツが、CSSによってアクセシブルではな くなることを想像してみると、分かりやすいかも。
  9. 9. 9 アクセシブルではないスタイルとは? テキストや画像は、   適切にマークアップされている。   スタイルを適用すると、   情報が得られなく(読めなく)なる。
  10. 10. 10 アクセシブルではないスタイルとは? ❶  無いことにされる。 display  :  none  とか   visibility  :  hidden  とか
  11. 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. 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. 13 アクセシブルではないスタイルとは? ❷  あるけど見えない。 ページの外にあるとか   サイズが小さいとか   透明とか   コントラスト不足とか
  14. 14. 14 【  見えなくなる例  】画像置換  2   Windowsのハイコントラスト モードでは、背景画像は表示さ れない。 CSSで背景画像のみ表示させ、 テキストはページ外にレイアウ トされている。
  15. 15. 15 【  見えなくなる例  】エリアに収まりきらない 段落に対するスタイルに  overflow:hidden  を指定していると、エリアに収まりき らない部分が隠れて読めなくなる。(スクリーンリーダーでは読み上げられる) <blockquote>⻄西⽇日本地区(特に⼤大阪府)においては、⼩小ぶりに切切った⽜牛⾁肉や⿂魚介類、野菜を 個別に串串に刺刺して⾐衣をまぶして揚げた料料理理を指す。⼤大阪市浪浪速区新世界のカウンター形式の店 が発祥の地とされ、⼤大阪⼀一円の下町の繁華街には串串カツ店が多く存在する。関東、中京地⽅方の ものに⽐比べ、様々な⾷食材が串串カツになる。また数を捌くため、多くの店が⾐衣に溶き⽟玉⼦子と⼩小⻨麦 粉を使う代わりに、⽟玉⼦子と⼩小⻨麦粉があらかじめ配合された「バッター粉」を使って⾐衣つけを能 率率率化している。ナガイモを使った柔らかな⾐衣を⽤用いる店もある。⼤大阪近辺では、1929年年(昭 和4年年)に開店した「だるま」の⼥女女将が、⻄西成区釜ヶ崎の⾁肉体労働者たちのために串串に刺刺した ⾁肉を揚げて饗したのがはじまりとされる[1]。【Wikipediaより】</blockquote>   blockquote  {  width:300px;  height:300px;  overflow:hidden;  〜~  }
  16. 16. 16 アクセシブルではないスタイルとは? ❸  見えるけど触れない。 フォーカスがどこにあるのか分からないとか
  17. 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. 18 アクセシブルではないスタイルとは? ❹  意味が通じなくなる。 順序や配置が変わるとか
  19. 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. 20  そうならないようにすれば、アクセシブルってことね。
  21. 21. 21 ウェブアクセシビリティの4つの原則 •知覚可能  スタイルをオフっても情報を得ることができ、   •操作可能  どこを操作しているかが分かる。   •理解可能   •堅牢性
  22. 22. 22 アクセシブルなCSSの基本 •構造(マークアップ)と見映え(スタイル)を分離する。   •CSSの有効/無効で、得られる情報量を変えない。   •CSSの有効/無効で、コンテンツの意味を変えない。   •CSSの有効/無効で、操作可能な範囲を変えない。 ※  デバイスや解像度の違いはスタイル有効時の1パターンと考える。
  23. 23. 23 JIS  X  8341-3:2010  達成等級  Aの   達成基準を満たすために必要なこと 参考:実装チェックリストの例例  2012年年11⽉月版
  24. 24. 24 とはいえ、CSSに関する達成基準はそんなにない。
  25. 25. 25 CSSで指定する画像は、装飾的なものだけ。 7.1.1.1 非テキストコンテンツ C9:  CSS  を用いて、装飾目的の画像を付加する。 達成方法の例
  26. 26. 達成方法の例 26 C6:  構造を示すマークアップをした上で、コンテンツを配置する。   C8:  CSS  の  letter-spacing  プロパティで単語内の文字間隔を調整する。   C27:  DOMの順序を表示順序と一致させる。 7.1.3.2 意味のある順序 コンテンツを意味のある順序で並べる。   単語の文字間にスペースやタグを用いない。
  27. 27. 27 コンテンツの順序に意味がある場合、   その順序通りにフォーカスを移動させる。 7.2.4.3 フォーカス順序 C27:  DOMの順序を表示順序と一致させる。 達成方法の例
  28. 28. 28 リンクラベル単独でリンクの目的を説明できない場合は、   CSSを使ってコンテキストを補足する。 7.2.4.4 リンクの目的(コンテキスト内) C7:  CSSを用いて、リンクテキストの一部を非表示にする。   ※  あまりお勧めではない。 達成方法の例
  29. 29. 29 たしかに少ないかも。
  30. 30. 30 D2DサイトのCSSを   アクセシブルにする際のポイント
  31. 31. 31  では、スタイル定義のポイントを上から順番に。
  32. 32. 32 ナビゲーション • このくらいならテキストで。(画像にしない)   • hoverだけではなくfocusのスタイルも定義する。   • 文字サイズ拡大時に白文字がはみ出さないように。 参考になる達成方法:C6/C8/C9/C12/C15/C22
  33. 33. 33 活動紹介 • 画像と見出し/テキストのブロックの左右入れ替え。     ※  コンテンツの意味が変わらない前提で。 参考になる達成方法:C6/C9/C12/C15/C19/C22
  34. 34. 34 えっ、これだけ...?
  35. 35. 35 制作に入る前に
  36. 36. 36 前提条件のおさらい • JIS  X  8341-3:2010  達成等級  A  に準拠すること。   • 使用する技術:HTML5/CSS3/JavaScript   • 依存する技術:HTML5/CSS3   • 設計:アクセシビリティが確保されていること。(第5回ワイヤーフレーム)   • コンテンツ:アクセシビリティが確保されていること。(第5回デザイン)   • 入力フォーム:以前作成したものを流用。(第6回フォーム)   • 見出し:公開時にはWebフォントを使う想定。→  プレーンテキストでOK。
  37. 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. 38 マークアップされたHTMLはこちら。 https://github.com/milk54/a11yd2d7-‐‑‒2/blob/master/index.html
  39. 39. 39 では、制作開始!(2時間)
  40. 40. 40    お疲れさまでした!
  41. 41. 41 では解答例を。 ※  解答例はあくまで「例」です。達成基準が満たせるならCSS定義手法は自由です。 ●プレビュー表示   https://htmlpreview.github.io/?https://github.com/milk54/a11yd2d7-‐‑‒2/ blob/master/index.html
  42. 42. 42 最後に、補足を。
  43. 43. 43 視野を広げよう。
  44. 44. 44 アクセシビリティに対する知識が増えてくると、つい、 最新の技術に飛び付いてみたくなったりします。
  45. 45. 45 もちろん、それらによって、今までアクセシブルで はなかった分野をアクセシブルにできる可能性はあ ります。それは楽しいこと。素敵なこと。
  46. 46. 46 でも、Webは元々アクセシブルに出来ています。
  47. 47. 47 マークアップ言語の各要素のセマンティクスに忠実 にマークアップすれば、それだけでアクセシビリティ は高まります。
  48. 48. 48 また、基本的なコンテンツの品質を上げることも アクセシビリティの向上に役立ちます。
  49. 49. 49 リンクが切れてたら、情報にたどり着けないよね?   アクセシブルじゃないってことね。 表記の揺れも同じ。たどり着けなくなっちゃうよね。
  50. 50. 50 コンテンツや運用の改善でアクセシビリティを向 上させられることも案外多いことを覚えておこう。
  51. 51. 51 視野を広げよう。
  52. 52. 52 アクセシビリティというと、視覚に頼らない操作に 対する施策にフォーカスされがち。
  53. 53. 53 高齢者や子供、外国人や岡山県人も使うね。 聴覚障害者もWebは使いますよね。 そして、あなたも。
  54. 54. 54 視覚障害者   聴覚障害者   高齢者   子供   外国人   岡山県人 → 音声   → テキスト   → 簡易な日本語表現   → 漢字に対するルビ   → 外国語(翻訳できるテキスト)   → 岡山弁 共通弁       ※  あくまで例
  55. 55. 55 偏ったアクセシビリティにならないように。少しでも 多くの方がWebの恩恵にあずかれるように。
  56. 56. 56 視野を広げよう。
  57. 57. 57    ありがとうございました。

×