Infobox/Tooltips mit title
Da es heute viele mobile Geräte gibt, die gar keine Maus mehr haben, sind solche Tooltips heute nicht unproblematisch. Bitte beachten Sie die weiter unten aufgeworfenen Fragen und überlegen, ob Sie nicht gleich eine zukunftssichere Varianten mit Popover wählen.
Inhaltsverzeichnis
Tooltip, Touch und Zugänglichkeit
In vielen Artikeln werden Tooltips als beste Sache seit der Erfindung von geschnittenem Brot angepriesen. Anfänger - so wie ich 2008 - haben eine panische Angst vor „schwierigem Code“ und wollen lieber 200 Zeilen CSS produzieren, ohne zu einer funktionalen Lösung zu kommen.
SELFHTML stellte 2002 im SELFHTML-Aktuell-Bereich einen CSS-Tooltipp vor [1] - auch im SELF-Wiki gab es mehrere CSS-basierte Beispiele, die die Funktionalität eines Tooltipps scheinbar erreichten, aber nur eingeschränkt zugänglich waren:
Sie haben jedoch einige gravierende Nachteile:
CSS-basierte Tooltips funktionieren nicht mit …
- Screenreadern
- Tastaturgesteuerten Geräten
- Touchscreens
- Vermeiden Sie Tooltips weitgehend.
Nützliche Information sollte direkt auf dem Bildschirm erscheinen. Ist Information nicht wichtig genug um direkt angezeigt zu werden, kann sie in den häufigsten Fällen gleich ganz weggelassen werden. - Verwenden Sie Randfenster (sidebar), Fußnoten oder die neue Popover API.
- Verlinken Sie vom Fließtext so groß wie möglich, damit Links auf mobilen Geräten zielsicher angeklickt werden können (keine (?)-Icons).
- Integrieren Sie den Tooltip bei Formularen in das label des Eingabefelds oder verwenden Sie aria-Attribute um diese zu verknüpfen.
- Stellen Sie sicher, dass Tooltips auch mit focus und touch-Ereignissen ausgelöst werden.
Das W3C gibt folgendes Beispiel für einen Tooltip mit aria-Attributen:
<div class="text">
<label id="tp1-label" for="first">First Name:</label>
<input type="text" id="first" name="first" size="20"
aria-labelledby="tp1-label"
aria-describedby="tp1"
aria-required="false" />
<div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
Your first name is a optional
</div>
</div>
Tooltips mit dem title-Attribut
Das title-Universalattribut erzeugt beim Überfahren mit der Maus einen kleinen Standard-Tooltip. Sein Aussehen ist von den Grundeinstellungen des Browsers abhängig und kann nicht mit CSS gestylt werden.
<h2 title="Jetzt schau ich mal, wie lange ich tippen kann ohne die Luft anzuhalten - Ja, auch bei Überschriften kann man ein title-Attribut verwenden.
Bei einer zu großen Textlänge brechen die Browser den Text um,
dies ist allerdings nicht für jeden Browser steuerbar.
Manche Browser brechen den Text bei einem Zeilenumbruch im Code um.">
Tooltips mit dem title-Attribut
</h2>
<img src="S-Logo-vektor.svg" title="Das ist ein Bild." alt="self-logo">
<p>Dieser Absatz enthält eine <abbr title="Abkürzung">Abk.</abbr> gefolgt von weiterem Text.</p>
<p>In der Textgestaltung beschreibt ein
<dfn title="dfn steht für Definition, also Erklärung">Absatz, lateinisch passus,
einen aus einem oder mehreren Sätzen bestehenden Abschnitt eines fortlaufenden Textes.
</dfn>
</p>
<p>Zurück zum <a title="Hier geht’s zum Artikel …" href="Tooltips_mit_CSS">Artikel</a></p>
<q>Mehr dazu im
<cite title="Quellenangabe">
<a href="https://wiki.selfhtml.org">Self-Wiki</a>
</cite>
</q>
Sie können jedem Element ein title-Attribut geben. Bei einer zu großen Textlänge brechen die Browser den Text automatisch um, dies ist allerdings nicht für jeden Browser steuerbar. Manche Browser brechen den Text bei einem Zeilenumbruch im Code um oder verhalten sich so, als ob white-space: pre gesetzt wäre.
Elemente für Tooltips
Früher wurden Tooltips hauptsächlich als interne Verweise angelegt, da die Pseudoklasse :hover im IE6 nur bei Links funktionierte. Semantischer ist eine Verwendung dafür vorgesehener Elemente.
Für die Textauszeichnung im Fließtext gibt es folgende Elemente:
Noch einfacher ist eine Verwendung von details, wobei das summary-Element als Begriff und ein Kindelement details p als Zusatztext verwendet wird.
Abkürzungen mit abbr
Das abbr-Element zeichnet einen Teil eines Fließtextes als Abkürzung, engl. abbreviation aus. Wenn die ausgeschriebene Langform im title-Attribut enthalten ist, wird sie bei :hover als Tooltip angezeigt.
Im Beispiel ist ein Textabsatz notiert und innerhalb davon eine Abkürzung. Die Langform der Abkürzung wird im title-Attribut notiert.
Im zweiten Absatz erhält die englischsprachige Abkürzung ein passendes lang-Attribut.
Verwenden Sie abbr weder mit noch ohne Titel. Die Darstellung ist in den verschiedenen Browsern und unterstützenden Technologien nach wie vor uneinheitlich. Ein Teil der Benutzer wird immer einen Teil der Information vermissen.
Erklären Sie Abkürzungen, Akronyme, Initialismen usw. bei der ersten Verwendung und greifen Sie dann ruhig auf die verkürzte Form im Fließtext zurück.
Definitionen mit dfn
Mit dem Element dfn wird ein Teil eines Fließtextes als Definition (definition) oder als zu definierender Begriff ausgezeichnet.
Im oberen Beispiel ist die gesamte Erklärung als Definition ausgezeichnet.
In den beiden folgenden Beispielen ist nur der Begriff mit dfn ausgezeichnet; die Erklärung selbst folgt im weiteren Verlauf.
Das letzte Beispiel verwendet eine Definitionsliste, in der der zu definierende Begriff im dt-Element, die Erklärung im dd-Element enthalten ist.
In den meisten Browsern wird Text innerhalb des dfn-Elements kursiv dargestellt.
Popup-Boxen
Das windows-Objekt und seine Methoden wurden früher zur Erzeugung weiterer Fenster gebraucht. Diese nannte man Popup-Boxen, wenn sie vor dem aktuellen Fenster erschienen, bzw. Popunder, die sich unsichtbar hinter dem Fenster befanden.[4]
Die Darstellung heutiger Browser hat sich gegenüber der Anfangszeit des Internets stark verändert. Anstelle einer Vielzahl von offenen Fenstern werden verschiedene Seiten innerhalb eines Fensters als Registerkarten (Tabs) angezeigt. Diese Tabs haben immer die Größe des Browserfensters.
Deshalb ist das klassische Popup mit vom Seitenautor festgelegter Größe, Position und Leistenkonfiguration mit tabbed browsing und dem Konzept moderner Browser nicht vereinbar. Die feste Größe, die unabhängig vom verfügbaren Viewport war, widerspricht dem Konzept des responsiven Designs.[5]
Im heutigen Web soll der Benutzer selber entscheiden, ob er Links im selben Tab, in einem neuen Tab oder einem neuen Fenster öffnet. Wenn er im selben Tab bleibt, ist der Zurück-Button die bequemste Möglichkeit zu einer Seite zurückzukehren.
Mehrere offene Fenster und Popup-Boxen verhindern dieses intuitive Bedienkonzept.
Heutzutage unterbinden moderne Browser oft das Öffnen neuer Fenster und machen so den Einsatz von Popups obsolet. Es gibt jedoch einige Alternativen, die ohne die Nachteile mehrerer Fenster auskommen.
Heutzutage werden Popups oft nicht mehr als neues Fenster, sondern als dokumentinterne Dialogfenster realisiert. Sie bleiben Bestandteil der Seite. Um eine Benutzerinteraktion zu betonen, öffnet sich ein modaler Dialog als Overlay in einer Ebene (layer), die über dem normalen Inhalt liegt. Dies blockiert in der Regel weitere Interaktion mit der dahinter liegenden Seite, und blendet sie auch visuell mehr oder weniger stark aus.
Quellen
- ↑ SELFHTML-Aktuell: Infobox von Jan Heinicke, 04.11.2002 (web.archive.org)
- ↑ Using abbr Element with title Attribute
- ↑ The abbr element (heydonworks.com) 7th August 2024
So much of my time as a web developer has been spent hiding things away from users so they can later reveal them and so much of that time I should have just left things as they were. If you are looking for User Experience advice from me, it is this: stop hiding things behind tabs and in popups or inside attributes. Stop making users go looking for things! - ↑ Nachteile von Popups (molily.de)
- ↑ SELF-Forum: Wenn Firefox -> mache PopUp größer! (status=no) 09.12.2005
