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

1. 1

2. 2
自己紹介

3. 3

4. 4

5. 5

6. 6
D2Dアクセシビリティ勉強会って？

7. 7

8. 8

9. 9
今日はWAI-ARIAです。

10. 10
神戸を紹介するページを作ります！

11. 11

12. 12

13. 13
role属性をたくさん盛ったから
すっごくアクセシブルよ!!

14. 14
オヤオヤ、みるくさん
それはどーなんでしょーか？

15. 15
えっ

16. 16
ちょっと盛り過ぎてやしませんか？

17. 17

18. 18
3月の勉強会で何て言いましたっけ？

19. 19

20. 20

21. 21
あっ

22. 22

23. 23

24. 24

25. 25

26. 26
なんか、わくわくしないけど。
（せっかく盛ったのに...

27. 27
じゃ、次は...分かりやすくと思って
見出しを追加しました!!

28. 28

29. 29

30. 30
普通にマークアップしないから。
せっかく覚えたからWAI-ARIA使うの!
(要素もちゃんと変えてるの)
• • • •

31. 31
オヤオヤ、みるくさん
それはどーなんでしょーか？

32. 32
えっ

33. 33

34. 34
たしかにdiv要素は暗黙のARIAセマンティ
クスがないので、role属性でロールを与
えるのは間違いじゃないんですけど...

35. 35

36. 36
じゃー、いいんじゃないの？

37. 37
いやいや、WAI-ARIAはHTMLの適切な
要素で実装できない場合にあくまで
• • • •
ウラ技として使って欲しいんですよね。

38. 38
大切なのはセマンティクス
↓
要素の意味
↓
適切な要素が使えない時にWAI-ARIA

39. 39
でも、間違いじゃないんですよね？

40. 40
えっ、そ、そーですけど...

41. 41
このページって、div要素にしないと
いけない（CMS、JSやフレームワークなどの）
制限ってあるんですか？

42. 42
いや、別に無いけど...

43. 43
じゃ、HTMLの要素を
普通に使っておきましょう。

44. 44

45. 45

46. 46
なんか、普通...

47. 47
普通じゃ何か不都合でも？

48. 48
そんなコトないけど...

49. 49
最後は...キービジュアルに
キャッチコピーを入れました!!

50. 50

51. 51

52. 52
キャッチコピーを画像化してないから
すっごくアクセシブルよ!!

53. 53
オヤオヤ、みるくさん
それはどーなんでしょーか？

54. 54
えっ

55. 55

56. 56
キャッチコピーは伝わりますが、
ポートタワーの夜景だということは
伝わらなくてもいいと。

57. 57
だーかーらー、一番伝えたいのは
キャッチコピーなんだから、
背景は装飾と同じでしょ？

58. 58
なるほど。
兵庫大仏に変わっても影響はないと。

59. 59

60. 60
なにこれ！神戸っぽくないし...

61. 61
だって、一番伝えたいのは
キャッチコピーなんやから、
背景は装飾と同じちゃいますのん!

62. 62
うっ

63. 63
その画像を視覚的に見ることができ
なくても「写真があること」を認識
できれば、他の人に見てもらうこと
もできますよね。

64. 64

65. 65

66. 66
なんか、否定されてばっかり。
WAI-ARIAって、実は役に立たない？

67. 67
いやいや、そんなことないですよ。
こんな例もあります。

68. 68

69. 69
この例みたいにtable要素をレイアウ
ト目的で使った場合、このままだとス
クリーンリーダーは「テーブル」とし
て読み上げてしまうんですよね。

70. 70

71. 71
その他にも、こちらのブログに
便利な使い方が紹介されてますよ!!

72. 72

73. 73
あらやだ、私の記事じゃないの...

74. 74
詳しい説明は、
D2Dアクセシビリティ勉強会で!!

75. 75