1.
すべての人に
知っておいて
ほしい
VoiceOverの
基本原則
と、コラボ特別編 Webクリエイター新年会 featuringまぼろし
Powered by 株式会社クリーク･アンド･リバー社

2.
HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わったあと、
2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』（共著、アスキー・メディアワーク
ス）、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』（共著、
MdN）など。
Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。
個人ブログ「Web Design KOJIKA17」を運営。
久保 知己
株式会社まぼろし
マークアップエンジニア

3.
マークアップのセッション

4.
目的: 興味を持ってもらう

5.
VoiceOver

6.
スクリーンリーダー
（画面読み上げソフト）

7.
http://www.apple.com/jp/accessibility/osx/voiceover/

8.
http://www.apple.com/jp/accessibility/ios/voiceover/

9.
http://www.apple.com/jp/accessibility/watch/

10.
どのくらい利用されているのか？

11.
http://webaim.org/

12.
http://webaim.org/projects/screenreadersurvey6/

13.
http://webaim.org/projects/screenreadersurvey6/

14.
http://webaim.org/projects/screenreadersurvey6/

15.
http://webaim.org/projects/screenreadersurvey6/

16.
VoiceOverの操作・機能
OS X編

17.
VoiceOverの入/切
⌘F5

18.
VoiceOverの操作・機能（OS X）
• キーボード操作
• クイックナビ
• スクリーンカーテン
• トラックパッドコマンダー

19.
トラックパッドコマンダー

20.
システム環境設定 -> アクセシビリティ -> VoiceOverユーティリティ

21.
トラックパッドコマンダーの基本操作: 1
• ページ全体を読み上げる
2本指で、上方向にスワイプ
• 現在位置から読み上げを開始する
2本指で、下方向にスワイプ
• 読み上げを停止する
2本指で、タップ

22.
トラックパッドコマンダーの基本操作: 2
• Webローターを操作
2本指で、時計回り/反時計回りに回転
• Webローターの項目に移動
1本指で、上下方向にスワイプ
• クリック操作
1本指で、ダブルタップ

23.
トラックパッドコマンダー

24.
トラックパッドコマンダーは
操作方法を6つ覚えるだけ

25.
スクリーンリーダーを
なぜ使うのか？

26.
2つのHTMLを
VoiceOverに読んでもらう

27.
HTMLを読ませてみる A

28.
HTMLを読ませてみる B

29.
見た目は同じなのに
読み方が違う

30.
HTMLソース A
<h1>Heading</h1>
<p>lorem</p>
<h2>Heading 2</h2>
<ul>
<li><a href="">Lorem ipsum dolor.</a></li>
<li>Blanditiis, id, eum.</li>
<li>Velit ad, hic.</li>
</ul>

31.
HTMLソース B
<div class="h1">Heading</div>
<div class="p">lorem</div>
<div class="h2">Heading 2</div>
<div class="ul">
<div><a href="">Lorem ipsum dolor.</a></div>
<div>Blanditiis, id, eum.</div>
<div>Velit ad, hic.</div>
</div>

32.
HTMLの要素を
スクリーンリーダーが
読み上げている？

33.
HTMLの要素は
ARIAと紐付いている

34.
アクセシブルな Web アプリケーションやウィジェットの概要 - Accessibility | MDN
W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich
Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠
けている意味を追加する手段です。ARIA はマークアップに特別な属性を追加することで、
開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な
Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコント
ロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた
UI ウィジェットの動作を示す役割や状態を与えます。
ARIA

35.
http://www.w3.org/TR/html-aria/

36.
http://www.w3.org/TR/html-aria/

37.
http://www.w3.org/TR/html-aria/

38.
要素の性質を変えてみる

39.
div要素にロール属性を追加する
<div>
見出し
</div>

40.
div要素にロール属性を追加する
<div role="heading">
見出し
</div>

41.
div要素にロール属性を追加する
<div role="heading" aria-level="1">
見出し
</div>

42.
HTMLを読ませてみる (見出し)

43.
HTML5の要素とARIA
<header>
<div role="banner">
<footer>
<div role="contentinfo">
<article>
<div role="article">
<main>
<div role="main">

44.
普通にマークアップすれば
ARIAと紐付く

45.
WAI-ARIAの例

46.
http://getbootstrap.com/

47.
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>

48.
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
<span class="hidden-text">メニュー</span>
</button>

49.
伝わるけど
もう少しスマートに

50.
ハンバーガーメニューのマークアップ
<button type="button">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>

51.
ハンバーガーメニューのマークアップ
<button type="button" aria-label="メニュー">
<span class="glyphicon glyphicon-menu-hamburger">
</span>
</button>

52.
HTMLを読ませてみる (メニュー)

53.
テキストブラウザで見ると

54.
テキストブラウザ

55.
要素の性質を考えて利用する

56.
さらにWAI-ARIAを利用すれば
• メニューが閉じているのか、開いているのか伝えられる
• タブやダイアログなどの状況を伝えられる
• 特定の要素を支援技術に「伝達しない」表現も可能

57.
支援技術を使ってみることで
マークアップの幅が広がる

58.
まとめ

59.
VoiceOver
• Apple社製のスクリーンリーダー
• 2015年のWebAIMの調査では、モバイルスクリーンリーダーの
56.7%のユーザーがVoiceOverを利用
• トラックパッドコマンダーの操作方法を覚えれば、
OS XやiOSでも操作できる

60.
マークアップ
• マークアップによってスクリーンリーダーの読み方が変わる
• スクリーンリーダーの読み方が変わるのは、HTMLの要素と
ARIAが紐付いているため
• HTMLをちゃんと書こう
• WAI-ARIAを学ぶと、もっと色々できる

61.
VoiceOverを使いこなすべきか？

62.
Webデザイナーが
HTMLとCSSを知ってるといいよね
ぐらいのノリから
始めればいいと思う
「
」

63.
VoiceOverが使えるのは
Apple社製品のみ

64.
Windowsユーザーは
NVDA がおすすめ

65.
https://www.nvda.jp/

66.
興味をもって
いただけましたか？
ありがとうございました