alt属性考

60 %
40 %
Information about alt属性考
Technology

Published on October 16, 2008

Author: aratakojima

Source: slideshare.net

Description

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

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

⾃⼰紹介 ⼩嶋 新 兵庫県神⼾市在住 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」で作るちょっと 変わったメニュー トップページ NO.5

ユーザビリティガイドライン 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” 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

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

⾳声ブラウザ・スクリーンリーダー 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

仕様書によると 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

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

代替テキストいろいろ 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 NO.46

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

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

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

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=“” />メニュー2</a></li> <li><a href=“hoge”><img src=“hoge” alt=“” />メニュー3</a></li> </ul> NO.51

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ NO.72

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

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

宣伝! NO.75

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

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

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

Add a comment

Related presentations

Related pages

IMGのalt属性・title属性について考える(後編) | HiGash.Net

今回は実際にイメージ画像をIMGで表示した場合にaltをどうするかということを中心に、alt属性について考えて ...
Read more

CSS Nite in Osaka, Vol.12 「alt属性考」で扱うリソースの事前公開 - TRANS

何度かブログでも取り上げたのですが、来週10月15日水曜日にCSS Nite in Osaka, Vol.12で「alt属性考」というテーマでお話 ...
Read more

CSS Nite in Osaka, Vol.12 「alt属性考」スライド公開 - TRANS

一昨日、CSS Nite in Osaka, Vol.12に来ていただいた皆様、ありがとうございました。さて、とりあえずなのですが、その ...
Read more

alt属性和title属性-css/html编程【1】-66编程

alt属性和title属性-css/html编程【1】由66编程频道友情整理,仅供参考。更多相关信息请访问编程学习专题。
Read more

imgは画像、altは代替 - 徒書

imgは画像、altは代替. LSC1月17日分の17b alt属性で、img要素について気になる記述がありました。 「alt属性は画像の ...
Read more

【SEO】alt属性は「画像を端的に説明するテキスト」にする - 検索サポーター

alt属性 には画像を ... SEOに繋げて考 ...
Read more

CSS Nite in Osaka, Vol.12(2008年10月15日開催)

『alt属性考』 アクセシビリティの代表格といえばimg要素におけるalt属性。仕様書においてもalt属性が必須である ...
Read more

CSS Nite in Osaka, Vol.12に小島 新さんが出演

alt属性考. アクセシビリティの代表格といえばimg要素におけるalt属性。仕様書においてもalt属性が必須であることや ...
Read more

在<;imgsrc=”tmp.gif”alt=”测试”>;标记中alt属性设定的是?()_考试资料网

在<;imgsrc=”tmp.gif”alt=”测试”>;标记中alt属性设定的是?() 网站首页; 考试题库; 在线模考;
Read more