Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜

2,122 views

Published on

2017-05-18(木)に神戸商工貿易センタービルにて行われた「アクセシビリティの祭典」でのスライドです。

Published in: Internet
  • Be the first to comment

WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜

  1. 1. 1
  2. 2. 2 自己紹介
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6 D2Dアクセシビリティ勉強会って?
  7. 7. 7
  8. 8. 8
  9. 9. 9 今日はWAI-ARIAです。
  10. 10. 10 神戸を紹介するページを作ります!
  11. 11. 11
  12. 12. 12
  13. 13. 13 role属性をたくさん盛ったから すっごくアクセシブルよ!!
  14. 14. 14 オヤオヤ、みるくさん それはどーなんでしょーか?
  15. 15. 15 えっ
  16. 16. 16 ちょっと盛り過ぎてやしませんか?
  17. 17. 17
  18. 18. 18 3月の勉強会で何て言いましたっけ?
  19. 19. 19
  20. 20. 20
  21. 21. 21 あっ
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26 なんか、わくわくしないけど。 (せっかく盛ったのに...
  27. 27. 27 じゃ、次は...分かりやすくと思って 見出しを追加しました!!
  28. 28. 28
  29. 29. 29
  30. 30. 30 普通にマークアップしないから。 せっかく覚えたからWAI-ARIA使うの! (要素もちゃんと変えてるの) • • • •
  31. 31. 31 オヤオヤ、みるくさん それはどーなんでしょーか?
  32. 32. 32 えっ
  33. 33. 33
  34. 34. 34 たしかにdiv要素は暗黙のARIAセマンティ クスがないので、role属性でロールを与 えるのは間違いじゃないんですけど...
  35. 35. 35
  36. 36. 36 じゃー、いいんじゃないの?
  37. 37. 37 いやいや、WAI-ARIAはHTMLの適切な 要素で実装できない場合にあくまで • • • • ウラ技として使って欲しいんですよね。
  38. 38. 38 大切なのはセマンティクス ↓ 要素の意味 ↓ 適切な要素が使えない時にWAI-ARIA
  39. 39. 39 でも、間違いじゃないんですよね?
  40. 40. 40 えっ、そ、そーですけど...
  41. 41. 41 このページって、div要素にしないと いけない(CMS、JSやフレームワークなどの) 制限ってあるんですか?
  42. 42. 42 いや、別に無いけど...
  43. 43. 43 じゃ、HTMLの要素を 普通に使っておきましょう。
  44. 44. 44
  45. 45. 45
  46. 46. 46 なんか、普通...
  47. 47. 47 普通じゃ何か不都合でも?
  48. 48. 48 そんなコトないけど...
  49. 49. 49 最後は...キービジュアルに キャッチコピーを入れました!!
  50. 50. 50
  51. 51. 51
  52. 52. 52 キャッチコピーを画像化してないから すっごくアクセシブルよ!!
  53. 53. 53 オヤオヤ、みるくさん それはどーなんでしょーか?
  54. 54. 54 えっ
  55. 55. 55
  56. 56. 56 キャッチコピーは伝わりますが、 ポートタワーの夜景だということは 伝わらなくてもいいと。
  57. 57. 57 だーかーらー、一番伝えたいのは キャッチコピーなんだから、 背景は装飾と同じでしょ?
  58. 58. 58 なるほど。 兵庫大仏に変わっても影響はないと。
  59. 59. 59
  60. 60. 60 なにこれ!神戸っぽくないし...
  61. 61. 61 だって、一番伝えたいのは キャッチコピーなんやから、 背景は装飾と同じちゃいますのん!
  62. 62. 62 うっ
  63. 63. 63 その画像を視覚的に見ることができ なくても「写真があること」を認識 できれば、他の人に見てもらうこと もできますよね。
  64. 64. 64
  65. 65. 65
  66. 66. 66 なんか、否定されてばっかり。 WAI-ARIAって、実は役に立たない?
  67. 67. 67 いやいや、そんなことないですよ。 こんな例もあります。
  68. 68. 68
  69. 69. 69 この例みたいにtable要素をレイアウ ト目的で使った場合、このままだとス クリーンリーダーは「テーブル」とし て読み上げてしまうんですよね。
  70. 70. 70
  71. 71. 71 その他にも、こちらのブログに 便利な使い方が紹介されてますよ!!
  72. 72. 72
  73. 73. 73 あらやだ、私の記事じゃないの...
  74. 74. 74 詳しい説明は、 D2Dアクセシビリティ勉強会で!!
  75. 75. 75

×