Techniken für WCAG 2.0

Zum Inhalt

-

C15: Benutzung von CSS, um die Darstellung eines Bestandteils der Benutzerschnittstelle zu verändern, wenn diese den Fokus erhält

Anwendbarkeit

CSS, HTML und XHTML

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Internet Explorer 6.0 und früher unter Windows unterstützt dynamische Pseudo-Klassen für Elemente mit Ausnahme von Hyperlinks nicht. Internet Explorer 7 unterstützt keine :focus styles bei Elementen mit Ausnahme von Hyperlinks. Fügen Sie die :active CSS -Pseudo-Klasse ein, um den gleichen Effekt wie :focus in Internet Explorer für (X)HTML-Links (ein Element) zu erreichen.

Firefox 1.5, Firefox 2.0 und SeaMonkey 1.1 für Windows unterstützen dynamische Pseudo-Klassen für Text-Eingabefelder, Text Areas, Radiobuttons, Kontrollkästchen, Select-Elemente, Absenden-/Zurücksetzen-Schaltflächen und Button-Elemente. Allerdings wird das Einstellen unterschiedlicher Farben oder Umrandungen, wenn ein Radiobutton oder ein Kontrollkästchen den Fokus erhält, nicht unterstützt.

Opera 9.02 für Windows unterstützt dynamische Pseudo-Klassen für Text-Eingabefelder, Text Areas, Radiobuttons, Kontrollkästchen, Select-Elemente und Absenden-/Zurücksetzen-Schaltflächen, nicht aber für Button-Elemente.

Firefox 2.0, Opera 9.02 und SeaMonkey 1.1 für Windows unterstützen außerdem benachbarte Sibling-Selektoren für Formularbeschriftungen. Firefox 1.5, Internet Explorer 6.0 und frühere Versionen für Windows unterstützen keine benachbarten Sibling-Selektoren für Formularbeschriftungen.

Beschreibung

Das Ziel dieser Technik ist es zu zeigen, wie die visuelle Erscheinung via Stylesheets verbessert werden kann, um eine visuelle Rückmeldung zu geben, wenn ein interaktives Element den Fokus hat oder wenn ein Benutzer mit einem Zeigewerkzeug darüber schwebt. Die Hervorhebung des Elements, das den Fokus hat oder über dem man schwebt, kann Informationen geben wie zum Beispiel die Tatsache, dass das Element interaktiv ist oder aber den Anwendungsbereich des interaktiven Elements.

Die Bereitstellung der visuellen Rückmeldung kann über mehr als einen Modus möglich sein. Normalerweise wird sie erzielt, indem man eine Maus benutzt, um über dem Element zu schweben oder eine Tastatur, um zu dem Element zu tabben.

Beispiele

Beispiel 1: Link-Elemente

In diesem Beispiel wurden Maus- und Tastatur-Fokus-Indikatoren auf die Link-Elemente angewendet. CSS wurde benutzt, um eine Hintergrundfarbe anzuwenden, wenn die Link-Elemente den Fokus erhalten.

Hier ist der anzuzeigende Inhalt:

Code-Beispiel:

			<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">Services</a></li>
  <li class="page_item"><a href="/projects">Projects</a></li>
  <li class="page_item"><a href="/demos">Demos</a></li>
  <li class="page_item"><a href="/about-us">About us</a></li>
  <li class="page_item"><a href="/contact-us">Contact us</a></li>
  <li class="page_item"><a href="/links">Links</a></li>
</ul>

Hier ist das CSS, das die Hintergrundfarbe für die oben genannten Elemente ändert, wenn die den Maus- oder Tastatur-Fokus erhalten:

Code-Beispiel:

			#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

Beispiel 2: Hervorhebung von Elementen, die den Fokus erhalten

In diesem Beispiel wird die :focus Pseudo-Klasse Benutzt, um die Formatierung, die auf Eingabefelder angewendet wird, wenn sie den Fokus erhalten, zu ändern, indem die Hintergrundfarbe geändert wird.

Code-Beispiel:

			<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; 
        color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6; 
        color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html>

            

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für jedes Element, das den Fokus erhalten kann:

  1. Schweben Sie über dem Element, indem Sie eine Maus benutzen.

  2. Prüfen Sie, ob sich die Farbe des Hintergrunds oder des Rahmens ändert.

  3. Bewegen Sie die Maus von dem Objekt weg bevor Sie den Tastatur-Fokus ausprobieren.

  4. Benutzen Sie eine Tastatur und gehen Sie per Tab zu dem Element.

  5. Prüfen Sie, ob sich die Farbe des Hintergrunds oder des Rahmens ändert.

  6. Prüfen sie, die Farbänderungen des Hintergrunds oder des Rahmens zurückgesetzt werden, wenn das Element den Fokus verliert.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.