Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Registernavigationen mit ARIA veröffentlicht in 2015

Tabpanel mit einer Definitionsliste

Menü
Weiterleitung

In folgender Tabelle können Sie die URL-Umleitungen einsehen:

von Operationen
Keine URL-Weiterleitungen vorhanden.

Fügen Sie weitere Umleitungen hinzu

Author

Leer lassen für Gast.

Veröffentlichen

Links

Sie können das Beispiel mit der Linkliste Archiv: als .zip herunterladen. Erläuterungen zu barrierefreien Registernavigationen finden Sie im einleitenden Beitrag: Intern: Registernavigation für das Web.

Weitere Beispiele mit einem alternativen Aufbau im HTML stehen zur Verfügung:

Einschränkungen bei der Tastaturbedienung

Innerhalb von Registerseiten gibt es folgende Einschränkungen für die Tastaturbedienung:

Hinweise zum CSS

Zwei Angaben im CSS dürfen nicht vernachlässigt werden:

  1. Der Tastaturfokus muss sichtbar sein, was auch für den Intern: Kontrastmodus gilt. Für den Kontrastmodus wurde ein border-bottom für die Visualisierung in der Reiterleiste gewählt.
  2. Es gibt eine CSS-Eigenschaft, die in jedem Fall übernommen werden sollte: .registerseite[aria-hidden=true] {display:none;}.

Feinheiten mit ARIA

Einzelne Reiter sollten mit ihren zugehörigen Registerseiten verknüpft werden. Die ARIA-Spezifikation gibt 2 alternative Möglichkeiten vor, die beide berücksichtigt wurden:

HTML

<div class="register">
  <dl class="registerleiste">
    <dt id="beschriftung-id1" class="reiter">Beschriftung 1</dt>
    <dd id="id1" class="registerseite">
      <p>Inhalt für Registerseite 1.</p>
    </dd>
    <dt id="beschriftung-id2" class="reiter">Beschriftung 2</dt>
    <dd id="id2" class="registerseite">
      <p>Inhalt für Registerseite 2.</p>
    </dd>
    <dt id="beschriftung-id3" class="reiter">Beschriftung 3</dt>
    <dd id="id3" class="registerseite">
      <p>Inhalt für Registerseite 3.</p>
    </dd>
  </dl>
</div>

JavaScript (jQuery)

      function tabpanelInitialisieren( containerClass, tablistClass, tabClass, tabpanelClass, tabpanelLabelPrefix ) {
        tabNavigationErstellen( containerClass, tablistClass, tabClass, tabpanelClass, tabpanelLabelPrefix );
$( '.' + containerClass ) .append( '<br style="clear:left;" />');
        $( '.' + tablistClass ) .children( '[role="tab"]' ) .each( function() {
          var reiterID = $( this ) .attr( 'id' );
          reiterEvents( reiterID );
          registerseiteEvents( reiterID, tabpanelLabelPrefix );
        });
          reiterAktualisierung( $( '.' + tablistClass ) .children( '[role="tab"]' ) .first() .attr( 'id' ) );
      }
      function tabNavigationErstellen( containerClass, tablistClass, tabClass, tabpanelClass, tabpanelLabelPrefix ) {
        $( '.' + containerClass ) .each( function() {
          var $registerleiste = $( this ) .children( '.' + tablistClass ), $registerseiten = $( this ) .find( '.' + tabpanelClass );
          $registerseiten .each( function() {
            var $seite = $( this ), reiterID = tabpanelLabelPrefix + $seite .attr( 'id' );
            $seite .attr({
              'role': 'tabpanel',
              'aria-labelledby': reiterID
            })
.appendTo( $seite .closest( '.' + containerClass ) );
          });
$registerleiste .attr( 'role', 'tablist' )
          .children( '.' + tabClass ) .each( function() {
            var $reiter = $( this ), reiterID = $reiter .attr( 'id' ), seitenID = reiterID .replace( tabpanelLabelPrefix, '' );
            $reiter .attr({
              'role': 'tab',
              'aria-controls': seitenID
            })
          });
        })
      }
      function reiterAktualisierung( reiterID ) {
        var $reiter = $( '#' + reiterID ), $alleReiter = $reiter .closest( '[role="tablist"]' ) .children( '[role="tab"]' );
        $alleReiter .attr({
          'aria-selected': 'false',
          'tabindex': -1
        })
        .removeAttr( 'accesskey' );
        $reiter .attr({
  'aria-selected': 'true',
  'tabindex': 0,
  'accesskey': 5
        });
        $alleReiter .each(function() {
  var seitenID = $( this ) .attr( 'aria-controls' );
          if ( $( this ) .attr( 'aria-selected' ) == 'true' ) {
            $( '#' + seitenID ) .attr( 'aria-hidden', 'false' );
          }
          else {
            $( '#' + seitenID ) .attr( 'aria-hidden', 'true' );
          }
        })
      }
      function reiterEvents( reiterID ) {
        $( '#' + reiterID ) .click( function( event ) {
          reiterAktualisierung( reiterID );
        })
        .keydown( function( event ) {
          var rueckgabe = true, $aktuellerReiter = $( '#' + reiterID ), $alleReiter = $aktuellerReiter .closest( '[role="tablist"]' ) .children( '[role="tab"]' );
          if (event.keyCode == 13 || event.keyCode == 32 ) {
            $aktuellerReiter .click() .focus();
rueckgabe = false;
          }
          else if ( event.keyCode == 35 ) {
            $alleReiter .last() .focus();
rueckgabe = false;
          }
          else if ( event.keyCode == 36 ) {
            $alleReiter .first() .focus();
rueckgabe = false;
          }
          else if (event.keyCode == 37 || event.keyCode == 38 ) {
            if ( $aktuellerReiter .is ( $alleReiter .first() ) ) {
            $alleReiter .last() .focus();
            }
            else {
              $aktuellerReiter .prev() .focus();
            }
rueckgabe = false;
          }
          else if (event.keyCode == 39 || event.keyCode == 40 ) {
            if ( $aktuellerReiter .is ( $alleReiter .last() ) ) {
            $alleReiter .first() .focus();
            }
            else {
              $aktuellerReiter .next() .focus();
            }
rueckgabe = false;
          }
return rueckgabe;
        })
      }
      function registerseiteEvents( reiterID, tabpanelLabelPrefix ) {
        var rueckgabe = true, registerseiteID = reiterID .replace( tabpanelLabelPrefix, '' ), $registerseite = $( '#' + registerseiteID ), $aktuellerReiter = $( '#' + reiterID ), $alleReiter = $aktuellerReiter .closest( '[role="tablist"]' ) .children( '[role="tab"]' );
        $registerseite .keydown( function( event ) {
          if ((event.ctrlKey) && ((event.keyCode == 37 || event.keyCode == 38))) {
            $aktuellerReiter .focus();
rueckgabe = false;
          }
          else if (event.ctrlKey && event.keyCode == 33) {
            if ( $aktuellerReiter .is( $alleReiter .first() ) ) {
              $alleReiter .last() .click() .focus();
            }
            else {
              $aktuellerReiter .prev() .click() .focus();
            }
rueckgabe = false;
          }
          else if (event.ctrlKey && event.keyCode == 34) {
            if ( $aktuellerReiter .is( $alleReiter .last() ) ) {
              $alleReiter .first() .click() .focus();
            }
            else {
              $aktuellerReiter .next() .click() .focus();
            }
rueckgabe = false;
          }
return rueckgabe;
        })
      }

      tabpanelInitialisieren(         'register', 'registerleiste', 'reiter', 'registerseite', 'beschriftung-' );

CSS


.register {
  width: 100%;
  background: #fff;
}
.register [role=tablist] {
  display: block;
  width:20%;
  float:left;
}
#inhalt .register [role=tab] {
  border-color: #6fbed6;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  border-top: 1px;
  border-top-color:#6fbed6;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  margin:auto;
  display:block;
  color: #fff;
  background: #005f87;
  text-align:center;
  cursor: pointer;
  padding: 2px 10px;
  font-weight: bold;
  font-size: .9em;
}
.register [role=tab]:focus {
  outline: 2px dotted #000;
}
.register [role=tab]:hover,
.register [role=tab]:focus {
  padding-right: 8px;
  border-right: 2px dotted #005f87;
}
#inhalt .register [role=tab][aria-selected=true] {
  background: #ddf0fa !important;
  color:#000;
  cursor: default;
  padding-right: 7px;
  border-right: 3px solid #ddf0fa;
  font-size: 1em;
  border-top: 1px solid #6fbed6;
}
.register [role=tab][aria-selected=true]:hover {
  text-decoration:none;
}
.register [role=tabpanel] {
  width:70%;
  height:300px;
margin-top: 2em;
margin-left:0;
  padding: 0 0 0 1em;
  border-top-right-radius: 3px;
  border-width: 0 1px 1px;
  border-color: #005f87;
border-top:1px solid #6fbed6;
border-right:1px solid #6fbed6;
border-bottom:1px solid #6fbed6;
  background: #ddf0fa;
  color: #000;
  display:block;
  float:left;
}
.fixebreite {
width: 100px;
display block;
float:left;
}
.register [role=tabpanel][aria-hidden=true] {
  display: none;
  }