Ist es in Ordnung, ein leeres Anker-Tag zu haben?

Ich weiß, dass ich folgende tun können, wenn ich ein Bild in einen Klick-able Link aktivieren möchte:Ist es in Ordnung, ein leeres Anker-Tag zu haben?

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a>

Aber ich würde es vorziehen, ein CSS-Hintergrundbild zu verwenden, so dass ich einen Hover-Zustand haben kann:

Das funktioniert gut, außer ich bin mir nicht sicher, ob es völlig gültig ist, einen Anker-Link zu haben, der nichts enthält. Chrome macht es gut, genauso wie FF, aber ich bin mir nicht sicher, ob andere gleich sind.

Ich weiß, ich nur einen Text in den Link setzen könnte, und verstecken es mit text-indent: -9999px, aber ich habe es nie gemocht, diesen Ansatz, für various reasons. Ist mein Code über Cross-Browser-kompatibel?

Quelle

2012-05-08 stephenmurdoch

Ihr '' Tag bekommt nur den Stil der' .twitter'? Oder hat es eine Art Reset mit zusätzlichen Stilen? – Zuul

Es ist gültig, aber es ist am besten, wenn Sie es gebracht hat etwas in und verwendet so etwas wie

font-size: 0;

es zu verstecken. Wenn jemand kein CSS hat (Screenreader zum Beispiel), könnte er immer noch ungefähr sagen, worum es bei dem Link geht.

Here's a great article on the subject

Quelle

2012-05-08 18:47:31

Oder 'font-size: 0;', vielleicht, aber jede relative Größe basierend auf 'em' Einheiten würde wahrscheinlich davon stark betroffen sein. –

@DavidThomas: Deshalb sagte ich "etwas wie" Es gibt mehrere Lösungen :) –

Oder eine der verschiedenen Bild-Ersatz-Techniken: http://css-tricks.com/css-image-replacement/ –

Es ist absolut gültig, aber wenn Sie möchten, können Sie einen leeren Raum innen setzen: &nbsp;

Quelle

2012-05-08 18:45:53

danke, hatte nicht daran gedacht :) – stephenmurdoch

Es ist überhaupt nicht in Ordnung, da es grundlegende Zugänglichkeit Prinzipien bricht. Es gibt keine Möglichkeit, alternativen Text für ein Hintergrundbild auf die gleiche Art und Weise anzugeben, wie Sie es unter Verwendung eines alt-Attributs in einem img-Tag für ein Inhaltsbild angeben können und sollten. Siehe WCAG 2.0 Guideline 1.1.

Wenn Sie ein Bild mouseover ändern möchten, gibt es dafür CSS- und JavaScript-Techniken.

Quelle

2012-05-08 19:35:39

Guter Punkt über die Zugänglichkeit, danke für den Link – stephenmurdoch

Verwenden Sie & nbsp; wie der Text, und du bist gut.

Quelle

2012-05-08 20:02:22

Siehe Kommentare zu meiner Antwort oben auf, warum das eine schlechte Übung ist. –

Bei Markup.tips haben wir vor kurzem einige Tests zur Barrierefreiheit in iOS 8 durchgeführt und festgestellt, dass VoiceOver nicht zu leeren Links navigiert. Es muss mindestens ein geschützter Raum sein. Ob dies als ein iOS-Bug betrachtet werden soll oder nicht, sind wir nicht sicher.

Quelle

2015-04-05 23:01:24

Ist es in Ordnung, ein leeres Anker-Tag zu haben?

Antwort

Verwandte Themen