すべての繁に岑っておいてほしい VoiceOverの児云圻t
?
6 likes?2,488 views
と、コラボ蒙e｡Webクリエイタ`仟定氏 featuringまぼろし Powered by 幄塀氏芙クリ`ク?アンド?リバ`芙 ☆タイトルはパロディです。
![さらにWAI-ARIAを旋喘すれば
? メニュ`が]じているのか、_いているのか擦┐蕕譴
? タブやダイアログなどの彜rを擦┐蕕譴
? 蒙協の勣殆を屶址室宝に仝惨錣靴覆ぁ恒輜屬眇苗](https://image.slidesharecdn.com/voice-160119090850/85/VoiceOver-56-320.jpg)
すべての繁に岑っておいてほしい VoiceOverの児云圻t
- 1. すべての繁に 岑っておいて ほしい VoiceOverの 児云圻t と、コラボ蒙e?Webクリエイタ`仟定氏 featuringまぼろし Powered by 幄塀氏芙クリ`ク?アンド?リバ`芙
- 2. HTML+CSSによるマ`クアップからCMSのBまで、さまざまなWebサイトの崙恬にvわったあと、 2014定にまぼろしに秘芙。 麼な广に〆CSS3&jQueryで恬る スマ`トフォンサイトUI辷a〇┨花、アスキ`?メディアワ`ク ス、〆Fのプロが縮えるWeb崙恬の恷仟械R 岑らないと是るWebデザインの仟ル`ル〇┨花、 MdNなど。 Adobe巷塀ブログ仝Adobe Creative Station々で、プラグインの仝Emmet々についてBd。 繁ブログ仝Web Design KOJIKA17々を\咫 消隠 岑失 幄塀氏芙まぼろし マ`クアップエンジニア
- 3. マ`クアップのセッション
- 5. VoiceOver
- 10. どのくらい旋喘されているのか
- 18. VoiceOverの荷恬?C嬬OS X ? キ`ボ`ド荷恬 ? クイックナビ ? スクリ`ンカ`テン ? トラックパッドコマンダ`
- 19. トラックパッドコマンダ`
- 20. システムh廠O協 -> アクセシビリティ -> VoiceOverユ`ティリティ
- 21. トラックパッドコマンダ`の児云荷恬: 1 ? ペ`ジ畠悶をiみ貧げる? 2云峺で、貧圭鬚縫好錺ぅ? ? F壓了崔からiみ貧げを_兵する? 2云峺で、和圭鬚縫好錺ぅ? ? iみ貧げを唯峭する? 2云峺で、タップ
- 22. トラックパッドコマンダ`の児云荷恬: 2 ? Webロ`タ`を荷恬? 2云峺で、r指り/郡r指りに指? ? Webロ`タ`の朕に卞? 1云峺で、貧和圭鬚縫好錺ぅ? ? クリック荷恬? 1云峺で、ダブルタップ
- 23. トラックパッドコマンダ`
- 27. HTMLをiませてみる A
- 28. HTMLをiませてみる B
- 29. た朕は揖じなのに iみ圭が`う
- 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 碧は、スクリ`ンリ`ダ`のような屶址室gが駅勣とする、之 けている吭龍を弖紗する返粁です。ARIA はマ`クアップに蒙eな奉來を弖紗することで、 _k宀が徭附のウィジェットをよりしくh苧することを辛嬬にします。ARIA は啜弔 Web アプリケ`ションにおいて、覆 HTML タグとデスクトップスタイルのコント ロ`ルとのgにあるギャップを托めるようにOされており、ほとんどのよく岑られた UI ウィジェットの嘛を幣す叨護や彜Bを嚥えます。 ARIA
- 38. 勣殆の來嵎を笋┐討澆
- 42. HTMLをiませてみる (竃し)
- 43. HTML5の勣殆とARIA <header> <div role="banner"> <footer> <div role="contentinfo"> <article> <div role="article"> <main> <div role="main">
- 45. 安粥鴛-粥檎鴛粥の箭
- 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を旋喘すれば ? メニュ`が]じているのか、_いているのか擦┐蕕譴 ? タブやダイアログなどの彜rを擦┐蕕譴 ? 蒙協の勣殆を屶址室宝に仝惨錣靴覆ぁ恒輜屬眇苗
- 58. まとめ
- 59. VoiceOver ? Apple芙uのスクリ`ンリ`ダ` ? 2015定のWebAIMの{砲任蓮▲皀丱ぅ襯好リ`ンリ`ダ`の 56.7%のユ`ザ`がVoiceOverを旋喘 ? トラックパッドコマンダ`の荷恬圭隈をえれば、? OS XやiOSでも荷恬できる
- 60. マ`クアップ ? マ`クアップによってスクリ`ンリ`ダ`のiみ圭が笋錣 ? スクリ`ンリ`ダ`のiみ圭が笋錣襪里蓮HTMLの勣殆と ARIAが~原いているため ? HTMLをちゃんとこう ? WAI-ARIAを僥ぶと、もっと弼？できる