Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015
CSS-Beispiel für in Screenreadern bedienbare Tooltips
Hinweise
- Die Tooltips funktionieren gleichermaßen bei Mausberührung und Tastaturfokus. Die Tooltips werden vollständig an den Accessibility-Tree übertragen und sind im Einklang mit den Web Content Accessibility Guidelines (WCAG) 2.0. Allerdings handelt es sich nicht um eine optimale Lösung, weil die Linktexte immer sehr lang sind und die Tooltips nicht — wie bei Mausberührung — ausschließlich bei Fokus verfügbar gemacht werden.
- 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.
Links
- Schritt für Schritt zu barrierefreien Tooltips
- Das
title
-Attribut - CSS-Beispiel für tastaturbedienbare Tooltips
- ARIA-Beispiel mit
role="tooltip"
undaria-describedby
HTML
<nav role="navigation" aria-label="Beispiel" class="tooltip">
<ul id="demo">
<li id="demo-vor" class="tooltip-widget">
<a href="tooltip-mit-aria.html">
<img alt="" src="blaettern-vor.png">
weiter
<span class="unsichtbar">Tooltip als Widget: Tastaturbedienbare und für die Lesbarkeit in Screenreadern optimierte Tooltips</span>
</a>
</li>
<li id="demo-zurueck" class="tooltip-widget">
<a href="tooltip-mit-css.html">
<img alt="" src="blaettern-zurueck.png">
zurück
<span class="unsichtbar">Per Tastatur zugängliche Tooltips: CSS für die gleichwertige Darstellung von Tooltips bei Fokus und Mausberührung</span>
</a>
</li>
</ul>
</nav>
JavaScript (jQuery)
/* Kein JavaScript */
CSS
.unsichtbar {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.tooltip a {
position:relative;
}
.tooltip a:focus span.unsichtbar,
.tooltip a:hover span.unsichtbar {
position:absolute;
top:3.1em;
width: 17.7em;
max-width: 17.7em;
display:block;
background-color: #FFF;
color: #484848;
border: 2px solid #c0c0c0;
line-height: 1.2em;
padding: 0.2em;
height: auto;
overflow: visible;
}
#demo-zurueck a:focus span.unsichtbar,
#demo-zurueck a:hover span.unsichtbar {
left:.9em;
z-index:100;
}
#demo-vor a:focus span.unsichtbar,
#demo-vor a:hover span.unsichtbar {
left:-0.3em;
z-index:100;
}
#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
Tooltips können mit CSS per Tastatur zugänglich gemacht werden.
- CSS-Beispiel für in Screenreadern bedienbare Tooltips
(Aktuelle Seite)
- 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.