Widzę w Internecie dwa sposoby kodowania pól wyboru, który jest poprawny?

  1. <input id="a" type="checkbox"/><label for="a">checkbox</label>
  2. <label for="b"><input id="b" type="checkbox">checkbox</label>

Oba działają dobrze w Chrome, czy jedna przeglądarka jest więcej niż druga? Czy jest jakaś różnica?

PRÓBNY

11
qwertymk 4 marzec 2012, 17:23

2 odpowiedzi

Najlepsza odpowiedź

Oba są doskonale poprawne, prawidłowe i dostępne, o ile kojarzysz input i label z atrybutami for/id, nawet jeśli input jest bezpośrednio w etykiecie` (zobacz najlepsze odpowiedź na pytanie połączone przez @AramKocharyan i mój komentarz tam)

Czytniki ekranu będą czytać powiązaną zawartość etykiety, gdy użytkownik skupi się na elemencie formularza (wejście, zaznaczenie lub obszar tekstowy). Kiedy są w formularzu, są szanse, że będą czytać tylko etykiety, legendy i przyciski (mam na myśli reset, prześlij, obraz lub przycisk), ponieważ JAWS i tym podobne mają specjalne tryby; z grubsza celem jest wypełnienie formularza, a nie czytanie treści, jak w przypadku reszty strony internetowej.

Często znajdziesz formularze z label po lewej stronie, input pośrodku i trochę pomocy po prawej:

        E-mail [                 ] ex: johndoe@domain.com
  • Z input poza elementem label, wskazówka będzie zakodowana na przykład za pomocą span. Nie usłyszą go czytniki ekranu, ponieważ nie jest częścią przycisku label ani przycisku przesyłania.
  • Mając input wewnątrz elementu label, możesz umieścić zarówno etykietę, jak i wskazówkę w elemencie label:

    <label for="email">
        <strong>E-mail</strong>
        <input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
        <span>ex: johndoe@domain.com</span>
    </label>
    

W ten sposób podpowiedź zostanie odczytana użytkownikowi AT wraz z prawdziwą etykietą.
Uwaga: oczywiście zmienisz styl strong i span, powiedz odp. pogrubienie wyrównane do prawej i kursywa wyrównane do lewej. span nie jest konieczny do stylizacji (wystarczy wystylizować label i anulować połowę reguł dla strong), ale jest to prostsze (prostsze?) :)

Przydaje się równie dobrze w przypadku błędów, jak i podpowiedzi:

    <p class="error>
        <label for="email">
            <strong>E-mail</strong>
            <input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
            <span>ERROR: not a valid e-mail address. Example of a valid e-mail: johndoe@domain.com</span>
        </label>
    </p>


    .error strong {
      color: red;
      font-weight: bold;
    }

    .error input {
      border: 1px solid red;
    }

    .error span {
      color: red;
    }

W ten sposób błąd jest odczytywany przez czytniki ekranu (a kolor, którego nie widzą lub ledwo widzą, nie jest jedynym sposobem przekazania im informacji za pomocą tego tekstu).

9
FelipeAls 4 marzec 2012, 18:21

Albo jest słuszne.

Etykiety mogą zawierać elementy wbudowane (z wyjątkiem innych etykiet). Elementy wejściowe są elementami wbudowanymi.

Imho poniżej: W każdym razie nie umieszczałbym pola wyboru wewnątrz etykiety, ponieważ wydaje mi się to trochę dziwne. Etykiety służą do oznaczania pól wejściowych, przechowywania opisu, a nie ich zawierania.

1
m02ph3u5 4 marzec 2012, 17:30