Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

CSS-Beispiel für in Screenreadern bedienbare Tooltips

Hinweise

Links

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