:optional

Diese Pseudoklasse ist nützlich, um Felder zu stylen, die nicht erforderlich sind, um ein Formular einzureichen.

Wenn ein Formular optionale <input>s enthält, sollten erforderliche Eingaben mit dem required-Attribut gekennzeichnet werden. Dies stellt sicher, dass Personen, die mit Hilfstechnologien wie einem Bildschirmleser navigieren, verstehen können, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Formularübermittlung sicherzustellen.

Erforderliche Eingaben sollten auch visuell gekennzeichnet werden, wobei eine Darstellungsweise verwendet werden sollte, die sich nicht nur auf Farbe zur Bedeutungsvermittlung verlässt. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

• MDN Verständnis von WCAG, Richtlinie 3.3 Erläuterungen
• Verständnis vom Erfolgskriterium 3.3.2 | W3C Verständnis von WCAG 2.0

HTML

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

Ergebnis

• Andere validierungsbezogene Pseudoklassen: :required, :invalid, :valid
• Formulardatenauswertung