Alternativen zum Placeholder-Attribut in einem Input-Feld

[Rolf B]

Hallo einsiedler,

guck Dir die Element-Referenz im Selfwiki an. Die Daumenregel ist, dass ein Inline-Element - wie <span> - auch nur inline-Elemente enthalten sollte. <p> ist aber ein Block-Element.

Die genaue Regel findest Du pro Element in der Element-Referenz. Jedes Element hat einen Typ, für welchen Inhalt es steht, und es hat eine Liste erlaubter Inhaltstypen, die es enthalten darf. Im Selfwiki steht beispielsweise bei <span>:

Elternelemente: alle Elemente die fließenden Inhalt erlauben, alle Stil-Elemente. "Stil-Elemente" ist die beste Übersetzung, die wir nach langer Diskussion für das englische "phrasing content" erarbeitet haben.

Erlaubte Inhalte: Text, beliebig viele Stil-Elemente.

Was etwas redundant ist, weil einfacher Text ebenfalls als phrasing content gilt.

Und bei <p> steht:

Elternelemente: in Elementen, die fließenden Inhalt erlauben (flow content).

Erlaubte Inhalte: Text und Stil-Elemente.

Nun gibt es dieses Bild, das angibt, welche Inhaltstypen es gibt und welche eine Teilmenge von anderen sind. Leider sind die Texte nicht 1:1, im Bild steht "Fluß-Elemente" statt "fließender Inhalt", und "Aussagen" statt "Stil-Elemente". @Matthias Scharwies, hatten wir das nicht mal berichtigt?

Das Bild zeigt jedenfalls, dass phrasing content eine Teilmenge von flow content ist. Ein Element wie <div> oder <form>, das flow content enthalten darf, kann demnach <p> und <span> enthalten. Ein <p>, das flow content ist, darf aber nicht in einem <span> stehen, das phrasing content erwartet. Eigentlich müsste der Browser beim Antreffen eins <p> innerhalb eines <span> das <span> Element beenden - tut er aber nicht. Hat vielleicht historische Kompatibilitätsgründe, aber wenn man ein <p> in einen <span> legt und dem <span> eine Hintergrundfarbe gibt, übernimmt das <p> sie nicht. Was ein Zeichen dafür ist, dass was nicht stimmt. Ein <p> in einem <div> übernimmt dessen Hintergrundfarbe.

Also, Sinn der langen Rede: ein <p> gehört nicht in ein <span>. Entweder müsste dein Tipp selbst ein <span> sein, oder statt mit <span> müsstest Du Tipp und Input mit <div> gruppieren.

Was mir jetzt noch nicht klar ist: Wann soll der Tipp erscheinen und wie soll er platziert sein? Sichtbar nur dann, wenn ich im Feld drin stehe? Und soll er tatsächlich das Eingabefeld der vorigen Zeile überlagern?

Wenn Du es auf leichte Bedienbarkeit anlegst, würde ich beides nicht tun. Eine Erläuterung zur Eingabe sollte - finde ich - ständig sichtbar sein und unter dem Eingabefeld stehen.

Die Verwendung von describedby erscheint mir richtig, es verweist vom input auf den Erklärtext.

Ein Placeholder ist aber auch nur dann schlecht, wenn er Label oder eine eventuell nötige Erklärung ersetzen will. Das darf er nicht. Er darf auch nicht die einzige Erklärung sein, weil placeholder nicht zugänglich ist und er beim Tippen des ersten Zeichens verschwindet. Ein Screenreader würde ihn ignorieren. Aber als Zusatz ist er erlaubt. Du kannst also durchaus per Placeholder Beispielinhalte einsetzen. Es sei denn, deine Anwender verstehen nicht, dass das ein Beispiel ist und versuchen, das "vorgefüllte Eingabefeld" zu leeren.

Rolf