Wie schreibe ich guten alternativen Text für Bilder, um Screenreadern und blinden Benutzern zu helfen, zu verstehen, worum es geht?

Sie sollten nicht den sehbehinderten Benutzer verstehen lassen, worum es in dem Bild geht. Für Blinde ist das Bild effektiv nicht vorhanden , es gibt nur den Text.

Der Text alt sollte als einzelner Satz / Absatz funktionieren das kann für das Bild ersetzt werden, den gleichen Inhalt vermitteln und im Kontext des angrenzenden Inhalts noch Sinn machen.

Wenn das Bild ein Teil der GUI ist, sollte der alt text eine Aktion (ein Verb), eine Zeile upvote , eine Antwort darauf oder geben Abmelden .

Sie sollten Ihre Website mit links besuchen und versuchen, Ihre Website zu verstehen. Wenn es zum Beispiel ein Tortendiagramm gibt, sollte sein alt -Text eine kleine Zusammenfassung der Prozentsätze sein. Wenn du neben einem Blogeintrag nur eine hübsche Blume hast, gib ihr keinen internen alt text wie Blumenbildbegleiter des Blogposts # 324 oder noch schlimmer flower.jpg .

Wenn das Bild für die Navigation wichtig ist oder um Informationen zu erhalten, versuchen Sie, ihm einen alt -Text zu geben, der die Website ohne das Bild funktionieren lässt. Wenn das Bild nur als Präsentation angezeigt wird, geben Sie ihm einen leeren alt -Text.

title sollte, soweit ich weiß, es tun nur angezeigt, wenn sie schwebte, also sollten sie dem Bild zusätzliche Informationen geben, so nutzlose Duplizierung von Informationen sollte vermieden werden. Bei Screenreadern ist dies ein wenig komplizierter, da die Unterstützung und Konfiguration zwischen den Benutzern sehr unterschiedlich sein kann.

Einige empirische Daten zeigen title als nutzlos an:

  

• Die meisten Benutzer von Bildschirmlesesoftware ändern ihre Standardeinstellungen nicht, um auf die TITLE-Attributinformationen für Links zuzugreifen.
  
• Die meisten Bildschirmlesesoftware kann standardmäßig auf den TITLE-Attributinhalt in Formularsteuerelementen zugreifen.
  
• Einige Bildschirmlesesoftware kann nicht auf TITLE-Attributinformationen zugreifen.
  
• Benutzer von Bildschirmlupen können TITLE-Attributtexte bei niedrigeren Vergrößerungsstufen lesen.
  
• Benutzer von Bildschirmlupen können TITLE-Attributtexte, die mehr als 1 oder 2 Wörter enthalten, nicht bei höheren Vergrößerungsstufen lesen.
  

Hier ist ein guter Ratschlag , besser gesagt, als ich konnte

  

Verwenden Sie dies, um zusätzliche Informationen bereitzustellen, die nicht unbedingt erforderlich sind. In den meisten visuellen Browsern wird der Titeltext als Tooltip angezeigt, wenn das Element verschoben wird. Der Browserhersteller muss jedoch entscheiden, wie der Titeltext gerendert wird. Einige zeigen stattdessen den Text in der Statusleiste an. Frühe Versionen von Safari taten dies zum Beispiel.

     

Eine gute Verwendung des title-Attributs ist das Hinzufügen von beschreibendem Text zu Links, insbesondere wenn der Link-Text selbst das Ziel des Links nicht eindeutig beschreibt. Auf diese Weise können Sie den Besuchern zeigen, wo der Link sie hinführt. Sie können sie nur vor dem Laden einer Seite speichern, um herauszufinden, dass sie nicht interessiert ist. Eine weitere Möglichkeit besteht darin, zusätzliche Informationen für ein Bild bereitzustellen ein Datum oder andere Informationen, die wahrscheinlich nicht notwendig sind.

Denken Sie daran, dass das longdesc Attribut sein sollte ein Link zu weiteren Informationen, nicht Text , da manche Leute es missbrauchen.

Ich bin ein Screenreader-Benutzer und werde Stackoverflow als Beispiel für das Gute und das Schlechte verwenden.

Alt-Tags sollten kurz und beschreibend sein. Zum Beispiel sind die alt -Tags von stackoverflow für die Optionen "vote up" und "vote down" nett, da sie nicht lange brauchen, um zu lesen und schnell auf den Punkt zu kommen. Beispiele für schlechte alt-Tags sind die diese Frage zu einem Favoriten machen und diese Antwort akzeptieren. Keines der Tags ist beschreibend, das favorite-Tag ist nur " * " und das Akzeptieren des Antwort-Tags ist " check ". Die einzige Möglichkeit für mich zu erzählen, was sie sind, ist die Quelle zu lesen oder jemanden sehend lassen zu lassen weiß, wofür sie sind.

Soweit title Attribute gehen, habe ich nicht wirklich viel Rat. Mein Bildschirmleser liest sie standardmäßig nicht, daher verwende ich sie normalerweise nicht. Ein Beispiel für etwas, das nützlich sein könnte, sind zusätzliche Informationen. Zum Beispiel ist der Grund, warum meine angenommene Antwortquote so niedrig ist, dass ich keine Möglichkeit habe zu sagen, ob ich eine Antwort auf eine Frage akzeptiert habe. Es wäre schön, wenn das title-Attribut in der Grafik zum Annehmen dieser Antwort etwas wie " klicke, um diese Antwort zu akzeptieren " wenn die Antwort nicht akzeptiert wurde und "" klicke, um diese Antwort zu entfernen die akzeptierte Antwort "wenn es die akzeptierte Antwort ist.

Ich denke, die beste Vorgehensweise besteht darin, den gleichen Inhalt in die alt- und title-Attribute zu schreiben.

Was man schreiben soll - einfach, in wenigen Worten, was auf dem Bild ist.

Sehen Sie sich diesen Artikel an, in dem alt-Attribute ziemlich gut beschrieben sind: Ссылка