より多くの人へ届けるために　Webコンテンツで 「ちょっと」気をつけたいこと

より多くの人へ届けるために　Webコンテンツで 「ちょっと」気をつけたいこと

1. 1. より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと 2017年6月3日 !important #04 - 特盛！アクセシビリティスペシャル -
2. 2. はじめに大切なこと 2
3. 3. 3 今日は、いろんな皆さんに 参加いただいています。
4. 4. 4 メガネじゃないメガネ
5. 5. 5 パーマじゃないパーマ
6. 6. 6 女性男性
7. 7. 7 女性っぽい男性男性っぽい女性
8. 8. 8 ぽっちゃりさんガリガリさん
9. 9. 9 星座 年齢 血液型 出身地 趣味 iPhone／Android Mac／Windows
10. 10. 10 「いろんな」がさらに広がると. . . 不自由に感じる（ことがある） 情報が得られない（ことがある）
11. 11. 11 見えていない人見えている人
12. 12. 12 聞こえていない人聞こえている人
13. 13. 13 手が使えない人手が使える人
14. 14. 14 漢字が苦手な人日本語が苦手な人
15. 15. 15 （今のところ）画像が苦手な Googlebotくん タッチ操作が苦手な 初心者
16. 16. 16 どうすれば情報が得られる？
17. 17. 17 聴覚／触覚を 使って情報取得 見えていない人
18. 18. 18 視覚を 使って情報取得 聞こえていない人
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 岡山で独立（2014） キヤノン （〜2013）　 WAIC　 （2011〜） • Webアクセシビリティ検証／ • イラスト制作／ • 岡山情報ビジネス学院 非常勤講師 などなど • サイトデザイン監修／ • Webアクセシビリティ対応 （ウェブアクセシビリティ基盤委員会）
28. 28. コンテンツのアクセシビリティ 28
29. 29. 29 なぜ「コンテンツの」なのか？
30. 30. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 30 Webアクセシビリティの レイヤー 今日はココ
31. 31. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 31 それぞれのレイヤーでアクセシビリティ的なケアが必要な分野 • 利用者のリテラシー • 支援技術 • CSS • コンテンツ （テキスト／画像／音声／映像） • HTML • JavaScript等プログラム • ユーザーエージェント • OS • ハードウェア 教育／啓蒙 etc. スクリーンリーダー／ズーム／翻訳 etc. UIデザイン／コントラスト／表示順序／背景画像 etc. コントラスト／代替コンテンツ／表現 etc. 文書構造／要素の意味／フォームコントロール etc. キーボード操作／フォーカス制御／DOM追加位置 etc. UIデザイン／代替コンテンツへのアクセス／ スタイル（色／サイズ／速度 etc.）変更／ 文書構造とmeta情報／API etc. UIデザイン／多言語対応／音声認識／ ソフトウェアキーボード／マウスキー etc. 入出力デバイス（キーボード／タッチスクリーン／ マウス／マイク／点字ディスプレイ／スピーカー etc.）
32. 32. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 32 Webアクセシビリティの レイヤー 今日はココ
33. 33. 33 アクセシブルではないレイヤーが 一ヶ所でもあると...
34. 34. 利用者のリテラシー 支援技術 CSS JavaScript HTML UA OS ハードウェア 34
35. 35. 利用者のリテラシー 支援技術 CSS JavaScript HTML UA OS ハードウェア 35 利用者に情報が届かなくなってしまう。
36. 36. 36 コンテンツも重要な要素の一つ。
37. 37. アクセシブルなCMSやフレームワークの増加 制作者が意識しなくても アクセシブルなマークアップが実現 . . .するかも？ 37 Movable Type
38. 38. 38 より重要度が増してくるのが 「コンテンツそのもの」の 　アクセシビリティ。
39. 39. Webコンテンツで気をつけたいこと 39 ちょっと
40. 40. 位置関係に頼った表現は× 40 ちょっと
41. 41. 41 上 左　　　　　　右 下
42. 42. 42 上記の〜 下記の〜
43. 43. 脳内変換 43 上記 下記 位置関係 先述 後述 前後関係
44. 44. 44 変換できない例 1
45. 45. 45 小計（2点）：¥9,999 ○○○○○　¥4,444　　1 ○○○○○　¥5,555　　1 レジに進む場合は、右上のボタンを 押してください。 レジに進む 買い物を続ける
46. 46. 46 どうすればアクセシブルに？
47. 47. 47 小計（2点）：¥9,999 ○○○○○　¥4,444　　1 ○○○○○　¥5,555　　1 レジに進む場合は、右上の「レジに進む」 ボタンを押してください。 レジに進む 買い物を続ける
48. 48. 48 　位置関係が分からなくても、 ボタンのラベルが分かれば 判断できる。
49. 49. 49 変換できない例 2
50. 50. 50 左から順にキク／ナラ／カズ
51. 51. 51 左から順にキク／ ナラ／カズ
52. 52. 52 どうすればアクセシブルに？
53. 53. ナラ 53 （各画像個別にキャプション） キク カズ
54. 54. 54 キク ナラ カズ
55. 55. 55 レスポンシブWebデザインで 　レイアウトが変化する場合は、 特に位置関係に注意。
56. 56. 色だけに頼った表現は× 56 ちょっと
57. 57. 57 原鶴温泉に行きた〜い!
58. 58. 58 赤：満室／黄：残りわずか／緑：余裕あり 月 火 水 木 金 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 22 22 23 24 25 26 27 28 29 30 2017年6月　　　　　　 7月 >
59. 59. 59 D型（2型）色覚障害の方が見ると... ※ 先天色覚異常者は全国に約 290 万人（国土交通省：色覚障害者の移動等円滑化に関する調査研究）
60. 60. 60 赤：満室／黄：残りわずか／緑：余裕あり 月 火 水 木 金 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 22 22 23 24 25 26 27 28 29 30 2017年6月　　　　　　 7月 >
61. 61. 61 色覚障害者ではなくても
62. 62. 62
63. 63. スクリーンリーダーは 色情報を読み上げない 63 　視覚障害者（全盲） には伝わらない
64. 64. 64 どうすればアクセシブルに？
65. 65. 65 ×：満室／△：残りわずか／◯：余裕あり 月 火 水 木 金 土 日 1 ◯ 2 △ 3 × 4 ◯ 5 ◯ 6 ◯ 7 ◯ 8 ◯ 9 △ 10 × 11 ◯ 12 ◯ 13 ◯ 14 ◯ 15 ◯ 16 △ 17 × 18 × 19 △ 20 ◯ 22 ◯ 22 ◯ 23 ◯ 24 × 25 ◯ 26 ◯ 27 ◯ 28 ◯ 29 ◯ 30 × 2017年6月　　　　　　 7月 >
66. 66. 66 同じことが入力フォームでも。
67. 67. 67 赤字：必須項目 会員情報入力 氏名 確認 住所 電話番号 ハンドルネーム
68. 68. 68 どうすればアクセシブルに？
69. 69. 69 ＊：必須項目 会員情報入力 氏名＊ 確認 住所＊ 電話番号＊ ハンドルネーム
70. 70. 70 さらにアクセシブルに。
71. 71. 71 氏名（必須） 住所（必須） 電話番号（必須） ハンドルネーム 会員情報入力 確認
72. 72. 72 でも見た目的に（必須）はちょっと...
73. 73. 73 「必須であること」をスクリーンリーダーにも伝えたい場合 <label for="hoge">氏名<span>※</span></label> <input type="text" id="hoge" name="fuga" required="required">
74. 74. 一貫性のないラベルは× 74 ちょっと
75. 75. 75 カフェに行きた〜い!
76. 76. 76 CAFE NIWAKA NIWAKAについて　　メニュー　　地図　　ブログ
77. 77. 77 NIWAKAについて　　メニュー　　地図　　ブログ CAFE NIWAKA NIWAKAについて メニュー インフォメーション ブログ
78. 78. 78 NIWAKAについて　　メニュー　　地図　　ブログ CAFE NIWAKA NIWAKAについて メニュー インフォメーション ブログ
79. 79. 79 ラベリングの一貫性は重要。 ラベルが異なるとコンテンツも異なる と思われてしまう。
80. 80. 80 SHOP INFO ご利用案内 店舗情報 インフォメーション 地図 交通案内 マップ アクセス
81. 81. 81 同じコンテンツだと思われなければ、 アクセシブルではない。
82. 82. 情報にたどり着けない アクセシビリティが低い 82 ※ 英語表記にするだけでもハードルが上がる ＝
83. 83. 代替テキストは使い分けてこそ○ 83
84. 84. 84 代替テキストを考えてみよう！
85. 85. 85 Wikimedia Commonsより 筑後川昇開橋
86. 86. 86 報道写真風景写真 建築写真 歴史記事 旅行記事 百科事典 ボタンのサムネイル 写真講座
87. 87. 87 風景写真なら alt="遠く脊振山を臨む春の筑後川昇開橋" Wikimedia Commonsより 筑後川昇開橋
88. 88. 88 建築写真なら alt="間隔26mの橋脚の間に24mの可動橋が架かり、 23mまで上昇して船を通す構造のトラス橋" Wikimedia Commonsより 筑後川昇開橋
89. 89. 89 報道写真なら alt="筑後川河口に見られる干潟消失問題" Wikimedia Commonsより 筑後川昇開橋
90. 90. 90 「写真であること」を伝えたい場合 alt="写真：筑後川河口に見られる干潟消失問題"
91. 91. 91 筑後川昇開橋 筑後川昇開橋の全長は約５０７メートルで、 その建設には大変な苦労があったと伝えられ ている。橋脚の深さは約１５∼１８メートル と記録されているが、有明海は干満の差が大 きく、水面が一定でないため掘削作業は困難 を極めた。そして、橋桁を架けるときは船で 運び、潮と浮力を利用したと記録されている。 Wikimedia Commonsより 「国指定重要文化財 筑後川昇開橋」サイトより また、筑後川の水面も有明海の干満の影響を受けて一定ではなく干潮の時は可動橋が降りていて も、小船は通ることができるようになっているが、中型船以上は列車通過まで一時ストップしな ければならなかった。このようなことは佐賀線設置の時に船舶会社と協議され、列車通過以外は 船舶が優先されることが約束され、それがもとで昇降式可動橋が作られたといわれている。
92. 92. 92 記事で情報が得られるため説明が不要な場合 alt="写真：筑後川昇開橋全景"
93. 93. 93 めんたいロックとは？ 1 9 7 0 〜 8 0 年 代 初 頭 に か け て 福 岡 県 で 生 ま れ たロックが一般的に「めんたいロック」と言 われているのだろう。1970年代に柴山俊之が 福岡で鮎川誠らと結成したサンハウスが「め んたいロック」の源流であると多くの人が考 えている。1975年にサンハウスはメジャーデ ビューし、その後続々と福岡のロックバンド がメジャーデビューを果たした。 「めんたいROCK!!」サイトより （シーナ&ザロケッツ（1978デビュー）、ARB（1978年デビュー）、ロッカーズ（1980年デ ビュー）、ルースターズ（1980年デビュー）、THE MODS（1981年デビュー））。「めんたい ロック」という言葉はルースターズデビューの頃に生れた言葉だという説が強い。その為、どの バンドを「めんたいロックバンド」というかは議論になる事もある。しかし、全国的には「福岡 のロック」の総称として「めんたいロック」と呼ぶ人も少なくない。 Wikimedia Commonsより
94. 94. 94 記事の内容と関係ないイメージ画像の場合 alt=""（空） alt="イメージ" ○： ×：
95. 95. 95 筑後川流域の観光プランに加えたい おすすめの橋 厳選10 古くは「筑紫次郎」と呼ばれ日本三大暴れ川の一つとして有名だった筑後川も、今では 流域の人々の暮らしに寄り添う川として穏やかな表情を見せています。そんな筑後川に 架かる様々な橋の魅力と歴史に迫るおすすめの観光プランを作成しました。 Wikimedia Commonsより
96. 96. 96 文字情報の入った画像 alt="旅行の達人 忘れられない旅行にしよう！旅の記録 から厳選した旅行カタログ（背景：筑後川昇開橋）" ※ 基本的には、伝える必要のある文字情報は全て記載
97. 97. 97 筑後川流域の観光プランに加えたい おすすめの橋 厳選10 古くは「筑紫次郎」と呼ばれ日本三大暴れ川の一つとして有名だった筑後川も、今では 流域の人々の暮らしに寄り添う川として穏やかな表情を見せています。そんな筑後川に 架かる様々な橋の魅力と歴史に迫るおすすめの観光プランを作成しました。 Wikimedia Commonsより
98. 98. 98 同じ写真でも、用途によって 代替テキストはさまざま。
99. 99. 99 代替テキストは、 電話の相手に画像の内容を伝える 　つもりで考えるのがコツ。
100. 100. まとめ 100
101. 101. 101 多様性を理解し、 アクセシビリティを確保しよう
102. 102. 利用者のリテラシー 支援技術 CSS コンテンツ JavaScript HTML UA OS ハードウェア 102 利用者に情報を届けるためには、 コンテンツのアクセシビリティも重要
103. 103. 103 位置関係や色に頼った表現や、伝わらないラベルでは 情報にたどり着けない アクセシビリティが低い ＝
104. 104. 104 代替テキストは用途によって使い分けが必要
105. 105. 105 いろんな人へ届けるために 「ちょっと」気をつけてみましょう！
106. 106. ありがとうございました @SawadaStdDesign