Dostępność - ikonki w inputach zamiast label'a

Question

Witajcie!

Jeżeli chcemy, żeby strona/aplikacja była dostępna to m.in powinniśmy zawsze do każdego pola formularza dodawać label opisujący ten formularz. I trzymam się tego, ale tworząc pewną stronę zauważyłem, że dodanie takiego label'a zniszczy znacząco layout strony.
Więc pomyślałem, że zamiast niedostępnego placeholder'a po prostu umieszczę wokół inputa ikonkę, która by go opisywała. Wyglądałoby to mniej-więcej tak:

Oczywiście to nie koniec, bo zaraz potem "ostylowałbym" tą ikonkę używając ARIA i ta lupa miałaby bardziej ciemny kolor (bo wg mnie kolor lupy i tła na obrazku mają jednak trochę niski kontrast).

Czy takie podejście może zastąpić label opisujący pole? Albo czy przynajmniej taki sposób jest dostępny?

Bardzo proszę o odpowiedź.
Pozdrawiam!

Comments

w sumie wyszła odpowiedź na pytanie, więc przerzucam jako odpowiedź \/

Answer 1

moim zdaniem najlepszym rozwiązaniem byłoby stworzenie <label> z atrybutem 'for' i ostylowanie go absolutnie względem jakiegoś kontenera (np. DIV'a) dla <label> oraz <input>

Mówię o czymś takim:

https://codepen.io/emancypage/pen/NYeqgP

Tak na szybko. Oczywiście możesz poprawić funkcjonalność znikania tekstu z pomocą javascriptu na zasadzie, że gdy ktoś zacznie pisać to dopiero wtedy zacznie znikać label.

Chyba, że Ci chodzi o to, że kompletnie nie ma być napisu, to uważam takie podejście za słabe, mimo, że będzie ikonka lupki. Teraz jako placeholder masz Email, a lupka ma się nijak do emaila. Jeśli będzie ikonka koperty dla emaila to mogę to różnie odczytywać, np. czy chodzi tu o mój e-mail, czy może chodzi o e-mail na który ma się wysłać ta wiadomość itp. 

Lepiej chyba jak będzie ten tekst mimo wszystko.

Ostatecznie możesz dodać atrybut TITLE do ikonki i po najechaniu wyświetli Ci się ten właśnie title

Comments

Dziękuję za odpowiedź!

A jakby to tak połączyć? :) Czyli zrobić dostępną ikonkę i do tego w polu umieścić normalny tekst zamiast placeholder'a jak to opisałeś? Uważasz, że taki sposób byłby dostępny, czy jednak ta ikonka obniży dostępność?