Schritt für Schritt zu barrierefreien Tooltips 
veröffentlicht in 2015
ARIA-Beispiel mit role="tooltip" und aria-describedby
Hinweise
- Die Tooltips funktionieren gleichermaßen bei Mausberührung und Tastaturfokus. Die Tooltips werden vollständig an den Accessibility-Tree übertragen, weil sie als Hilfe-Text mit dem Link verknüpft sind. Sie werden außerdem
nur bei Fokus zugänglich gemacht. - 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. Dennoch wird durch den Zusatztext, der durch
aria-describedbyverknüpft wird, deutlich, dass der Text ergänzend zum Linktext verfügbar gemacht wird. - Um die redundante Ausgabe der Tooltip-Texte in Screenreadern zu vermeiden, ist die Zuweisung des
aria-hidden-Attributs erforderlich. - Die Einblendung des Tooltips am Bildschirm wird über das
aria-hidden-Attribut und ein entsprechender CSS-Selektor gesteuert. - Die Rolle des Tooltip-Textes wird derzeit weder von Firefox noch von Google Chrome noch von Internet Explorer an den Accessibility-Tree übertragen. Das
role-Attribut wird lediglich als CSS-Selektor genutzt.
Links
- Schritt für Schritt zu barrierefreien Tooltips
- Das
title-Attribut - CSS-Beispiel für tastaturbedienbare Tooltips
- CSS-Beispiel für in Screenreadern bedienbare Tooltips
ARIA-Beispiel herunterladen
HTML
<nav role="navigation" aria-label="Beispiel" class="tooltip">
<ul id="demo">
<li id="demo-vor"> </li>
<li id="demo-zurueck">
<a href="" aria-describedby="tooltip2">
<img alt="" src="blaettern-zurueck.png">
zurück
</a>
<span role="tooltip" class="tooltip-text" id="tooltip2"></span>
</li>
</ul>
</nav>
JavaScript (jQuery)
function tooltipsInitialisieren( widgetClass ) {
tooltipsUeberpruefen();
elementeUeberpruefen( widgetClass );
}
function tooltipsUeberpruefen() {
var $tooltips = $( '[role="tooltip"]' );
$tooltips .attr( 'aria-hidden', 'true' );
$tooltips .each( function() {
$tooltip = $( this );
if ( $tooltip .attr( 'data-tooltip' ) ) {
$tooltip .text( $tooltip .attr( 'data-tooltip' ) );
}
})
}
function elementeUeberpruefen( widgetClass ) {
var $widgets = $( '.' + widgetClass ), $aktiveElemente = $widgets .find( '[aria-describedby]' ), $rollenElemente = $( 'a[href], area[href], button:not([disabled]), embed, iframe, input:not([disabled]), object, select:not([disabled]), textarea:not([disabled]), *[contenteditable]' );
$aktiveElemente = $aktiveElemente .add( $widgets ) .filter( '[aria-describedby]' );
$aktiveElemente .each( function() {
var $element = $( this );
if ( !$element .is( $rollenElemente ) ) {
$element .attr( 'data-role', 'link' )
}
})
tooltipEvents( $aktiveElemente );
}
function tooltipEvents( $aktiveElemente ) {
$aktiveElemente .each( function() {
var $element = $( this ), tooltipID = $( this ) .attr( 'aria-describedby' ), maus = false, fokus = false, abbrechen = false;
$element .focus( function( event ) {
if ( $element .attr( 'data-role' ) ) {
/* $element .attr( 'role', $element .attr( 'data-role' ) ); */
}
fokus = true;
tooltipEinblenden( tooltipID );
event .stopPropagation();
})
.blur ( function( event ) {
if ( $element .attr( 'data-role' ) ) {
/* $element .removeAttr( 'role' ); */
}
fokus = false;
abbrechen = false;
if (maus === false) {
tooltipAusblenden( tooltipID );
}
event .stopPropagation();
})
.keydown( function( event ) {
if (event.keyCode === 27) {
Abbrechen = true;
tooltipAusblenden( tooltipID );
event .stopPropagation();
}
})
.mouseenter( function( event ) {
maus = true;
tooltipEinblenden( tooltipID );
event .stopPropagation();
})
.mouseleave( function( event ) {
maus = false;
if ( fokus === false || abbrechen === true ) {
tooltipAusblenden( tooltipID );
}
event .stopPropagation();
})
})
}
function tooltipEinblenden( tooltipID ) {
$( '#' + tooltipID ) .attr( 'aria-hidden', 'false' );
}
function tooltipAusblenden( tooltipID ) {
$( '#' + tooltipID ) .attr( 'aria-hidden', 'true' );
}
tooltipsInitialisieren( 'tooltip' );
CSS
/* Minimum für Tooltip */
.tooltip a, a.tooltip, .tooltip input, .tooltip textarea {
position:relative;
}
.tooltip span[role=tooltip], .tooltip~span[role=tooltip] {
position:absolute;
display:block;
background:#fff;
color:#484848;
border:2px solid #c0c0c0;
}
.tooltip span[role=tooltip][aria-hidden=true], .tooltip~span[role=tooltip][aria-hidden=true] {
display:none;
}
/* 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;
}