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
ありがとうございました。