NO.1

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

NPO法⼈しゃらくArata Kojima

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

2008年10⽉15⽇（⽔）

NO.2

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

NO.3

NPO法⼈しゃらく

http://www.123kobe.com/

NO.4

TRANS

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

NO.5

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

NO.6

ユーザビリティガイドライン

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

NO.7

メディア掲載

NO.8

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

NO.9

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

NO.10

障害者のバリアフリー情報

NO.11

当時のコード（笑）<div class=“navi”></div><table width=“760” border=“0” cellspacing=“0”><tr>

<td class=“tdhead” colspan=“3” align=“center”><font size="4" color="#000000">タグライン</font>

</td></tr><tr>

<td class="tdmenu"><img src="img/menu_bar_search.gif" alt=“hoge“

width="150" height="25">

NO.12

バリアフリーマップ

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

NO.13

alt属性考

NO.14

ちなみに、アルト？オルト？

NO.15

代替テキスト

NO.16

てか、だいたい？だいがえ？

NO.17

http://kotonoha.cc/no/38061

NO.18

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

NO.19

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

NO.20

alt属性ってなに？

NO.21

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

NO.22

画像表⽰

NO.23

画像⾮表⽰

NO.24

⾳声ブラウザで読み上げてみる[CSS Nite公式ブログ。][「CSS」だけでなく、Web制作全般に関するトピックを取り上げる

セミナーイベント。都内のほか、⼤阪、名古屋、⻘森、福岡、沖縄、秋⽥、札幌、福井、仙台、福島でも開催。。]

[開催情報。] [新着エントリー。] [アーカイブ。] [CSS Niteの本。] [プレゼント。] [CSS Niteについて。] [CSS Nite開催情報。]

開催を予定しているCSS Niteのイベントのリストです。詳細はイベント名をクリックしてください。このページの後半にそれぞれのイベントの概要があります。

テーブル情報: CSS Nite開催情報。イベント名 開催⽇ 開始時間会場 残席状況

NO.25

⾳声ブラウザ・スクリーンリーダーIBMホームページ・リーダー

http://www-06.ibm.com/jp/accessibility/solution_offerings/hpr/

PC-Talkerhttp://www.pctalker.net/

JAWShttp://www.extra.co.jp/jaws/

95Readerhttp://www.ssct.co.jp/barrierfree/95reader/

NO.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.27

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

NO.28

代替テキストいろいろ

Microsoft Office Word Adobe Flash

NO.29

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

NO.30

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

NO.31

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

http://www.acc04.jp/

NO.32

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

NO.33

NO.34

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

NO.35

NO.36

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

NO.37

NO.38

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

NO.39

NO.40

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

NO.41

NO.42

alt=“”

NO.43

NO.44

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

NO.45

alt属性記述ルール

NO.46

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

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

NO.47

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

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

NO.48

Web Content Accessibility Guidelines 2.0

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

NO.49

HTML Techniques for Web ContentAccessibility Guidelines 1.0

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

NO.50

HTML 5

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

NO.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.52

装飾的な画像

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

NO.53

意味を持つ画像

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

NO.54

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

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

NO.55

ロゴ

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

NO.56

図・グラフ（説明あり）

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

NO.57

図・グラフ（説明なし）

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

NO.58

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

NO.59

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

NO.60

画像の属性による分類ロゴ戻るなどのボタンメニュー、ナビ⽂字の画像化バナー写真（⼈物）写真（装飾的）写真（コンテンツ）キービジュアル

イラスト地図グラフ・表イメージマップリンク付き画像＋⽂章リスト区切り線スペーサー画像

NO.61

書き出しでそれに続く内容を予測できるalt=“写真：hogehoge”alt=“グラフ：hogehoge”

論理的な意味をなしており、情報を伝達できる75⽂字以下を⽬安とするalt属性のテキスト≠画像の⽂字情報

共通事項

NO.62

alt=“”

写真（装飾的）キービジュアルイラスト

リスト区切り線スペーサー画像

NO.63

キービジュアル・イラスト装飾的

alt=“”役割はあくまで印象づけ

コンテンツalt=“コンテンツ”役割は⽂字の画像化と同等と考えるただし、ほかのページへのリンクの場合はalt=“リンク先ページ内容”

NO.64

alt=“画像の⽂字列”

ロゴ戻るなどのボタンメニュー、ナビ

⽂字の画像化イメージマップ

NO.65

ロゴトップページ

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

ほかのページalt=“トップページへ”役割はトップページへの移動

NO.66

バナー・写真（⼈物）バナー

alt=“バナー：バナー内容”⽂字列によってサイトの移動を⽰唆する

写真（⼈物）alt=“写真：⼈物の名前”ただし、写真前後の⽂脈（キャプションなど）にて⼈物名称が表れる場合は、alt=“”

NO.67

写真（コンテンツ）写真メイン

alt=“ひまわり畑の写真です。天気は⾮常に晴れていて、⼀⾯にひまわりが咲いています。”テキストによって写真がイメージできる⽂字数にはあまり束縛されない

写真サブalt=“写真：コンテンツに応じて”写真の様⼦をテキストに書き起こす

NO.68

地図・グラフ・表説明⽤テキストあり

alt=“”テキストが近接し、更にそのテキストが画像の内容を説明している場合

説明⽤テキストなしalt=“地図：地図の説明⽂”書き出しとその画像の説明⽂を表記する地図の場合は経路、グラフの場合は特筆すべきデータの列挙など

NO.69

Google

mail.google.com/mail メール

NO.70

Yahoo! JAPAN

満面の笑み 満面の笑み

NO.71

リンク付き画像＋⽂章CMS等で管理（特にトップページ）

alt=“ガイドラインに準ずる”リンク先のページの画像を縮⼩した上で表⽰することが多い

プレーンなHTMLで管理alt=“リンク付き⽂章と同等”画像でも⽂章でもどちらをクリックしても同じページに⾏けることを⽰唆する

NO.72

まとめ

NO.73

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

NO.74

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

NO.75

宣伝！

NO.76

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

NO.77

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

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

NO.78

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

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