ALT-Attribut
Das altAttribut wird in einem Satz von Tags definiert (nämlich img, areaund gegebenenfalls zum inputund applet) zu ermöglichen, eine Textäquivalent für das Objekt bereitzustellen.
Ein Textäquivalent bietet Ihrer Website und ihren Besuchern in den folgenden häufigen Situationen die folgenden Vorteile:
- Heutzutage sind Webbrowser auf einer Vielzahl von Plattformen mit sehr unterschiedlichen Kapazitäten verfügbar. Einige können überhaupt keine oder nur eingeschränkte Bildtypen anzeigen. Einige können so konfiguriert werden, dass keine Bilder geladen werden. Wenn in Ihrem Code das alt-Attribut in den Bildern festgelegt ist, zeigen die meisten dieser Browser die von Ihnen angegebene Beschreibung anstelle der Bilder an
- Einige Ihrer Besucher können keine Bilder sehen, seien sie blind, farbenblind oder sehbehindert. Das alt-Attribut ist eine große Hilfe für diejenigen, die sich darauf verlassen können, um eine gute Vorstellung davon zu haben, was auf Ihrer Seite steht
- Suchmaschinen-Bots gehören zu den beiden oben genannten Kategorien: Wenn Sie möchten, dass Ihre Website so gut indiziert wird, wie es verdient, verwenden Sie das alt-Attribut, um sicherzustellen, dass wichtige Abschnitte Ihrer Seiten nicht übersehen werden.
Titel Attribut
Ziel dieser Technik ist es, Benutzern bei der Eingabe von Daten in Formularen eine kontextsensitive Hilfe bereitzustellen, indem die Hilfeinformationen in einem titleAttribut bereitgestellt werden. Die Hilfe kann Formatinformationen oder Beispiele für Eingaben enthalten.
Beispiel 1: Ein Pulldown-Menü, das den Umfang einer Suche einschränkt
Ein Suchformular verwendet ein Pulldown-Menü, um den Umfang der Suche einzuschränken. Das Pulldown-Menü befindet sich unmittelbar neben dem Textfeld, in das der Suchbegriff eingegeben wird. Die Beziehung zwischen dem Suchfeld und dem Pulldown-Menü ist Benutzern klar, die das visuelle Design sehen können, das keinen Platz für ein sichtbares Etikett bietet. Das titleAttribut wird verwendet, um das selectMenü zu identifizieren . Das titleAttribut kann von Bildschirmleseprogrammen gesprochen oder als QuickInfo für Benutzer von Bildschirmlupen angezeigt werden.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
Beispiel 2: Eingabefelder für eine Telefonnummer
Eine Webseite enthält Steuerelemente zur Eingabe einer Telefonnummer in den USA mit drei Feldern für Vorwahl, Vermittlungsstelle und die letzten vier Ziffern.
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
Beispiel 3: Eine Suchfunktion
Eine Webseite enthält ein Textfeld, in das der Benutzer Suchbegriffe eingeben kann, und eine Schaltfläche mit der Bezeichnung "Suchen" zur Durchführung der Suche. Das titleAttribut wird verwendet, um das Formularsteuerelement zu identifizieren, und die Schaltfläche wird direkt hinter dem Textfeld positioniert, sodass dem Benutzer klar ist, dass im Textfeld der Suchbegriff eingegeben werden soll.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Beispiel 4: Eine Datentabelle mit Formularsteuerelementen
Eine Datentabelle mit Formularsteuerelementen muss jedes Steuerelement den Spalten- und Zeilenüberschriften für diese Zelle zuordnen. Ohne einen Titel (oder ein LABEL außerhalb des Bildschirms) ist es für nicht visuelle Benutzer schwierig, mithilfe ihrer Hilfstechnologie beim Durchblättern des Formulars zu pausieren und nach entsprechenden Zeilen- / Spaltenüberschriftenwerten zu fragen.
Ein Umfrageformular enthält beispielsweise vier Spaltenüberschriften in der ersten Zeile: Frage, Zustimmen, Unentschieden, Nicht zustimmen. Jede folgende Zeile enthält eine Frage und ein Optionsfeld in jeder Zelle, die der Antwortauswahl in den drei Spalten entsprechen. Das title-Attribut für jedes Optionsfeld ist eine Verkettung der Antwortauswahl (Spaltenüberschrift) und des Textes der Frage (Zeilenüberschrift) mit einem Bindestrich oder Doppelpunkt als Trennzeichen.
Img Element
Zulässige Attribute, die bei MDN erwähnt werden .
altcrossorigindecodingheightimportance (experimentelle API)intrinsicsize (experimentelle API)ismapreferrerpolicy (experimentelle API)srcsrcsetwidthusemap
Wie Sie sehen können title, ist das Attribut innerhalb des imgElements nicht zulässig . Ich würde altAttribut verwenden und wenn erforderlich würde ich CSS (Beispiel: Pseudoklasse :hover) anstelle von titleAttribut verwenden.