CSS Nite in Osaka, Vol.12の「alt属性考」のスライドです。

1. alt属性考／CSS Nite in Osaka, Vol.12
alt属性考
CSS Nite in Osaka, Vol.12
NPO法⼈しゃらく
Arata Kojima
2008年10⽉15⽇（⽔） NO.1

2. ⾃⼰紹介
⼩嶋 新
兵庫県神⼾市在住
27歳
特定⾮営利活動法⼈しゃらく
TRANS
NO.2

3. NPO法⼈しゃらく
http://www.123kobe.com/
NO.3

4. TRANS
http://d.hatena.ne.jp/aratako0/
NO.4

5. 最近のアクセス数トップ5
WordPressテーマカスタマイズのまとめ
印刷⽤CSSをまとめてみた
WordPressで企業サイトを作る際によく使う
プラグイン
CSSの擬似クラス「:hover」で作るちょっと
変わったメニュー
トップページ
NO.5

6. ユーザビリティガイドライン
http://www.123kobe.com/doc/nilesen.html
NO.6

7. メディア掲載
NO.7

8. アクセシビリティに対しての
きっかけ
NO.8

9. 数年前に運営していたサイトと
バリアフリーマップの制作
NO.9

10. 障害者のバリアフリー情報
NO.10

11. 当時のコード（笑）
<div class=“navi”></div>
<table width=“760” border=“0” cellspacing=“0”>
<tr>
<td class=“tdhead” colspan=“3” align=“center”>
<font size=quot;4quot; color=quot;#000000quot;>タグライン</font>
</td>
</tr>
<tr>
<td class=quot;tdmenuquot;>
<img src=quot;img/menu_bar_search.gifquot; alt=“hoge“
width=quot;150quot; height=quot;25quot;>
NO.11

12. バリアフリーマップ
http://www.123kobe.com/nojigiku/
NO.12

13. alt属性考
NO.13

14. ちなみに、アルト？オルト？
NO.14

15. 代替テキスト
NO.15

16. てか、だいたい？だいがえ？
NO.16

17. http://kotonoha.cc/no/38061
NO.17

18. alt属性ライティング
ガイドラインってどう？
NO.18

19. 本⽇のアジェンダ
alt属性ってなに？
アックゼロヨン受賞サイトのalt属性
alt属性記述ルール
alt属性ライティングガイドライン
まとめ
NO.19

20. alt属性ってなに？
NO.20

21. <img src=“hoge”
alt=“CSS Nite公式ブログ” />
NO.21

22. 画像表⽰
NO.22

23. 画像⾮表⽰
NO.23

24. ⾳声ブラウザで読み上げてみる
[CSS Nite公式ブログ。]
[「CSS」だけでなく、Web制作全般に関するトピックを取り上げる
セミナーイベント。都内のほか、⼤阪、名古屋、⻘森、福岡、沖縄、
秋⽥、札幌、福井、仙台、福島でも開催。。]
[開催情報。] [新着エントリー。] [アーカイブ。] [CSS Niteの
本。] [プレゼント。] [CSS Niteについて。] [CSS Nite開催情報。]
開催を予定しているCSS Niteのイベントのリストです。詳細はイベ
ント名をクリックしてください。このページの後半にそれぞれのイベ
ントの概要があります。
テーブル情報: CSS Nite開催情報。イベント名 開催⽇ 開始時間
会場 残席状況
NO.24

25. ⾳声ブラウザ・スクリーンリーダー
IBMホームページ・リーダー
http://www-06.ibm.com/jp/accessibility/solution_offerings/hpr/
PC-Talker
http://www.pctalker.net/
JAWS
http://www.extra.co.jp/jaws/
95Reader
http://www.ssct.co.jp/barrierfree/95reader/
NO.25

26. 仕様書によると
For user agents that cannot display images, forms,
or applets, this attribute specifies alternate text.
The language of the alternate text is specified by the
lang attribute.
http://www.w3.org/TR/html401/struct/objects.html#h-13.8
この属性は、画像、フォーム、アプレットを表⽰できない
ユーザエージェントのために、代替テキストを指定する。
代替テキストの⾔語は、lang属性で指定する。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#h-13.8
NO.26

27. 各種指針
Web Content Accessibility Guidelines 1.0
リハビリテーション法第508条
WebコンテンツJIS
NO.27

28. 代替テキストいろいろ
Microsoft Office Word Adobe Flash
NO.28

29. alt属性の活躍どころ
ネットの回線が遅くて画像の表⽰までに
時間がかかる
携帯電話などのモバイル端末を使っている
ダイアルアップ接続でパケットごとに
料⾦加算
SEO対策
NO.29

30. アックゼロヨン受賞サイトの
alt属性
NO.30

31. アックゼロヨン・アワード2007
http://www.acc04.jp/
NO.31

32. この画像のalt属性には
どんな記述？
NO.32

33. NO.33

34. alt=“なるほど！⼤⾖⾷品のひみつ”
NO.34

35. NO.35

36. alt=“第⼆種郵便物 はがき ”
NO.36

37. NO.37

38. alt=“⽂字を⼤きくする”
NO.38

39. NO.39

40. alt=“当社はSix Apart ソリューション
パートナー企業です”
NO.40

41. NO.41

42. alt=“”
NO.42

43. NO.43

44. alt=“⼩冊⼦「がん⾻転移の基礎知識」
プレゼント”
NO.44

45. alt属性記述ルール
NO.45

46. <img>要素のalt属性の⼊れ⽅
http://website-usability.info/2007/01/entry_070120.html
NO.46

47. altはつけるだけじゃなくて
http://w3j.org/articles/practicalaccessiblehtml/practicalaccessiblehtml01.html
NO.47

48. Web Content Accessibility Guidelines 2.0
http://www.w3.org/TR/WCAG20/
NO.48

49. HTML Techniques for Web Content
Accessibility Guidelines 1.0
http://www.w3.org/TR/WCAG10-HTML-TECHS/
NO.49

50. HTML 5
http://www.w3.org/TR/2008/WD-html5-20080610/
NO.50

51. 装飾的なアイコン
<ul>
<li><a href=“hoge”><img src=“hoge” alt=“” />メニュー1</a></li>
<li><a href=“hoge”><img src=“hoge” alt=“” />メニュー2</a></li>
<li><a href=“hoge”><img src=“hoge” alt=“” />メニュー3</a></li>
</ul>
NO.51

52. 装飾的な画像
<h1>CSS Nite</h1>
<p><img src=“hoge” alt=“” /></p>
<p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。
</p>
NO.52

53. 意味を持つ画像
<h1>CSS Nite</h1>
<p><img src=“hoge” alt=“アクセシビリティ” /></p>
<p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。
</p>
NO.53

54. メインコンテンツとしての画像
<p><img src=“hoge” alt=“ひまわり畑の写真です。天気は⾮常に晴れていて、⼀
⾯にひまわりが咲いています。” /></p>
NO.54

55. ロゴ
<h1>
<img src=“hoge” alt=“CSS Nite” />
</h1>
NO.55

56. 図・グラフ（説明あり）
<p>この図は⼿順を説明しています。</p>
<p>⼿順は3段階に分かれており、順番に1から3までを実⾏し
ます。</p>
<p><img src=“hoge” alt=“” /></p>
NO.56

57. 図・グラフ（説明なし）
<p>この図は⼿順を説明しています。</p>
<p><img src=“hoge” alt=“⼿順は3段階に分かれており、順番に
1から3までを実⾏する。” /></p>
NO.57

58. alt属性ライティング
ガイドライン
NO.58

59. ライティングガイドラインの策定
コーディングのスピードアップ
アクセシビリティにおける品質の確保
ライティングノウハウの共有
NO.59

60. 画像の属性による分類
ロゴ イラスト
戻るなどのボタン 地図
メニュー、ナビ グラフ・表
⽂字の画像化 イメージマップ
バナー リンク付き画像＋⽂章
写真（⼈物） リスト
写真（装飾的） 区切り線
写真（コンテンツ） スペーサー画像
キービジュアル
NO.60

61. 共通事項
書き出しでそれに続く内容を予測できる
alt=“写真：hogehoge”
alt=“グラフ：hogehoge”
論理的な意味をなしており、情報を伝達
できる
75⽂字以下を⽬安とする
alt属性のテキスト≠画像の⽂字情報
NO.61

62. alt=“”
写真（装飾的） リスト
キービジュアル 区切り線
イラスト スペーサー画像
NO.62

63. キービジュアル・イラスト
装飾的
alt=“”
役割はあくまで印象づけ
コンテンツ
alt=“コンテンツ”
役割は⽂字の画像化と同等と考える
ただし、ほかのページへのリンクの場合は
alt=“リンク先ページ内容”
NO.63

64. alt=“画像の⽂字列”
ロゴ ⽂字の画像化
戻るなどのボタン イメージマップ
メニュー、ナビ
NO.64

65. ロゴ
トップページ
alt=“サイト名”
役割はサイト名の表⽰
そもそもトップページのロゴにリンクを
貼るべきか？
ほかのページ
alt=“トップページへ”
役割はトップページへの移動
NO.65

66. バナー・写真（⼈物）
バナー
alt=“バナー：バナー内容”
⽂字列によってサイトの移動を⽰唆する
写真（⼈物）
alt=“写真：⼈物の名前”
ただし、写真前後の⽂脈（キャプションなど）
にて⼈物名称が表れる場合は、alt=“”
NO.66

67. 写真（コンテンツ）
写真メイン
alt=“ひまわり畑の写真です。天気は⾮常に晴れ
ていて、⼀⾯にひまわりが咲いています。”
テキストによって写真がイメージできる
⽂字数にはあまり束縛されない
写真サブ
alt=“写真：コンテンツに応じて”
写真の様⼦をテキストに書き起こす
NO.67

68. 地図・グラフ・表
説明⽤テキストあり
alt=“”
テキストが近接し、更にそのテキストが画像の
内容を説明している場合
説明⽤テキストなし
alt=“地図：地図の説明⽂”
書き出しとその画像の説明⽂を表記する
地図の場合は経路、グラフの場合は特筆すべき
データの列挙など
NO.68

69. Google
mail.google.com/mail メール
NO.69

70. Yahoo! JAPAN
満面の笑み 満面の笑み
NO.70

71. リンク付き画像＋⽂章
CMS等で管理（特にトップページ）
alt=“ガイドラインに準ずる”
リンク先のページの画像を縮⼩した上で表⽰
することが多い
プレーンなHTMLで管理
alt=“リンク付き⽂章と同等”
画像でも⽂章でもどちらをクリックしても
同じページに⾏けることを⽰唆する
NO.71

72. まとめ
NO.72

73. まとめ
alt属性はアクセシビリティの基本
スクリーンリーダーのためだけではない
alt属性記述ルールはいろいろと公開されて
いるから参考にするとちょっと幸せ！
alt属性ライティングガイドラインを共有
すればもっと幸せになれるよ！
NO.73

74. alt属性ライティング
ガイドラインを作ってみよう
NO.74

75. 宣伝！
NO.75

76. アクセシビリティって
なんか実感しにくいねん。
NO.76

77. インクルーシブデザインワークショップ
with Re:Creator’s Kansai
http://www.re-creators.jp/inclusive/200811/
NO.77

78. ありがとうございました。
http://www.123kobe.com/
http://d.hatena.ne.jp/aratako0/
kojima@123kobe.com
NO.78