Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015
CSS-Beispiel für tastaturbedienbare Tooltips
Hinweise
- Die Tooltips funktionieren gleichermaßen bei Mausberührung und Tastaturfokus.
- Dass ein Tooltip vorhanden ist, wird durch ein Icon signalisiert. Solche Visualisierungen sind eigentlich eine Aufgabe des Browsers. In diesem Beispiel ist diese Information für Screenreader nicht zugänglich, weil sie mit CSS erzeugt wird.
- Auch die Tooltips werden per CSS als generated content erzeugt und sind nicht überall zugänglichkeitsunterstützend. Die Übertragung an den Accessibility-Tree variiert von Browser zu Browser und die "Abholung" durch Screenreader ist auch unterschiedlich. Auf Windows wurden Internet Explorer 11, Google Chrome und Firefox in Kombination mit den Screenreadern JAWS 15 und NVDA angeschaut. Google Chrome und Firefox übertragen mittels der Accessibility-API die vorgesehenen Informationen an den Accessibility Tree, aber nur NVDA in Verbindung mit Firefox lieferte das erwartete Ergebnis.
Links
- Schritt für Schritt zu barrierefreien Tooltips
- Das
title
-Attribut - CSS-Beispiel für in Screenreadern bedienbare Tooltips
- ARIA-Beispiel mit
role="tooltip"
undaria-describedby
HTML
<nav role="navigation" aria-label="Beispiel" class="tooltip">
<ul id="demo">
<li id="demo-vor">
<a href="linktext.html" data-title="Tooltip im Fließtext: Text eines Tooltips als Teil des Linktextes ausspielen">
<img alt="" src="blaettern-vor.png">
weiter
</a>
</li>
<li id="demo-zurueck">
<a href="title-attribut.html" data-title="Das <code>title</code>-Attribut: Standardmäßige Darstellung eines Tooltips mit HTML">
<img alt="" src="blaettern-zurueck.png">
zurück
</a>
</li>
</ul>
</nav>
JavaScript (jQuery)
/* Kein JavaScript */
CSS
.tooltip A[data-title] {
position:relative;
}
.tooltip a[data-title]:after {
position:absolute;
top: 3.1em;
background-color: #fff;
border: 2px solid #c0c0c0;
padding: 0.2em;
line-height: 1.2em;
content: attr(data-title);
display: none;
width: 17.7em;
color: #484848;
}
#demo-vor a[data-title]:after {
left:-0.3em;
z-index:100;
}
#demo-zurueck a[data-title]:after {
left:.9em;
z-index:100;
}
.tooltip a[data-title]:focus:after,
.tooltip a[data-title]:hover:after {
display: block;
}
#demo-vor a::before {
content: url('tooltip-nach-unten-rechts.png');
position:absolute;
left:4em;
}
#demo-zurueck a::before {
content: url('tooltip-nach-unten-links.png');
position:absolute;
right:4em;
}
/* Für die Blätternavigation */
#demo {
clear: both;
margin: 0 0 1em 0 !important; /* Konflikt mit all. CSS */
padding: 0;
font-size: 1em;
font-family: verdana, arial, helvetica, sans-serif;
display: block;
min-height:2.8em;
}
#demo li {
padding:0;
float: right;
position:relative;
list-style-type: none !important; /* Konflikt mit allg. CSS */
width:20em;
min-height:2.8em;
margin:0 0.35em;
}
#demo a {
border-color: #6fbed6;
border-style:solid;
text-decoration: underline;
color: #484848;
max-width: 400px;
width: 17.7em;
display: block;
line-height: 1.125em;
min-height: 2em;
}
#demo-vor a{
border-width: 1px 0 1px 3px;
padding: 0.85em 1em 0.2em 0.4em;
}
#demo-zurueck a{
border-width: 1px 3px 1px 0;
padding: 0.85em 0.4em 0.2em 1em;
text-align: right;
}
#demo-vor a::before {
content: url('tooltip-nach-unten-rechts.png');
position:absolute;
left:4em;
}
#demo-zurueck a::before {
content: url('tooltip-nach-unten-links.png');
position:absolute;
right:4em;
}
#demo img {
position:absolute;
top:0.6em;
border: 0;
}
#demo-vor img{
right: 0px;
}
#demo-zurueck img{
left: 0px;
}
#demo span[role=tooltip] {
top:3.2em;
left:0;
width:auto;
max-width: 17.7em;
background-color: #FFF;
color: #484848;
border: 2px solid #c0c0c0;
line-height: 1.2em;
padding: 0.2em;
}
#demo-zurueck span[role=tooltip] {
left:1em;
}
Der Beitrag Schritt für Schritt zu barrierefreien Tooltips besteht aus folgenden einzelnen Webseiten:
- Das
title
-Attribut Das
title
-Attribut ist per Tastatur meist nicht barrierefrei. Tooltips müssen daher auf anderer Weis Aufbereitet werden.- CSS-Beispiel für tastaturbedienbare Tooltips
(Aktuelle Seite)
- CSS-Beispiel für in Screenreadern bedienbare Tooltips
Ein Tooltip kann erst dann barrierefrei werden, wenn der Text des Tooltips zuvor im Fließtext untergebracht wird.
- ARIA-Beispiel mit
role="tooltip"
undaria-describedby
Tooltips — auch wenn sie bereits zugänglich sind — sollten für die optimale Nutzung in Screenreadern mit zwei ARIA-Attributen ergänzt werden.
- ARIA-Tooltips für Formulareelemente
Tooltips für Formularelemente können mit ARIA barrierefrei umgesetzt werden.
- ARIA-Tooltips für Links
Links mit Tooltips können statt mit dem
title
-Attribut auch mit ARIA-Attributen barrierefrei gestaltet werden.