Czy można ukryc tag <label></label>?

pytanie zadane 23 października 2016 w HTML i CSS przez Taki Tam Początkujący (270 p.)
otwarte ponownie 23 października 2016 przez Arkadiusz Waluk

Witam, wiadomi mi, że tag <label></label> jest koniecznością przy formularzach, jednak spotkałem się ze stronami, które w kodzie źródłowym posiadają tag <label></label>, jednak jest on całkowicie niewidoczny na stronie.

Czy zatem ten tag można ukryć, za pomocna np display: none;, bo ważny jest tylko jego zapis w kodzie, czy jednak powinien on być pokazany dla przeciętnego Kowalskiego, przeglądającego stronę?

Pozdrawiam

3 odpowiedzi

odpowiedź 23 października 2016 przez IBB Gaduła (3,020 p.)
wybrane 23 października 2016 przez Taki Tam

Najlepsza

Nie, nie używaj właściwości "display: none" ani atrybutu "hidden" do ukrycia etykiet pól.

Jeśli jesteś pewien, że widzący użytkownicy zrozumieją przeznaczenie pola (to, że jest to oczywiste dla Ciebie niekoniecznie znaczy, że będzie też dla innych) i chcesz ją ukryć, musisz się upewnić, że nadal będzie ona dostępna dla technologii asystujących, takich jak czytniki ekranu czy programy do rozpoznawania mowy.

Możesz np. zamieścić ją poza ekranem:

.visually-hidden { 
    left: -999em; 
    position: absolute;
}

albo zmniejszyć jej wymiary do zera - w Bootstrap jest to np. zrobione przy użyciu następującego CSS:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

komentarz 23 października 2016 przez Taki Tam Początkujący (270 p.)

Rozumiem, dziekuje

komentarz 23 października 2016 przez Comandeer Guru (607,980 p.)

Co do .sr-only warto zauważyć jedną rzecz: bez odpowiedniego white-space tworzy tekst trudny w zrozumieniu.

komentarz 24 października 2016 przez IBB Gaduła (3,020 p.)

Wygląda to na ten sam problem, który był kiedyś omawiany w Drupalowej społeczności (w Drupal w pewnym momencie do klasy będącej odpowiednikiem bootstrapowego "sr-only" dodano "width: 1px"). Jeśli tak to jest to dość niszowy problem - występuje wyłącznie w Firefox, a i to w określonej sytuacji (gdy ukrywany element posiada albo dziedziczy właściwość "word-wrap: break-word"). Stąd w Drupal dodano później "word-wrap: normal" do ukrywanych elementów. Widać Bootstrap jest w tyle.

komentarz 24 października 2016 przez Comandeer Guru (607,980 p.)

Nie tylko BS… H5BP 4 dni temu było niedostępne. A11yProject.com wciąż jest.

odpowiedź 23 października 2016 przez niezalogowany

Czy zatem ten tag można ukryć, za pomocna np display: none;

Nie. display: none; całkowicie wyklucza dany fragment treści. Dla technologi asystujących należy zapewnić odpowiednie ukrycie elementów.

komentarz 23 października 2016 przez Taki Tam Początkujący (270 p.)

Dziekuje

odpowiedź 23 października 2016 przez HaKIM Szeryf (87,590 p.)
edycja 23 października 2016 przez HaKIM

<form>
    <input type="text" name="search" aria-label="Search">
    <button type="submit">Search</button>
</form>

I z głowy.

https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-label

Pokaż 7 poprzednich komentarzy

komentarz 23 października 2016 przez niezalogowany

bo np. CSS się nie doczyta

Wtedy przeglądarka zapewnia widoczny placeholder

czy mamy lynksa

Aż zainstalowałem, bo nie wierzyłem, że może być aż tak upośledzony względem inputów - a jednak może. Doprawdy nie rozumiem, dlaczego nie ma zaimplementowanego prostego podglądu tej informacji. Inputy bez label to przecież codzienność.

komentarz 23 października 2016 przez Comandeer Guru (607,980 p.)

Wtedy przeglądarka zapewnia widoczny placeholder

A od kiedy [aria-label] generuje taki placeholder? Zresztą np. nawigacja klawiaturą i tak sprawia, że [placeholder] nie jest widoczny w polu, które ma akurat focus.

Aż zainstalowałem, bo nie wierzyłem, że może być aż tak upośledzony względem inputów - a jednak może.

Upośledzony = zgodny ze standardem? ;)

komentarz 23 października 2016 przez niezalogowany

A od kiedy [aria-label] generuje taki placeholder?

Wychodzę z założenia, że jeżeli autor postanowił ukryć label, opiera się na placeholderach

Zresztą np. nawigacja klawiaturą i tak sprawia, że [placeholder] nie jest widoczny w polu, które ma akurat focus.

Edge 14 - fałsz
Firefox 49 - fałsz
Chrome 54 - fałsz
Opera 40 - fałsz
Safari od conajmniej 6 do 10 - fałsz

Zostaje nieszczęsny IE <- jednak nadal powyższa sytuacja nie uniemożliwia poprawnego wypełnienia formularza. (już pomijając fakt, że prawdopodobieństwo całego zdarzenia to praktycznie 0)

Upośledzony = zgodny ze standardem? ;)

Co komu po standardach, kiedy przeglądarka nie udostępnia potrzebnych funkcji? Oczekuję od oprogramowania, że będzie idioto-odporne. Swoją drogą nie wiem w jakich standardach masz zapisane, w jaki sposób przeglądarka tekstowa powinna interpretować inputy.

komentarz 23 października 2016 przez Comandeer Guru (607,980 p.)

Wychodzę z założenia, że jeżeli autor postanowił ukryć label, opiera się na placeholderach

A tymczasem w omawianym przykładzie… :P

Z tym focusem mnie zdziwiłeś – widać wszystkie wyrównały do zachowania Chrome, które było krytykowane.

jednak nadal powyższa sytuacja nie uniemożliwia poprawnego wypełnienia formularza

Ale niesamowicie utrudnia, gdy jest se jakieś pole i nie wiesz od czego.

Co komu po standardach, kiedy przeglądarka nie udostępnia potrzebnych funkcji?

Żadna nie wyświetla [aria-label], więc nie wiem co się biednego Lynksa czepiasz.

Swoją drogą nie wiem w jakich standardach masz zapisane, w jaki sposób przeglądarka tekstowa powinna interpretować inputy.

W żadnym, ale w standardzie HTML5 są opisane ogólne zasady interpretowania pól formularzy.

A jeśli chcesz kolejne argumenty na rzecz label:

Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

Źródło: https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

komentarz 23 października 2016 przez niezalogowany

A tymczasem w omawianym przykładzie… :P

Jeśli ktoś implementuje sr-only label / aria-label, zapewne dlatego, że ma właśnie tylko placeholdery w layoucie - innego wyjścia nie widzę - stąd to założenie.