Weiter zum Hauptteil der Seite
Inqbus Inclusive Design

Titel wird geladen.

Der Inhalt wurde leider zurück gezogen

Was der normale Nutzer sieht

Was der Screenreader sieht

Eine Landmark Form

Beispeilcode

Wie das HTML aussieht

<form>
    <label>
        <div>A Textline:</div> 
        <div class="hidden_help_text">My hidden description for Textline.</div> 
        <input type="text" placeholder="My Placeholder"></label> 
    <label>
        <div>A TextArea:</div>
        <div class="hidden_help_text">My hidden description for textarea.</div>
        <textarea placeholder="My Placeholder" aria-describedby="help"></textarea> 
        <div id="help" class="help">This is my long description.</div>
    </label> 
    <label>
        <div>A Password:</div>
        <div class="hidden_help_text">My hidden description for password.</div>
        <input type="password" placeholder="My Placeholder">
    </label> 
    <div>
        <button type="submit">Speichern</button>
    </div>
</form>

Wie das CSS aussieht

.hidden_help_text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}