すべての人に知っておいてほしい voiceoverの基本原則
TRANSCRIPT
すべての人に 知っておいて ほしい VoiceOverの 基本原則と、コラボ特別編 Webクリエイター新年会 featuringまぼろし Powered by 株式会社クリーク･アンド･リバー社
HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わったあと、
2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』（共著、アスキー・メディアワーク
ス）、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』（共著、
MdN）など。
Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。
個人ブログ「Web Design KOJIKA17」を運営。
久保 知己株式会社まぼろし マークアップエンジニア
マークアップのセッション
目的: 興味を持ってもらう
VoiceOver
スクリーンリーダー （画面読み上げソフト）
http://www.apple.com/jp/accessibility/osx/voiceover/
http://www.apple.com/jp/accessibility/ios/voiceover/
http://www.apple.com/jp/accessibility/watch/
どのくらい利用されているのか？
http://webaim.org/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
http://webaim.org/projects/screenreadersurvey6/
VoiceOverの操作・機能 OS X編
VoiceOverの入/切 ⌘F5
VoiceOverの操作・機能（OS X）
• キーボード操作
• クイックナビ
• スクリーンカーテン
• トラックパッドコマンダー
トラックパッドコマンダー
システム環境設定 -> アクセシビリティ -> VoiceOverユーティリティ
トラックパッドコマンダーの基本操作: 1
• ページ全体を読み上げる2本指で、上方向にスワイプ
• 現在位置から読み上げを開始する2本指で、下方向にスワイプ
• 読み上げを停止する2本指で、タップ
トラックパッドコマンダーの基本操作: 2
• Webローターを操作2本指で、時計回り/反時計回りに回転
• Webローターの項目に移動1本指で、上下方向にスワイプ
• クリック操作1本指で、ダブルタップ
トラックパッドコマンダー
トラックパッドコマンダーは 操作方法を6つ覚えるだけ
スクリーンリーダーを なぜ使うのか？
2つのHTMLを VoiceOverに読んでもらう
HTMLを読ませてみる A
HTMLを読ませてみる B
見た目は同じなのに 読み方が違う
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>
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>
HTMLの要素を スクリーンリーダーが 読み上げている？
HTMLの要素は ARIAと紐付いている
アクセシブルな Web アプリケーションやウィジェットの概要 - Accessibility | MDN
W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich
Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠
けている意味を追加する手段です。ARIA はマークアップに特別な属性を追加することで、
開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な
Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコント
ロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた
UI ウィジェットの動作を示す役割や状態を与えます。
ARIA
http://www.w3.org/TR/html-aria/
http://www.w3.org/TR/html-aria/
http://www.w3.org/TR/html-aria/
要素の性質を変えてみる
div要素にロール属性を追加する
<div> 見出し </div>
div要素にロール属性を追加する
<div role="heading"> 見出し </div>
div要素にロール属性を追加する
<div role="heading" aria-level="1"> 見出し </div>
HTMLを読ませてみる (見出し)
HTML5の要素とARIA
<header> <div role="banner">
<footer> <div role="contentinfo">
<article> <div role="article">
<main> <div role="main">
普通にマークアップすれば ARIAと紐付く
WAI-ARIAの例
http://getbootstrap.com/
ハンバーガーメニューのマークアップ
<button type="button"> <span class="glyphicon glyphicon-menu-hamburger"> </span> </button>
ハンバーガーメニューのマークアップ
<button type="button"> <span class="glyphicon glyphicon-menu-hamburger"> </span> <span class="hidden-text">メニュー</span> </button>
伝わるけど もう少しスマートに
ハンバーガーメニューのマークアップ
<button type="button"> <span class="glyphicon glyphicon-menu-hamburger"> </span> </button>
ハンバーガーメニューのマークアップ
<button type="button" aria-label="メニュー"> <span class="glyphicon glyphicon-menu-hamburger"> </span> </button>
HTMLを読ませてみる (メニュー)
テキストブラウザで見ると
テキストブラウザ
要素の性質を考えて利用する
さらにWAI-ARIAを利用すれば
• メニューが閉じているのか、開いているのか伝えられる
• タブやダイアログなどの状況を伝えられる
• 特定の要素を支援技術に「伝達しない」表現も可能
支援技術を使ってみることで マークアップの幅が広がる
まとめ
VoiceOver
• Apple社製のスクリーンリーダー
• 2015年のWebAIMの調査では、モバイルスクリーンリーダーの
56.7%のユーザーがVoiceOverを利用
• トラックパッドコマンダーの操作方法を覚えれば、
OS XやiOSでも操作できる
マークアップ
• マークアップによってスクリーンリーダーの読み方が変わる
• スクリーンリーダーの読み方が変わるのは、HTMLの要素と
ARIAが紐付いているため
• HTMLをちゃんと書こう
• WAI-ARIAを学ぶと、もっと色々できる
VoiceOverを使いこなすべきか？
Webデザイナーが HTMLとCSSを知ってるといいよね
ぐらいのノリから 始めればいいと思う
「」
VoiceOverが使えるのは Apple社製品のみ
Windowsユーザーは NVDA がおすすめ
https://www.nvda.jp/
興味をもって いただけましたか？ ありがとうございました