アンカーリンクにaltタグを使用することは正しいですか?


124

アンカーリンクにaltタグを使用することは正しいですか?

<a href="#" class="test" alt="Something" src="sfasfs" ></a>

回答:


130

そのようなことは公式の仕様を見ることによって最もよく答えられます:

  1. 仕様に移動しますhttps : //www.w3.org/TR/html5/

  2. a要素」を検索:https : //www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. a要素に許可されているすべての属性をリストする「コンテンツ属性」を確認します。

    • グローバル属性
    • href
    • target
    • download
    • rel
    • hreflang
    • type
  4. リンクされている「グローバル属性」を確認してくださいhttps : //www.w3.org/TR/html5/dom.html#global-attributes

ご覧のとおり、このalt属性はa要素では許可されていません。
また、src属性が許可されていないことにも気づくでしょう。

することで、あなたのHTMLを検証し、これらのようなエラーがあなたに報告されています。


上記は2014年のW3CのHTML標準であるHTML5の場合であることに注意してください。2016年、HTML 5.1は次のHTML標準になりまし。許可された属性の検索は同じ方法で機能します。要素がHTML 5.1では別の属性を持つことができることがわかります。arev

W3CのHTML Current Statusで、すべてのHTML仕様(最新の標準を含む)を見つけることができます。


2
私は見ていないtitleで、属性aのグローバル属性は、それが右のように使用することtitleで属性をaか?
Yousef Altaf

1
@YousefAltaf:どのページに見えますか?リンク1は、グローバル属性、リストをtitle
2015

取得したので、グローバル属性の下にリストされていますが、使用するかどうかにかかわらず、ページの品質に影響しますか?
Yousef Altaf、2015

@YousefAltaf:これは別の質問です。ここでは説明しない方がいいでしょう。その定義を参照してください。それでも質問がある場合は、自由に別の質問を作成してください(ただし、まだ質問されていない場合は、事前に検索しておくことをお勧めします)。
2015

4
「HTML属性の検索方法」としてブックマークされた回答。ありがとう。
'11

59

アンカーの場合は、代わりにタイトルを使用する必要があります。altはaの有効な属性ではありません。http://w3schools.com/tags/tag_a.aspを参照してください


@FabioPoloniありがとう、私は誰もがページ上の怒鳴るリンクを見つけることができると思っていました:-)
tomis

私は、誰かがこのトピックについてよく知らなければ、彼はそれを見つけられないだろうと思いました;-)
Fabio Poloni

8
この情報は、たまたまw3schoolsでは正しいですが、w3schoolsは公式ではなく、信頼性がありません。w3fools.comを
Jukka K. Korpela

thx Guys ...それを除けば、私の必要性は純粋にアクセシビリティ標準に基づいており、パフォーマンスのオーバーヘッドを打ち消していた。私はspirte画像を使用しましたが、同時にalt属性を付けたかったので、背景画像を使用することはできませんでした。代わりに、私は..助けた回避策を持っている
user2067736

1
「タイトル」はw3schoolsにはもうありません。ただし、タイトルはグローバル属性であるため、使用できます:w3.org/TR/html5/dom.html#global-attributes
rosell.dk

28

「タイトル」はブラウザに広く実装されています。試してください:

<a href="#" title="hello">asf</a>

3
これは、上記の10分の回答ではなく、回答の形式です。ただし、この回答にはリンクも必要です。w3schools.com
tags

上記の質問には答えられないことに同意しtitleますが、HTML5の仕様によれば(ほとんどのブラウザーで実装されていますが)、それは誤りです。
felwithe 2018年

6

いいえ、alt属性(タグではなく属性)はa、HTML仕様またはドラフトの要素では許可されていません。また、どのブラウザにも重要なものとして認識されていないようです。

人々がそれを使おうとするのは少し不思議ですが、おそらくマウスオーバー時に「ツールチップ」が表示されることを期待してaltimg要素の属性を使用してアナログで使用していると考えられます。これには2つの問題があります。まず、各要素には、各要素の仕様で定義された独自の属性があります。第2に、alt一部の古いブラウザでの属性の「ツールチップ」レンダリングは、予想されるものではなく、奇妙な、またはバグでさえありました。alt何らかの理由で画像自体が提示されない場合に限り、属性がユーザーに提示されることになっています。

「ツールチップ」を作成するには、title代わりに属性を使用するか、または「CSSツールチップ」にGoogleを使用し、好みのCSSベースのツールチップを使用します(マウスオーバーで表示される非表示の「レイヤー」として特徴付けることができます)。


CSSベースのツールチップを使用してプログラムで作成されたリンクを使用するにはどうすればよいですか?
サルバドールバレンシア

6

alt属性の場合と同様に説明情報を適用する場合は、アンカータグのtitle属性を使用する必要があります。タイトル属性はアンカータグで有効であり、リンクされたページに関する情報を提供する以外の目的には役立ちません。

W3Cでは、title属性の値をリンクされたドキュメントのタイトルの値と一致させることを推奨していますが、これは必須ではありません。

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


あるいは、より有益であると思われる場合は、ARIAアクセシビリティ属性を使用できますaria-label(と混同しないでくださいaria-labeledby)。 aria-label画像のalt属性と同じ機能を果たしますが、画像以外の要素に対して機能し、スクリーンリーダー用に最適化してからの最適化の測定値が含まれます。

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


ただし、アンカータグを記述したい場合は、通常relまたはrevタグを使用するのが適切ですが、特定の値に限定するため、人間が読める形式の記述には使用しないでください。

Relは、リンクされたページと現在のページの関係を説明するのに役立ちます。(たとえば、リンクされたページが論理シリーズの次の場合は、rel = nextになります)

rev属性は、基本的にrel属性の逆の関係です。Revは、現在のページとリンクされたページの関係を記述します。

ここで有効な値のリストを見つけることができます:http : //microformats.org/wiki/existing-rel-values


5

タイトルを使ってうまくいきました!

title属性はリンクのタイトルを与えます。1つの例外を除いて、それは純粋に助言です。値はテキストです。例外はスタイルシートリンクで、title属性は代替のスタイルシートセットを定義します。

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>

1

タグでのalt属性の使用が無効であることを示すすべての回答を見て驚いています。これは間違いです。a

HTMLは属性の使用をブロックしません。

<a your-custom-attribute="value">Any attribute can be used</a>

alt属性を使用することが意味的に正しいかどうかを尋ねるとa、私は言うでしょう:

番号。画像の説明を設定するために使用されます<img alt="image description" />

それは、属性をどうするかという問題です。次に例を示します。

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

繰り返しになりますが、カスタム属性を使用することが意味的に正しいかどうかを尋ねると、次のようになります。

いいえdata-*。セマンティック用途に属性を使用します。


おっと、質問は2013年に尋ねられました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.