alt属性考/CSS Nite in Osaka, Vol.12




                       alt属性考
               CSS Nite in Osaka, Vol.12

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




                NO.2
NPO法⼈しゃらく




 http://www.123kobe.com/


                           NO.3
TRANS




http://d.hatena.ne.jp/aratako0/


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




  http://www.123kobe.com/doc/nilesen.html


                                            NO.6
メディア掲載




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




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




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




               NO.10
当時のコード(笑)
<div class=“navi”></div>
<table width=“760” border=“0” cellspacing=“0”>
 <tr>
  <td class=“tdhead” colspan=“3” a...
バリアフリーマップ




 http://www.123kobe.com/nojigiku/


                                    NO.12
alt属性考




         NO.13
ちなみに、アルト?オルト?




                NO.14
代替テキスト




         NO.15
てか、だいたい?だいがえ?




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


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




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




                     NO.19
alt属性ってなに?




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




                         NO.21
画像表⽰




       NO.22
画像⾮表⽰




        NO.23
⾳声ブラウザで読み上げてみる
[CSS Nite公式ブログ。]
[「CSS」だけでなく、Web制作全般に関するトピックを取り上げる
セミナーイベント。都内のほか、⼤阪、名古屋、⻘森、福岡、沖縄、
秋⽥、札幌、福井、仙台、福島でも開催。。]

[...
⾳声ブラウザ・スクリーンリーダー
IBMホームページ・リーダー
 http://www-06.ibm.com/jp/accessibility/solution_offerings/hpr/

PC-Talker
 http://www.pct...
仕様書によると
For user agents that cannot display images, forms,
or applets, this attribute specifies alternate text.
The langua...
各種指針
Web Content Accessibility Guidelines 1.0
リハビリテーション法第508条
WebコンテンツJIS




                                           N...
代替テキストいろいろ




Microsoft Office Word   Adobe Flash


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




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




                NO.30
アックゼロヨン・アワード2007




     http://www.acc04.jp/


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




               NO.32
NO.33
alt=“なるほど!⼤⾖⾷品のひみつ”




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




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




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




                            NO.40
NO.41
alt=“”




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




                       NO.44
alt属性記述ルール




             NO.45
<img>要素のalt属性の⼊れ⽅




  http://website-usability.info/2007/01/entry_070120.html


                                        ...
altはつけるだけじゃなくて




http://w3j.org/articles/practicalaccessiblehtml/practicalaccessiblehtml01.html


                      ...
Web Content Accessibility Guidelines 2.0




            http://www.w3.org/TR/WCAG20/


                                  ...
HTML Techniques for Web Content
   Accessibility Guidelines 1.0




    http://www.w3.org/TR/WCAG10-HTML-TECHS/


        ...
HTML 5




http://www.w3.org/TR/2008/WD-html5-20080610/


                                               NO.50
装飾的なアイコン




<ul>
<li><a href=“hoge”><img src=“hoge” alt=“” />メニュー1</a></li>
<li><a href=“hoge”><img src=“hoge” alt=“” />メ...
装飾的な画像




<h1>CSS Nite</h1>
<p><img src=“hoge” alt=“” /></p>
<p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。
</p>




            ...
意味を持つ画像




<h1>CSS Nite</h1>
<p><img src=“hoge” alt=“アクセシビリティ” /></p>
<p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。
</p>




   ...
メインコンテンツとしての画像




<p><img src=“hoge” alt=“ひまわり畑の写真です。天気は⾮常に晴れていて、⼀
⾯にひまわりが咲いています。” /></p>




                           ...
ロゴ




<h1>
<img src=“hoge” alt=“CSS Nite” />
</h1>




                                    NO.55
図・グラフ(説明あり)




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



        ...
図・グラフ(説明なし)




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




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




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




                    NO.59
画像の属性による分類
ロゴ          イラスト
戻るなどのボタン    地図
メニュー、ナビ     グラフ・表
⽂字の画像化      イメージマップ
バナー         リンク付き画像+⽂章
写真(⼈物)      リスト
写真...
共通事項
書き出しでそれに続く内容を予測できる
alt=“写真:hogehoge”
alt=“グラフ:hogehoge”
論理的な意味をなしており、情報を伝達
できる
75⽂字以下を⽬安とする
alt属性のテキスト≠画像の⽂字情報




  ...
alt=“”




写真(装飾的)       リスト
キービジュアル       区切り線
イラスト          スペーサー画像




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




           ...
alt=“画像の⽂字列”




ロゴ         ⽂字の画像化
戻るなどのボタン   イメージマップ
メニュー、ナビ




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




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




   ...
写真(コンテンツ)
写真メイン
alt=“ひまわり畑の写真です。天気は⾮常に晴れ
ていて、⼀⾯にひまわりが咲いています。”
テキストによって写真がイメージできる
⽂字数にはあまり束縛されない
写真サブ
alt=“写真:コンテンツに応じて”
写真...
地図・グラフ・表
説明⽤テキストあり
alt=“”
テキストが近接し、更にそのテキストが画像の
内容を説明している場合
説明⽤テキストなし
alt=“地図:地図の説明⽂”
書き出しとその画像の説明⽂を表記する
地図の場合は経路、グラフの場合は特...
Google




mail.google.com/mail メール


                           NO.69
Yahoo! JAPAN




  満面の笑み 満面の笑み


                NO.70
リンク付き画像+⽂章
CMS等で管理(特にトップページ)
 alt=“ガイドラインに準ずる”
 リンク先のページの画像を縮⼩した上で表⽰
 することが多い
プレーンなHTMLで管理
 alt=“リンク付き⽂章と同等”
 画像でも⽂章でもどちらを...
まとめ




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




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




                NO.74
宣伝!




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




               NO.76
インクルーシブデザインワークショップ
   with Re:Creator’s Kansai




     http://www.re-creators.jp/inclusive/200811/


                    ...
ありがとうございました。

http://www.123kobe.com/
http://d.hatena.ne.jp/aratako0/
kojima@123kobe.com




                             ...
Upcoming SlideShare
Loading in …5
×

alt属性考

6,732 views

Published on

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

Published in: Technology
  • Be the first to comment

alt属性考

  1. 1. alt属性考/CSS Nite in Osaka, Vol.12 alt属性考 CSS Nite in Osaka, Vol.12 NPO法⼈しゃらく Arata Kojima 2008年10⽉15⽇(⽔) NO.1
  2. 2. ⾃⼰紹介 ⼩嶋 新 兵庫県神⼾市在住 27歳 特定⾮営利活動法⼈しゃらく TRANS NO.2
  3. 3. NPO法⼈しゃらく http://www.123kobe.com/ NO.3
  4. 4. TRANS http://d.hatena.ne.jp/aratako0/ NO.4
  5. 5. 最近のアクセス数トップ5 WordPressテーマカスタマイズのまとめ 印刷⽤CSSをまとめてみた WordPressで企業サイトを作る際によく使う プラグイン CSSの擬似クラス「:hover」で作るちょっと 変わったメニュー トップページ NO.5
  6. 6. ユーザビリティガイドライン http://www.123kobe.com/doc/nilesen.html NO.6
  7. 7. メディア掲載 NO.7
  8. 8. アクセシビリティに対しての きっかけ NO.8
  9. 9. 数年前に運営していたサイトと バリアフリーマップの制作 NO.9
  10. 10. 障害者のバリアフリー情報 NO.10
  11. 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. 12. バリアフリーマップ http://www.123kobe.com/nojigiku/ NO.12
  13. 13. alt属性考 NO.13
  14. 14. ちなみに、アルト?オルト? NO.14
  15. 15. 代替テキスト NO.15
  16. 16. てか、だいたい?だいがえ? NO.16
  17. 17. http://kotonoha.cc/no/38061 NO.17
  18. 18. alt属性ライティング ガイドラインってどう? NO.18
  19. 19. 本⽇のアジェンダ alt属性ってなに? アックゼロヨン受賞サイトのalt属性 alt属性記述ルール alt属性ライティングガイドライン まとめ NO.19
  20. 20. alt属性ってなに? NO.20
  21. 21. <img src=“hoge” alt=“CSS Nite公式ブログ” /> NO.21
  22. 22. 画像表⽰ NO.22
  23. 23. 画像⾮表⽰ NO.23
  24. 24. ⾳声ブラウザで読み上げてみる [CSS Nite公式ブログ。] [「CSS」だけでなく、Web制作全般に関するトピックを取り上げる セミナーイベント。都内のほか、⼤阪、名古屋、⻘森、福岡、沖縄、 秋⽥、札幌、福井、仙台、福島でも開催。。] [開催情報。] [新着エントリー。] [アーカイブ。] [CSS Niteの 本。] [プレゼント。] [CSS Niteについて。] [CSS Nite開催情報。] 開催を予定しているCSS Niteのイベントのリストです。詳細はイベ ント名をクリックしてください。このページの後半にそれぞれのイベ ントの概要があります。 テーブル情報: CSS Nite開催情報。イベント名 開催⽇ 開始時間 会場 残席状況 NO.24
  25. 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. 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. 27. 各種指針 Web Content Accessibility Guidelines 1.0 リハビリテーション法第508条 WebコンテンツJIS NO.27
  28. 28. 代替テキストいろいろ Microsoft Office Word Adobe Flash NO.28
  29. 29. alt属性の活躍どころ ネットの回線が遅くて画像の表⽰までに 時間がかかる 携帯電話などのモバイル端末を使っている ダイアルアップ接続でパケットごとに 料⾦加算 SEO対策 NO.29
  30. 30. アックゼロヨン受賞サイトの alt属性 NO.30
  31. 31. アックゼロヨン・アワード2007 http://www.acc04.jp/ NO.31
  32. 32. この画像のalt属性には どんな記述? NO.32
  33. 33. NO.33
  34. 34. alt=“なるほど!⼤⾖⾷品のひみつ” NO.34
  35. 35. NO.35
  36. 36. alt=“第⼆種郵便物 はがき ” NO.36
  37. 37. NO.37
  38. 38. alt=“⽂字を⼤きくする” NO.38
  39. 39. NO.39
  40. 40. alt=“当社はSix Apart ソリューション パートナー企業です” NO.40
  41. 41. NO.41
  42. 42. alt=“” NO.42
  43. 43. NO.43
  44. 44. alt=“⼩冊⼦「がん⾻転移の基礎知識」 プレゼント” NO.44
  45. 45. alt属性記述ルール NO.45
  46. 46. <img>要素のalt属性の⼊れ⽅ http://website-usability.info/2007/01/entry_070120.html NO.46
  47. 47. altはつけるだけじゃなくて http://w3j.org/articles/practicalaccessiblehtml/practicalaccessiblehtml01.html NO.47
  48. 48. Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/WCAG20/ NO.48
  49. 49. HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-HTML-TECHS/ NO.49
  50. 50. HTML 5 http://www.w3.org/TR/2008/WD-html5-20080610/ NO.50
  51. 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. 52. 装飾的な画像 <h1>CSS Nite</h1> <p><img src=“hoge” alt=“” /></p> <p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。 </p> NO.52
  53. 53. 意味を持つ画像 <h1>CSS Nite</h1> <p><img src=“hoge” alt=“アクセシビリティ” /></p> <p>ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。ここから本⽂。 </p> NO.53
  54. 54. メインコンテンツとしての画像 <p><img src=“hoge” alt=“ひまわり畑の写真です。天気は⾮常に晴れていて、⼀ ⾯にひまわりが咲いています。” /></p> NO.54
  55. 55. ロゴ <h1> <img src=“hoge” alt=“CSS Nite” /> </h1> NO.55
  56. 56. 図・グラフ(説明あり) <p>この図は⼿順を説明しています。</p> <p>⼿順は3段階に分かれており、順番に1から3までを実⾏し ます。</p> <p><img src=“hoge” alt=“” /></p> NO.56
  57. 57. 図・グラフ(説明なし) <p>この図は⼿順を説明しています。</p> <p><img src=“hoge” alt=“⼿順は3段階に分かれており、順番に 1から3までを実⾏する。” /></p> NO.57
  58. 58. alt属性ライティング ガイドライン NO.58
  59. 59. ライティングガイドラインの策定 コーディングのスピードアップ アクセシビリティにおける品質の確保 ライティングノウハウの共有 NO.59
  60. 60. 画像の属性による分類 ロゴ イラスト 戻るなどのボタン 地図 メニュー、ナビ グラフ・表 ⽂字の画像化 イメージマップ バナー リンク付き画像+⽂章 写真(⼈物) リスト 写真(装飾的) 区切り線 写真(コンテンツ) スペーサー画像 キービジュアル NO.60
  61. 61. 共通事項 書き出しでそれに続く内容を予測できる alt=“写真:hogehoge” alt=“グラフ:hogehoge” 論理的な意味をなしており、情報を伝達 できる 75⽂字以下を⽬安とする alt属性のテキスト≠画像の⽂字情報 NO.61
  62. 62. alt=“” 写真(装飾的) リスト キービジュアル 区切り線 イラスト スペーサー画像 NO.62
  63. 63. キービジュアル・イラスト 装飾的 alt=“” 役割はあくまで印象づけ コンテンツ alt=“コンテンツ” 役割は⽂字の画像化と同等と考える ただし、ほかのページへのリンクの場合は alt=“リンク先ページ内容” NO.63
  64. 64. alt=“画像の⽂字列” ロゴ ⽂字の画像化 戻るなどのボタン イメージマップ メニュー、ナビ NO.64
  65. 65. ロゴ トップページ alt=“サイト名” 役割はサイト名の表⽰ そもそもトップページのロゴにリンクを 貼るべきか? ほかのページ alt=“トップページへ” 役割はトップページへの移動 NO.65
  66. 66. バナー・写真(⼈物) バナー alt=“バナー:バナー内容” ⽂字列によってサイトの移動を⽰唆する 写真(⼈物) alt=“写真:⼈物の名前” ただし、写真前後の⽂脈(キャプションなど) にて⼈物名称が表れる場合は、alt=“” NO.66
  67. 67. 写真(コンテンツ) 写真メイン alt=“ひまわり畑の写真です。天気は⾮常に晴れ ていて、⼀⾯にひまわりが咲いています。” テキストによって写真がイメージできる ⽂字数にはあまり束縛されない 写真サブ alt=“写真:コンテンツに応じて” 写真の様⼦をテキストに書き起こす NO.67
  68. 68. 地図・グラフ・表 説明⽤テキストあり alt=“” テキストが近接し、更にそのテキストが画像の 内容を説明している場合 説明⽤テキストなし alt=“地図:地図の説明⽂” 書き出しとその画像の説明⽂を表記する 地図の場合は経路、グラフの場合は特筆すべき データの列挙など NO.68
  69. 69. Google mail.google.com/mail メール NO.69
  70. 70. Yahoo! JAPAN 満面の笑み 満面の笑み NO.70
  71. 71. リンク付き画像+⽂章 CMS等で管理(特にトップページ) alt=“ガイドラインに準ずる” リンク先のページの画像を縮⼩した上で表⽰ することが多い プレーンなHTMLで管理 alt=“リンク付き⽂章と同等” 画像でも⽂章でもどちらをクリックしても 同じページに⾏けることを⽰唆する NO.71
  72. 72. まとめ NO.72
  73. 73. まとめ alt属性はアクセシビリティの基本 スクリーンリーダーのためだけではない alt属性記述ルールはいろいろと公開されて いるから参考にするとちょっと幸せ! alt属性ライティングガイドラインを共有 すればもっと幸せになれるよ! NO.73
  74. 74. alt属性ライティング ガイドラインを作ってみよう NO.74
  75. 75. 宣伝! NO.75
  76. 76. アクセシビリティって なんか実感しにくいねん。 NO.76
  77. 77. インクルーシブデザインワークショップ with Re:Creator’s Kansai http://www.re-creators.jp/inclusive/200811/ NO.77
  78. 78. ありがとうございました。 http://www.123kobe.com/ http://d.hatena.ne.jp/aratako0/ kojima@123kobe.com NO.78

×