Loading article…
alt属性は、 HTMLおよびXHTMLドキュメントで使用されるHTML 属性で、レンダリングできない要素の代わりに表示される代替テキスト( alt テキスト) を指定します。 alt 属性は短い説明に使用され、長い説明にはlongdesc 属性が使用されます。 World Wide Webの標準化団体であるWorld Wide Web Consortium (W3C) は、HTML で表示されるすべての画像に alt 属性を含めることを推奨していますが、 alt 属性にテキストを含める必要はありません。Web サイトの画像に適切な alt 属性がないため、アクセシビリティ関連の訴訟がいくつか起こっています。
alt 属性は、Web 閲覧に特別なソフトウェアを使用する視覚障碍のあるインターネット ユーザーなど、アクセシビリティとユーザー フレンドリ性を高めるために使用されます。HTML 内に表示される画像に alt 属性を使用することは、W3C のWeb コンテンツ アクセシビリティ ガイドライン(WCAG) の一部です。スクリーン リーダーとテキストベースの Web ブラウザーは、画像の代わりに alt 属性を読み取ります。alt 属性内のテキストは、テキストとしてコピー アンド ペーストされたときに画像の代わりに使用され、画像を機械で読み取りやすくして、検索エンジン最適化(SEO) を向上させます。
歴史
この属性は、テキストベースのブラウザをサポートするために、1993年のHTML 1.2ドラフトで初めて導入されました。[1] 1999年にリリースされたHTML 4.01では、この属性はimgタグとareaタグの必須属性となりました。[2] inputタグと非推奨のappletタグではオプションです。[3]
Internet Explorer 7およびそれ以前のバージョンでは、 alt 属性のテキストがツールチップテキストとしてレンダリングされますが、これはWorld Wide Web Consortium (W3C) の HTML 標準に準拠していません。[4]この動作により、多くのWeb 開発者は、画像に関する追加情報を含むツールチップを表示したいときに、その用途を意図した title 属性を使用する代わりに、 alt 属性を誤用するようになりました。[5] [6] 2009 年にリリースされたInternet Explorer 8以降、 alt 属性は Internet Explorer でツールチップとしてレンダリングされなくなりました。[7]
使用法
alt属性のテキストは、画像が読み込めない場合に、ページの内容の意図された意味を変えずに画像を置き換えるために使用されます。[8] W3CのWebコンテンツアクセシビリティガイドラインでは、alt属性は画像自体の文字通りの説明ではなく、画像の意味と意図を伝えるために使用されると規定されています。[9] たとえば、機関のロゴの画像のalt属性は、ロゴがどのように見えるかの詳細を説明するのではなく、それが機関のロゴであることを伝える必要があります。[10] [11] alt属性は、画像の短く簡潔な説明に使用することを目的としています。より長い説明はlongdesc属性を使用して提供できます。longdesc属性はより詳細な情報を提供し、alt属性を補完しますが、alt属性に代わるものではありません。[2]
Orcaなどのスクリーンリーダーは、画像の代わりに代替テキストを読み上げます。[12] Lynxなどのテキストベースのウェブブラウザは、画像の代わりに代替テキストを表示します（または、画像がクリック可能なボタンの場合は、値属性を表示します）。[13]グラフィカルブラウザは通常、画像のみを表示し、ユーザーが画像のプロパティを表示した場合、ブラウザが画像を表示しないように設定した場合、またはブラウザが画像を取得またはデコードできなかった場合にのみ、代替テキストを表示します。[14]
alt属性に説明を使用すると、検索エンジンの最適化が向上し、Google画像検索などの画像に特化した検索エンジンが、ウェブサイトで使用されている関連画像を検索して検索結果に表示できるようになります。[15]画像以外の検索結果の場合、alt属性内のテキストは、ページ上の通常のテキストと同じように検索エンジンによって読み取られます。[16]
W3Cは、情報を伝えず純粋に装飾的な画像は、HTMLマークアップではなくCSSalt=""で指定することを推奨しています。装飾的な画像がコンテンツに追加されず、追加情報も提供しないHTMLを使用してレンダリングされる場合、W3Cは の形式で空のalt属性を含めることを推奨しています。[17]これにより、意味を伝えない画像をスキップすることで、スクリーンリーダーや非グラフィカルブラウザのユーザーがページをよりナビゲートしやすくなります。alt属性が指定されていない場合、画像を表示できないブラウザは画像を見落とすことなく、代わりにURLまたは別の識別マーカーを読み取ったり表示したりします。[18]これにより、ユーザーは一般にURLを読んだだけでは画像がテキストに関連しているのか、それともWebページの純粋に装飾的な要素なのかを判断できないため、曖昧さが生じます。 [19] 2021年のGoogle Lighthouse監査では、監査されたaltテキスト属性の27％が空であったことが示されましたが、それらの画像の大部分は装飾以外の情報画像でした。[20]
訴訟
ウェブサイトのアクセシビリティとウェブサイト上の適切な alt 属性の欠如をめぐっては、多くの訴訟が起こされている。[18] マグワイア対シドニーオリンピック組織委員会は、2000 年の訴訟で、オーストラリアの盲目の男性が、シドニーオリンピック組織委員会のウェブサイト www.olympics.com が画像に alt 属性がないためアクセスできないとして同委員会を訴えた。[21]オーストラリア人権委員会は、視覚障害者がウェブサイトをナビゲートできるようにするアクセシビリティ標準に準拠していないとして、ウェブサイトが男性に対して差別的であると判断した。[22]訴訟中、オーストラリア連邦、州、および準州政府は、ブロードバンド、通信、デジタル経済省を通じて、すべての .gov.au ウェブサイトに W3C のアクセシビリティ ガイドラインを採用するという共同声明を発表した。[23]
米国では、画像に alt 属性が付いていないことがアメリカ障害者法(ADA) 違反であるとして、注目を集めた訴訟がいくつか起こっています。[24]米国司法省は、ウェブサイトのアクセシビリティの障壁の例として alt 属性がないことをあげています。[25] 全米盲人連盟対 Target Corp. は、 Target.com が画像に alt 属性を使用していなかったために ADA に違反したと主張する 2006 年の集団訴訟です。 [26]この訴訟は、米国におけるウェブサイトのアクセシビリティと ADA への準拠に関する法的先例となりました。[27]
参考文献
- ^ バーナーズ・リー、ティム、コノリー、ダニエル（1993年6月）。「ハイパーテキスト・マークアップ言語（HTML）インターネット・ドラフト・バージョン1.2」。IETF IIIRワーキンググループ。2017年1月3日時点のオリジナルよりアーカイブ。 2010年9月18日閲覧。
- ^ ab 「13 オブジェクト、イメージ、およびアプレット」。World Wide Web Consortium。1999年 12 月 24 日。2008 年 9 月 6 日時点のオリジナルよりアーカイブ。2005年12 月 4 日閲覧。
- ^ Hazaël-Massieux, Dominique (2002年11月20日). 「各ビジュアルの機能を説明するためにalt属性を使用する」. World Wide Web Consortium . 2022年3月20日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ 「なぜ Mozilla は alt ツールチップを表示しないのか?」MDN Web Docs。 2008 年 10 月 15 日時点のオリジナルよりアーカイブ。2009 年7 月 22 日閲覧。
- ^ Flavell, AJ「IMGにおけるALTテキストの使用」www.htmlhelp.com。2022年1月8日時点のオリジナルよりアーカイブ。 2022年10月16日閲覧。
- ^ W3C HTML WG (1999 年 12 月 24 日). 「7.4.3 title 属性」. HTML 4.01 仕様. W3C. 2009 年 7 月 26 日時点のオリジナルよりアーカイブ。2009年7 月 22 日閲覧。
{{cite web}}: CS1 maint: numeric names: authors list (link) - ^ 「Internet Explorer 8 の新機能 - アクセシビリティと ARIA」。MSDN。Microsoft。2009年 2 月 28 日時点のオリジナルよりアーカイブ。2009年7 月 22 日閲覧。
- ^ “HTMLImageElement.alt”. Mozilla . 2022年8月22日時点のオリジナルよりアーカイブ。2022年10月14日閲覧。
- ^ 「img要素でのalt属性の使用」。ワールドワイドウェブコンソーシアム。2022年5月16日時点のオリジナルよりアーカイブ。2022年10月13日閲覧。
- ^ “Logo Alt Text”.サウスカロライナ大学. 2022年7月22日時点のオリジナルよりアーカイブ。2022年10月15日閲覧。
- ^ Montti, Roger (2022年11月1日). 「Google Explains Alt Text for Logos & Buttons」. Search Engine Journal . 2022年11月3日時点のオリジナルよりアーカイブ。 2022年11月3日閲覧。
- ^ Hofmann, Frank; Beckert, Axel (2021). 「テキストアート：画像をテキストとしてレンダリングする」. Linux Magazine . 2022年10月15日時点のオリジナルよりアーカイブ。2022年10月14日閲覧。
- ^ 「Lynx ユーザーズ ガイド v2.8.9」。lynx.invisible-island.net。2019年2月4日時点のオリジナルよりアーカイブ。2022年10月15日閲覧。
- ^ “Image ALT Text”.ペンシルベニア州立大学. 2014年10月6日. 2022年10月12日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ 「Google Images のベスト プラクティス」。Google Developers。2022年 9 月 20 日。2022 年 10 月 14 日時点のオリジナルよりアーカイブ。2022年10 月 14 日閲覧。
- ^ Southern, Matt G. (2022年3月22日). 「Google: Altテキストは画像検索の要素にすぎない」. Search Engine Journal . 2022年4月22日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ 「埋め込みコンテンツ – HTML 5」。W3C。2017年7月2日時点のオリジナルよりアーカイブ。 2017年6月29日閲覧。
- ^ ab Solovieva, Tatiana I.; Bock, Jeremy M. (2014). 「アクセシビリティと大学ウェブサイトのモニタリング：障害者のニーズに応える」。Journal of Postsecondary Education and Disability . 27 (2): 113–127. 2022年10月14日時点のオリジナルよりアーカイブ。2022年10月14日閲覧 – Education Resources Information Center経由。
- ^ Curl, Angela L.; Bowers, Deborah D. (2009年4月23日). 「ウェブサイトのアクセシビリティに関する長期研究：ソーシャルワーク教育ウェブサイトはよりアクセシビリティが向上したか？」。Journal of Technology in Human Services。27 ( 2): 93–105。doi :10.1080/15228830902749229。hdl : 2374.MIA /5279。S2CID 143667951。2022 年10月14日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ Tait, Alex; Davis, Scott; Niyi-Awosusi, Olu; Wilhelm, Gary; Dixon, Carlie (2021年11月30日). 「パートII第9章-アクセシビリティ」。HTTParchive.orgによるWeb Almanac 。 2022年10月14日閲覧。
- ^ White, Caroline (2000年11月2日). 「平等になるための戦い」. The Guardian . 2022年10月14日時点のオリジナルよりアーカイブ。2022年10月14日閲覧 – Newspapers.com経由。
- ^ バーカム、パトリック（2000年8月30日）。「ウェブサイトが『視覚障害者を差別』」ガーディアン。2016年8月23日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ 「第7回オンライン評議会閣僚会議 – メディアリリース」。オーストラリアブロードバンド・通信・デジタル経済省。2000年6月30日。2013年6月20日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ Cohen, Alex H.; Fresneda, Jorge E.; Anderson, Rolph E. (2020年9月). 「小売業者がウェブサイトのアクセシビリティと障害のある消費者について理解する必要があること：課題と機会」。Journal of Consumer Affairs。54 ( 3 ) : 854–889。doi : 10.1111 /joca.12307。ISSN 0022-0078。S2CID 225771708 。
- ^ 「WebアクセシビリティとADAに関するガイダンス」ADA.gov 2022年3月18日。2022年10月13日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ ダニエルズ、リンダ・マーカス（2006年9月13日）。「視覚障害者向けウェブサイト：これが次の『2000年問題対応』要件か？」WRAL-TV。2008年9月16日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
- ^ Frank, Jonathan (2008年1月). 「視覚障碍者のためのウェブアクセシビリティ：企業の社会的責任か、訴訟回避か？」。第41回ハワイ国際システム科学会議（HICSS 2008）の議事録。ワイコロア、ハワイ：IEEE。p. 284。doi ：10.1109/HICSS.2008.497。S2CID 16280255。 2021年3月8日時点のオリジナルよりアーカイブ。 2022年10月14日閲覧。
外部リンク
- WebAIM の代替テキストの適切な使用
- Ian Hicksonによる画像の代替テキストに関するミニ FAQ