Techniken für WCAG 2.0

Zum Inhalt

-

C9: Benutzung von CSS, um dekorative Bilder einzuschließen

Anwendbarkeit

Jede Technik, die CSS benutzen kann, um Bilder einzuschließen.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, einen Mechanismus zur Verfügung zu stellen, um rein dekorative Bilder und Bilder, die zur visuellen Formatierung benutzt werden, zum Webinhalt hinzuzufügen ohne dass zusätzliches Markup innerhalb des Inhalts erforderlich ist. Dies ermöglicht es assistierenden Techniken, den Nicht-text-Inhalt zu ignorieren. Einige Benutzeragenten können auf Wunsch des Benutzers hin CSS ignorieren oder ausschalten, so dass per CSS eingebundene Hintergrundbilder einfach „verschwinden“ und die Bildschirmeinstellungen, wie beispielsweise vergrößerte Schrift oder Einstellungen zum stärkeren Kontrast, nicht stören.

Hintergrundbilder können mit den folgenden CSS-Eigenschaften eingeschlossen werden:

Anmerkung: Diese Technik ist für Bilder, die Informationen vermitteln oder Funktionen bereitstellen oder für jegliche Bilder, die eine bestimmte Sinneserfahrung schaffen, nicht geeignet.

Beispiele

Beispiel 1: Hintergrundbild für eine HTML-Seite

Das Stylesheet für eine Webseite legt ein Hintergrundbild für die ganze Seite fest.

Code-Beispiel:

			…
  <style type="text/css">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
  </style>
</head>
<body>
...

Beispiel 2: Hintergrundbild mit CSS für Bild-Rollover

Das Stylesheet für eine Webseite benutzt die CSS background-Eigenschaft, um dekorative Rollover-Effekte zu erschaffen, wenn ein Benutzer mit dem Mauszeiger über einem Link schwebt.

Code-Beispiel:

			a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
  text-decoration: none;
}

Beispiel 3: Hintergrundbilder mit CSS, um abgerundete Ecken bei Registerkarten und anderen Elementen zu erstellen

Das Styleseet für eine Webseite benutzt die CSS background-Eigenschaft, um abgerundete Ecken an Elementen zu erstellen.

Code-Beispiel:

			…
  <style type="text/css">
    div#theComments { width:600px; }
    div.aComment { background: url('images/middle.gif') repeat-y left top; 
    margin:0 0 30px 0; }
    div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
    margin:0; padding:8px 16px; }
    div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
    margin:0; padding-top:30px; }
  </style>
</head>
<body>
  <div id="theComments">
    <div class="aComment">
      <blockquote>
        <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
      </blockquote>
      <div class="submitter">
        <cite><a href="http://example.com/">anonymous coward</a> from Elbonia</cite>
      </div>
    </div>
    <div class="aComment">
…
 </div>
</div>
…

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob es dekorative Bilder gibt

  2. Prüfen Sie, ob sie mit CSS eingebunden wurden

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.