CSS Ecken abrunden

[Gunnar Bittersmann]

@@JJ

Stimmt, da bleibe ich lieber vorsichtig, daher habe ich zusätzlich nun die Grafik als Button definiert.

label in button zu packen ist wohl keine so gute Idee. Was soll da beim Click passieren? Beim Click aufs Label wird das zugehörige Eingabefeld fokussiert; beim Click auf den Button das Formular abgeschickt.

Überhaupt macht ein label-Element noch keine zugängliche Beschriftung, wenn darin kein Text ist.

(Als letzte Möglichkeit mag eine assisitve Technologie das placeholder-Attribut als Beschriftung heranziehen. Verlassen würde ich mich darauf nicht.)

Du willst sowas

<form role="search" …>
  <button>
    <svg aria-hidden="true">…</svg>
    <span class="visually-hidden">Suche</span>
  </button>
  <label for="search" class="visually-hidden">Suchbegriffe</label>
  <input id="search" …/>
</form>

mit der CSS-Regel für .visually-hidden.

Oder doch nicht. Der Button vor dem Eingabefeld mutet seltsam an; der ist dahinter besser aufgehoben. Man kann das Lupen-Icon ja mit CSS links positionieren.

🖖 Живіть довго і процвітайте