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

より多くの人へ届けるために
Webコンテンツで
「ちょっと」気をつけたいこと
2017年6月3日
!important #04 - 特盛！アクセシビリティスペシャル -

3
今日は、いろんな皆さんに
参加いただいています。

4
メガネじゃないメガネ

5
パーマじゃないパーマ

7
女性っぽい男性男性っぽい女性

8
ぽっちゃりさんガリガリさん

9
星座
年齢
血液型
出身地
趣味
iPhone／Android
Mac／Windows

10
「いろんな」がさらに広がると. . .
不自由に感じる（ことがある）
情報が得られない（ことがある）

11
見えていない人見えている人

12
聞こえていない人聞こえている人

13
手が使えない人手が使える人

14
漢字が苦手な人日本語が苦手な人

15
（今のところ）画像が苦手な
Googlebotくん
タッチ操作が苦手な
初心者

16
どうすれば情報が得られる？

17
聴覚／触覚を
使って情報取得
見えていない人

18
視覚を
使って情報取得
聞こえていない人

手が使えない人
19
他の可動部や
音声を使って操作

20
外国語に翻訳
（テキスト）
日本語が苦手な人

「アクセシビリティを確保する」
「アクセシブルにする」
21
このような工夫をすること
工夫ができる形式で作っておくこと

22
いろんな人達が情報を必要としている
いろんな＝多様性

23
大切なこと
多様性を受け入れること

26
中年男性
パーマ
メガネ（老眼）
ガリガリ

27
岡山で独立（2014）
キヤノン（〜2013）　
WAIC　（2011〜）
• Webアクセシビリティ検証／
• イラスト制作／
• 岡山情報ビジネス学院非常勤講師
などなど
• サイトデザイン監修／
• Webアクセシビリティ対応
（ウェブアクセシビリティ基盤委員会）

コンテンツのアクセシビリティ
28

29
なぜ「コンテンツの」なのか？

利用者のリテラシー
支援技術
CSS
コンテンツ
JavaScript
HTML
UA
OS
ハードウェア
30
Webアクセシビリティの
レイヤー
今日はココ

支援技術
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.）

支援技術
CSS
コンテンツ
JavaScript
HTML
UA
OS
ハードウェア
支援技術
CSS
コンテンツ
JavaScript
HTML
UA
OS
ハードウェア
32
Webアクセシビリティの
レイヤー
今日はココ

33
アクセシブルではないレイヤーが
一ヶ所でもあると...

支援技術
CSS
JavaScript
HTML
UA
OS
ハードウェア
34

支援技術
CSS
JavaScript
HTML
UA
OS
ハードウェア
35
利用者に情報が届かなくなってしまう。

36
コンテンツも重要な要素の一つ。

アクセシブルなCMSやフレームワークの増加
制作者が意識しなくても
アクセシブルなマークアップが実現
. . .するかも？
37
Movable
Type

38
より重要度が増してくるのが
「コンテンツそのもの」の
　アクセシビリティ。

Webコンテンツで気をつけたいこと
39
ちょっと

位置関係に頼った表現は×
40
ちょっと

41
上
左　　　　　　右
下

脳内変換
43
上記
下記
位置関係
先述
後述
前後関係

45
小計（2点）：¥9,999
○○○○○　¥4,444　　1
○○○○○　¥5,555　　1
レジに進む場合は、右上のボタンを
押してください。
レジに進む
買い物を続ける

46
どうすればアクセシブルに？

47
小計（2点）：¥9,999
○○○○○　¥4,444　　1
○○○○○　¥5,555　　1
レジに進む場合は、右上の「レジに進む」
ボタンを押してください。
レジに進む
買い物を続ける

48
　位置関係が分からなくても、
ボタンのラベルが分かれば
判断できる。

50
左から順にキク／ナラ／カズ

51
左から順にキク／
ナラ／カズ

52

ナラ
53
（各画像個別にキャプション）
キクカズ

55
レスポンシブWebデザインで
　レイアウトが変化する場合は、
特に位置関係に注意。

色だけに頼った表現は×
56
ちょっと

57
原鶴温泉に行きた〜い!

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
D型（2型）色覚障害の方が見ると...
※ 先天色覚異常者は全国に約 290 万人（国土交通省：色覚障害者の移動等円滑化に関する調査研究）

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
色覚障害者ではなくても

スクリーンリーダーは
色情報を読み上げない
63
　視覚障害者（全盲）
には伝わらない

64

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
同じことが入力フォームでも。

67
赤字：必須項目
会員情報入力
氏名
確認
住所
電話番号
ハンドルネーム

68

69
＊：必須項目
会員情報入力
氏名＊
確認
住所＊
電話番号＊

70
さらにアクセシブルに。

71
氏名（必須）
住所（必須）
電話番号（必須）
会員情報入力
確認

72
でも見た目的に（必須）はちょっと...

73
「必須であること」をスクリーンリーダーにも伝えたい場合
<label for="hoge">氏名<span>※</span></label>
<input type="text" id="hoge" name="fuga"
required="required">

一貫性のないラベルは×
74
ちょっと

75
カフェに行きた〜い!

76
CAFE
NIWAKA
NIWAKAについて　　メニュー　　地図　　ブログ

77
CAFE
NIWAKA
NIWAKAについてメニュー
インフォメーションブログ

78
CAFE
NIWAKA
NIWAKAについてメニュー
インフォメーションブログ

79
ラベリングの一貫性は重要。
ラベルが異なるとコンテンツも異なる
と思われてしまう。

80
SHOP INFO
ご利用案内
店舗情報
インフォメーション
地図
交通案内
マップ
アクセス

81
同じコンテンツだと思われなければ、
アクセシブルではない。

情報にたどり着けない
アクセシビリティが低い
82
※ 英語表記にするだけでもハードルが上がる
＝

代替テキストは使い分けてこそ○
83

84
代替テキストを考えてみよう！

85
Wikimedia Commonsより
筑後川昇開橋

86
報道写真風景写真
建築写真
歴史記事
旅行記事
百科事典
ボタンのサムネイル
写真講座

87
風景写真なら
alt="遠く脊振山を臨む春の筑後川昇開橋"
筑後川昇開橋

88
建築写真なら
alt="間隔26mの橋脚の間に24mの可動橋が架かり、
23mまで上昇して船を通す構造のトラス橋"
筑後川昇開橋

89
報道写真なら
alt="筑後川河口に見られる干潟消失問題"
筑後川昇開橋

90
「写真であること」を伝えたい場合
alt="写真：筑後川河口に見られる干潟消失問題"

91
筑後川昇開橋
筑後川昇開橋の全長は約５０７メートルで、
その建設には大変な苦労があったと伝えられ
ている。橋脚の深さは約１５∼１８メートル
と記録されているが、有明海は干満の差が大
きく、水面が一定でないため掘削作業は困難
を極めた。そして、橋桁を架けるときは船で
運び、潮と浮力を利用したと記録されている。
「国指定重要文化財筑後川昇開橋」サイトより
また、筑後川の水面も有明海の干満の影響を受けて一定ではなく干潮の時は可動橋が降りていて
も、小船は通ることができるようになっているが、中型船以上は列車通過まで一時ストップしな
ければならなかった。このようなことは佐賀線設置の時に船舶会社と協議され、列車通過以外は
船舶が優先されることが約束され、それがもとで昇降式可動橋が作られたといわれている。

92
記事で情報が得られるため説明が不要な場合
alt="写真：筑後川昇開橋全景"

93
めんたいロックとは？
1 9 7 0 〜 8 0 年代初頭にかけて福岡県で生まれ
たロックが一般的に「めんたいロック」と言
われているのだろう。1970年代に柴山俊之が
福岡で鮎川誠らと結成したサンハウスが「め
んたいロック」の源流であると多くの人が考
えている。1975年にサンハウスはメジャーデ
ビューし、その後続々と福岡のロックバンド
がメジャーデビューを果たした。
「めんたいROCK!!」サイトより
（シーナ&ザロケッツ（1978デビュー）、ARB（1978年デビュー）、ロッカーズ（1980年デ
ビュー）、ルースターズ（1980年デビュー）、THE MODS（1981年デビュー））。「めんたい
ロック」という言葉はルースターズデビューの頃に生れた言葉だという説が強い。その為、どの
バンドを「めんたいロックバンド」というかは議論になる事もある。しかし、全国的には「福岡
のロック」の総称として「めんたいロック」と呼ぶ人も少なくない。

94
記事の内容と関係ないイメージ画像の場合
alt=""（空）
alt="イメージ"
○：
×：

95
筑後川流域の観光プランに加えたい
おすすめの橋厳選10
古くは「筑紫次郎」と呼ばれ日本三大暴れ川の一つとして有名だった筑後川も、今では
流域の人々の暮らしに寄り添う川として穏やかな表情を見せています。そんな筑後川に
架かる様々な橋の魅力と歴史に迫るおすすめの観光プランを作成しました。

96
文字情報の入った画像
alt="旅行の達人忘れられない旅行にしよう！旅の記録
から厳選した旅行カタログ（背景：筑後川昇開橋）"
※ 基本的には、伝える必要のある文字情報は全て記載

97
筑後川流域の観光プランに加えたい
おすすめの橋厳選10
古くは「筑紫次郎」と呼ばれ日本三大暴れ川の一つとして有名だった筑後川も、今では
流域の人々の暮らしに寄り添う川として穏やかな表情を見せています。そんな筑後川に
架かる様々な橋の魅力と歴史に迫るおすすめの観光プランを作成しました。

98
同じ写真でも、用途によって
代替テキストはさまざま。

99
代替テキストは、
電話の相手に画像の内容を伝える
　つもりで考えるのがコツ。

101
多様性を理解し、
アクセシビリティを確保しよう

支援技術
CSS
コンテンツ
JavaScript
HTML
UA
OS
ハードウェア
102
利用者に情報を届けるためには、
コンテンツのアクセシビリティも重要

103
位置関係や色に頼った表現や、伝わらないラベルでは
情報にたどり着けない
アクセシビリティが低い
＝

104
代替テキストは用途によって使い分けが必要

105
いろんな人へ届けるために
「ちょっと」気をつけてみましょう！

ありがとうございました
@SawadaStdDesign

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

Recommended

Recommended

More Related Content

More from Nozomi Sawada

More from Nozomi Sawada (19)