Bilder Karten SEO und Barrierefreiheit

Meine Frage des Tages betrifft Imagemaps und Zugänglichkeit.

Nach meinem Verständnis beschreiben Sie jedes Mal, wenn Sie ein Alt-Tag innerhalb eines IMG-Tags verwenden, das Bild, das die Benutzererfahrung für Blinde oder nur für Personen erhöht, die das Rendern von Bildern aus einem oder mehreren Gründen deaktiviert haben.

Jetzt scheint diese Logik mit Image Maps nicht zu funktionieren, was ich anhand eines Beispiels demonstrieren werde.

<img alt="Image Map of Bits and Bobs" usemap="#imgmap" src="bits-and-bobs">
  <map name="imgmap">
    <area shape="poly" coords="" href="" alt="Spanner" title="Guitars Repairs"/>
    <area shape="poly" coords="" href="" alt="Dollar" title="Guitars for Sale"/>
    <area shape="poly" coords="" href="" alt="eLearning" title="Learning about Guitars"/>
    <area shape="poly" coords="" href="" alt="String" title="How to tune a Guitar"/>
  </map>

Gültige Hrefs und Koordinaten wurden zur einfacheren Anzeige entfernt ...

Wie Sie im obigen Bild sehen können, beschreibe ich eher den Bereich des Bildes als das Ergebnis, wenn sie auf das Bild klicken. Meine Frage ist also einfach ...

In einer Imagemap, die Links enthält, beschreiben Sie das Link-Ergebnis, anstatt das Bild zu beschreiben. Beispielsweise würde ein Bild von Strings, die Strings verwenden, nicht anzeigen, dass es sich um einen Link zum Stimmen einer Gitarre handelt, das Titel-Tag jedoch.

Wenn ein Link nur ein Bild enthält, sollte das altAttribut dieses Bildes im Allgemeinen nicht das Bild, sondern das Linkziel beschreiben .

Bei Imagemaps ist es dasselbe.

Das altAttribut des imgElements sollte das gesamte Bild beschreiben (da das Bild selbst nicht verknüpft ist).

Das altAttribut des areaElements sollte seinen Zweck beschreiben (da dieser Bildbereich verknüpft ist, ist die Verknüpfung wichtig, nicht das Bild).

Referenz: HTML5 (CR vom 06.08.2013): area→alt :

Es [ das altAttribut ] gibt den Text des Hyperlinks an. Sein Wert muss Text sein, der, wenn er mit den für die anderen Hyperlinks der Imagemap angegebenen Texten und mit dem alternativen Text des Bildes, jedoch ohne das Bild selbst, angezeigt wird, dem Benutzer die gleiche Auswahl bietet wie der Hyperlink bei Verwendung ohne Text, jedoch mit auf das Bild angewendeter Form.

FWIW, WCAGs Technik H37 (informativ, nicht normativ) hat ein Beispiel für das img- altdas auch eine Anweisung zur Auswahl eines Bereichs enthält:

Ein Bild auf einer Website zeigt den Grundriss eines Gebäudes. Das Bild ist eine Imagekarte, wobei jeder Raum ein interaktiver Kartenbereich ist. Der Alternativtext lautet "Grundriss des Gebäudes. Wählen Sie einen Raum aus, um weitere Informationen über den Zweck oder den Inhalt des Raums zu erhalten." Die Anweisung zum "Auswählen eines Raums" zeigt an, dass das Bild interaktiv ist.

Persönlich bin ich mir da nicht so sicher. Ich denke, wenn eine solche Anweisung benötigt würde, sollte sie Teil des Prosa-Textes in der Nähe der Imagemap sein.

In Ihrem Beispiel sollten Sie also den Inhalt der titleAttribute als altInhalt verwenden (und wahrscheinlich die titleAttribute entfernen , um diesen Inhalt nicht zu wiederholen).

Da ich Ihr Bild nicht gesehen habe, kann ich hier nur raten, aber ich gehe davon aus, dass das Bild aus 4 Symbolen ohne Textbezeichnung besteht. In diesem Fall gilt möglicherweise die Richtlinie für das Symbolbild hier:

Ein Symbol ist normalerweise ein einfaches Bild, das ein Programm, eine Aktion, eine Datendatei oder ein Konzept darstellt.

In diesem Fall sollte das img- altnicht die (Schönheit der) Symbole beschreiben, sondern was sie darstellen .

Wenn meine Annahme richtig ist, scheint dies kein perfekter Kandidat für eine Imagemap zu sein, sondern für Kunden .