Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015

ARIA-Beispiel mit role="tooltip" und aria-describedby

Hinweise

Links

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;
}