Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015
Das title
-Attribut
Hinweise
- Die Verwendung des
title
-Attributs für zusätzliche Angaben eines Links ist nicht überall zugänglichkeitsunterstützend. Zum einen wird der Tooltip bei Fokus von Browsern nicht angezeigt und zum anderen übertragen Browser den Inhalt eines Tooltips nur teilweise an den Accessibility-Tree. - 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
- CSS-Beispiel für tastaturbedienbare Tooltips
- 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="tooltip-mit-css.html" title="Per Tastatur zugängliche Tooltips: CSS für die gleichwertige Darstellung von Tooltips bei Fokus und Mausberührung">
<img alt="" src="blaettern-vor.png">
weiter
</a>
</li>
<li id="demo-zurueck"></li>
</ul>
</nav>
JavaScript (jQuery)
/* Kein JavaScript */
CSS
#demo-vor a::before {
content: url('tooltip-nach-unten-rechts.png');
position:absolute;
left: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 (Aktuelle Seite)
- 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
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.