Hallo zusammen!

Ich brauche mal Euren Rat.
Eine WAA Prüfung meiner Webseite hat ergeben, dass die Tooltipps in den Formularen nicht ohne Maus aufrufbar sind. Da sie mit Image-Tags (mouseover auf einem Icon) umgesetzt sind, tauchen sie nicht im Tabindex auf.

Daher nun meine Frage: wie kann man barrierearme Tooltipps umsetzen. In der Regel sollen damit Hinweise zu den einzelnen Eingabefelder angezeigt werden.

Ich sehe da nun folgende Möglichkeiten:
- Tipp mit einem Link-Tag umsetzen und so per Tab erreichbar machen. Anzeige mit onfocus
- Tipp immer in der Nähe des entsprechenden Formularfeldes anzeigen (für alle Benutzer)
- Tipp mit dem Formularfeld kombinieren und bei onfocus den Tipp anzeigen (verdeckt dann aber immer andere Teile des Formulars)

Die Tipps können auch leider nicht im title-Attribut benutzt werden, da die WAA Prüfung auch zu lange Zeichenketten im title als fault wertet.

Der Einsatz von JavaScript ist kein Problem, da die Seite eh komplett JS verseucht ist. Damit hat WAA aber bisher absolut kein Problem

Bin für jede weitere Idee dankbar. Sicher hat der ein oder andere etwas mehr Erfahrung in dem Bereich!

Hallo,

du könntest auch die Pseudoklassen :focus oder :hover nutzen um Infos per CSS ein- und auszublenden.

__________________
MfG
Jürgen

ASP.NET Zone | ASP.NET und mehr... | gutsch-online | sharpcms | Jürgen Gutsch

Das barriereärmste Verfahren heißt: vermeiden.

Kannst Du das Formular von den Formulierungen her nicht so anlegen, dass Tooltipps überflüssig sind?

__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."

Dieses Vorgehen würde ich natürlich bevorzugen. Aber es geht leider um Formulare eines großen Kreditinstituts mit zum Teil 30 bis 40 Eingabefelder pro Formular.

Normal fände ich es gut in einer seperaten Spalte die Texte neben das Formular zu schreiben. Nur dann gibt es wieder keine Möglichkeit die Tipps mit dem jeweiligen Element im Formular zu verknüpfen.

:hover und :focus wären nochmal eine Überlegung wert...

Ein Formular mit 30 bis 40 Eingabefeldern würde ich linear anlegen. Dann wird die Übersicht für den User deutlich verbessert. Und notwendiger Erklärungstext über dem Eingabefeld ist so gut möglich.

Falls Label nicht aussagekräftig genug formuliert werden kann, dann würde ich zwischen Label und Input noch einen Absatz <p> anbringen.

__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."

Eine gute Lösung. Entweder ist der Tipp hilfreich (dann sollte er für alle Nutzer sichtbar sein) oder er ist es nicht (dann kannst du getrost darauf verzichten).

__________________
Meisterschützen - Community für Sportschützen

Das wirkliche Problem an der Geschichte ist, dass der Kunde eine sehr strikte Vorstellung der Formulare hat.

Folgende Seite ist quasi ein perfektes Beispiel:
https://www.barclaycard.de/apply_online.php3

So in der Art sieht das bei meinem Kunden auch aus. Da ist leider so gut wie garkein Platz um den Text anzeigen zu lassen...

Ist ein super Beispiel wie weit Kundenwünsche oftmals von guten Lösungen entfernt sind

In dem verlinkten Formular wären Tooltips bzw. weitere Erklärungen imho eh nicht nötig, ist das in Deinem Falle denn anders?

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Mhmm im Grunde hast Du sogar recht. Das Meiste davon ist in dem Fall Marketing-Schrott, der im Grunde kaum wirkliche Hilfe bietet

Der Thread hat mir trotzdem geholfen, also schonmal vielen Dank dafür. Ich denke es ist notwendig mit dem Kunden grundsätzlich einige Dinge zu klären!