すべての人に知っておいてほしい VoiceOverの基本原則
•
6 likes•2,447 views
と、コラボ特別編 Webクリエイター新年会 featuringまぼろし Powered by 株式会社クリーク･アンド･リバー社 ※タイトルはパロディです。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to すべての人に知っておいてほしい VoiceOverの基本原則
Similar to すべての人に知っておいてほしい VoiceOverの基本原則 (20)
すべての人に知っておいてほしい VoiceOverの基本原則
- 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. マークアップのセッション
- 5. VoiceOver
- 10. どのくらい利用されているのか？
- 18. VoiceOverの操作・機能（OS X） • キーボード操作 • クイックナビ • スクリーンカーテン • トラックパッドコマンダー
- 19. トラックパッドコマンダー
- 20. システム環境設定 -> アクセシビリティ -> VoiceOverユーティリティ
- 21. トラックパッドコマンダーの基本操作: 1 • ページ全体を読み上げる 2本指で、上方向にスワイプ • 現在位置から読み上げを開始する 2本指で、下方向にスワイプ • 読み上げを停止する 2本指で、タップ
- 22. トラックパッドコマンダーの基本操作: 2 • Webローターを操作 2本指で、時計回り/反時計回りに回転 • Webローターの項目に移動 1本指で、上下方向にスワイプ • クリック操作 1本指で、ダブルタップ
- 23. トラックパッドコマンダー
- 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>
- 34. アクセシブルな Web アプリケーションやウィジェットの概要 - Accessibility | MDN W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠 けている意味を追加する手段です。ARIA はマークアップに特別な属性を追加することで、 開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコント ロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた UI ウィジェットの動作を示す役割や状態を与えます。 ARIA
- 38. 要素の性質を変えてみる
- 43. HTML5の要素とARIA <header> <div role="banner"> <footer> <div role="contentinfo"> <article> <div role="article"> <main> <div role="main">
- 45. WAI-ARIAの例
- 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>
- 53. テキストブラウザで見ると
- 54. テキストブラウザ
- 55. 要素の性質を考えて利用する
- 56. さらにWAI-ARIAを利用すれば • メニューが閉じているのか、開いているのか伝えられる • タブやダイアログなどの状況を伝えられる • 特定の要素を支援技術に「伝達しない」表現も可能
- 58. まとめ
- 59. VoiceOver • Apple社製のスクリーンリーダー • 2015年のWebAIMの調査では、モバイルスクリーンリーダーの 56.7%のユーザーがVoiceOverを利用 • トラックパッドコマンダーの操作方法を覚えれば、 OS XやiOSでも操作できる
- 60. マークアップ • マークアップによってスクリーンリーダーの読み方が変わる • スクリーンリーダーの読み方が変わるのは、HTMLの要素と ARIAが紐付いているため • HTMLをちゃんと書こう • WAI-ARIAを学ぶと、もっと色々できる