Pokorny <label>. To jest powszechne. To proste. to jest podstawowe. To przyziemne. Na pierwszy rzut oka nie ma w nim nic specjalnego. Często używany jako zwykły cel CSS do stylizowania niektórych tekstów. Co więcej można wiedzieć? Uderz tego małego gościa nad swoim polem formularza, a wrócimy do JavaScript dla CSS, aby nasza strona była dynamiczna i ekscytująca, prawda?

Może nie.

Preambuła

Założę się o poręczną sumę, że prawie każdy 11-letni profesjonalista z dostępem do serwera HTTP napisał o etykietach. Łatwo byłoby nazwać to pobiciem martwego konia, ale według raportu WebAIM Million Report z 2023 r . spośród miliona najpopularniejszych stron głównych w Internecie 96,3% z nich miało co najmniej jeden wykryty błąd dostępności, a z tych stron 45,9% zawierały błędy w etykietach formularzy. To stawia go na czwartym miejscu wśród najczęstszych problemów z dostępnością po niewystarczającym kontraście kolorów, obrazach bez tekstu alternatywnego i linkach bez dostępnej nazwy. Obie liczby wykazują tendencję spadkową w ciągu ostatnich 5 lat, ale przed nimi jeszcze dużo pracy, aby je obniżyć. Jeśli ten post sprawi, że chociaż jedna osoba pomyśli „Wow, nie wiedziałem o tym”, uznam to za porywający sukces

Cel etykiety

Kiedy myślimy o etykiecie w ramce aplikacji internetowej, prawdopodobnie wyobrażamy sobie formularz przylegający do elementów takich jak pola tekstowe, przyciski radiowe, pola wyboru i tak dalej. Przekazują oczekiwane wartości, takie jak nazwiska i daty, lub to, co reprezentują inne wybory. Wizualnie to po prostu ma sens, ale gra to coś więcej.

Dlaczego jest to ważne

Kiedy odrzucamy monolityczny termin „użytkownicy”, musimy zrozumieć, że użytkownicy to ludzie. Ludzie są wyjątkowi i złożeni, przez co mogą się zagubić w szybko zmieniającym się świecie tworzenia oprogramowania. Projektowanie z myślą o integracji wymaga zmiany mentalnej; kiedy wyobrażamy sobie tylko „przeciętnego” użytkownika jako nasz cel, ryzykujemy wykluczeniem wielu ludzi z naszych aplikacji. Osoby niepełnosprawne ponoszą ciężar tego wykluczenia, ale tak nie musi być.

I dobra wiadomość: łatwo dostępne etykiety. Twierdzę, że są to jedne z najłatwiejszych „wygranych” ułatwień dostępu, jakie zespół może osiągnąć. Zanurzmy się i dowiedzmy, co sprawia, że ​​etykieta jest dostępna i, co równie ważne, użyteczna.

Uczyńmy to dostępnym

Wyobraź sobie dwie osoby w różnych sytuacjach.

Jeremi ma 41 lat. Pracuje jako doradca finansowy w lokalnym banku. Uwielbia pływać, wędrować i biwakować z przyjaciółmi i rodziną. Jeremy jest również niewidomy w wyniku komplikacji po operacji mózgu w wieku 30 lat. Jeremy używa czytnika ekranu do interakcji z technologią zarówno w ramach swojej pracy, jak iw czasie wolnym.

Violetta ma 73 lata. Przeszła na emeryturę po udanej karierze prawniczej. Na emeryturze podróżuje po świecie, odwiedzając zabytki i rodzinne miasta swoich rodziców, którzy byli imigrantami z Europy Wschodniej. Niedawno przeprowadziła się bliżej wnuków. Violet ma artretyzm w obu dłoniach. Woli używać oprogramowania do rozpoznawania mowy do interakcji z komputerem i telefonem, aby uniknąć niepotrzebnego bólu.

Zarówno Jeremy, jak i Violet próbują korzystać z tej samej strony internetowej: portalu pacjenta na stronie internetowej ich dostawcy usług medycznych, który oferuje możliwość płacenia rachunków medycznych, aktualizowania danych osobowych, umawiania się na wizyty i tak dalej.

Problem Jeremy'ego:

„Muszę użyć karty kredytowej, aby zapłacić rachunek za usługi medyczne, ale nie wiem, jakie pola znajdują się na stronie płatności”.

Jeśli etykiety nie są poprawnie powiązane z elementami formularza, czytnik ekranu odczyta tylko typ elementu, a nie tekst znajdujący się w pobliżu.

Problem Violetty:

„Muszę zmienić adres w moim pliku, ale bez względu na to, co powiem komputerowi, przycisk Zapisz nie kliknie”.

Podobnie jak w powyższym przykładzie czytnika ekranu, oprogramowanie do rozpoznawania mowy również opiera się na odpowiednim powiązaniu etykiet, aby nawigować i aktywować pola i przyciski formularzy.

Zgadza się. Oba te problemy są spowodowane nieodpowiednio oznakowanymi elementami formularza. Przyjrzyjmy się kodowi, który zazwyczaj generuje takie wyniki.

Problem Jeremy'ego w kodzie

Przyjrzyjmy się formularzowi płatności.:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Atrybut for_

Najprostszym sposobem jest użycie foratrybutu. Jest to rodzimy atrybut elementu <label>. Jego oczekiwaną wartością jest idatrybut docelowego elementu formularza. W naszym przykładzie mamy trzy wejścia z ids: card-number, expiration-date, i security-code. Możemy dodać foratrybut do etykiet i ustawić ich wartość na odpowiedni identyfikator wejściowy. Zobaczmy, jak to wygląda.

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

O czym należy pamiętać

• Atrybut formusi znajdować się na <label>elemencie, a nie na wejściu.
• Element wejściowy musi mieć idatrybut. Może <label>nadal mieć swój własny idatrybut, ale nie ma to tutaj znaczenia.
• Relacja między etykietą a danymi wejściowymi jest typu jeden do jednego.

Za pomocą Arii

ARIA to potężny zestaw atrybutów, które można dodawać do elementów, aby informować technologie wspomagające o nazwie, stanie i roli elementu. W naszym przypadku możemy użyć atrybutu aria-labelledby, aby powiązać etykietę z danymi wejściowymi. Zobaczmy, jak to działa.

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Teraz, gdy rozwiązaliśmy problem Jeremy'ego, sprawdźmy, co jest nie tak ze stroną używaną przez Violettę.

Problem Violet w kodzie

Strona, z której korzysta Violet, zawiera pola formularza dla jej informacji kontaktowych oraz przyciski na pasku narzędzi do wykonywania funkcji zapisywania i anulowania. Te dwa przyciski są reprezentowane tylko przez ikony, bez widocznej etykiety tekstowej. To samo w sobie można poprawić, ale w prawdziwym świecie jest to powszechna sytuacja.

Oto nasz kod z problemem.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

Korzystanie z ARIA (ponownie)

Atrybut aria-labelmoże służyć do bezpośredniego nadania dostępnej nazwy większości elementów HTML. Jego wartością jest tekst wystawiony na działanie technologii wspomagających. Powinien to być język ludzki, ponieważ czytniki ekranu będą ogłaszać tekst aria-label, a użytkownicy oprogramowania do rozpoznawania głosu będą go używać do interakcji z elementem.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

Istnieje wiele niuansów związanych z aria-label, ale zasługują one na osobny artykuł. Dla naszego prostego przykładu to wystarczy. Uważaj tylko, aby nie nadużywać aria-label when nazwy or aria-labelledby would do the same job.

Jesteśmy teraz dostępni!

Dzięki tym prostym zmianom zarówno Jeremy, jak i Violet mogą wykonać zadanie, które wyznaczyli na swoich stronach. Korzystając z tych technik, zapewniliśmy, że elementy formularza są odpowiednio identyfikowane przez technologie wspomagające, a informacje są przekazywane osobom korzystającym z nich. Naklej na niego naklejkę Accessible™ i skończ z tym.

… Ale możemy zrobić lepiej

Nigdy nie powinniśmy zatrzymywać się w punkcie, w którym po prostu zaznaczamy pole wyboru obok kryteriów sukcesu WCAG 2.1. WCAG ustanawia punkt odniesienia, aby usuwać bariery dla osób niepełnosprawnych podczas korzystania z sieci, ale zawsze powinniśmy dążyć do czegoś lepszego niż tylko „możliwość użycia” i dążyć do „przyjemności użytkowania”. Dostępność i użyteczność idą ręka w rękę i istnieje bardzo prosta technika, którą możemy wdrożyć, aby radykalnie poprawić wrażenia użytkowników wypełniających formularze.

Nasza nowa persona

Wyobraźmy sobie kogoś, o kim możesz nie pomyśleć od razu, gdy usłyszysz słowo „dostępność”.

Mia jest studentką pierwszego roku na University of Central Florida, gdzie studiuje astrofizykę. Jest bardzo bystrą uczennicą i pilną pracownicą. Jej dbałość o szczegóły i wyczucie mody sprawiają, że jest ekspertem, gdy któryś z jej przyjaciół aktualizuje swoją garderobę. Wprowadzając się do swojego akademika i rozpakowując pudełko, przypadkowo przecięła palec wskazujący swojej dominującej ręki nożem do pudełek.

Niektóre niepełnosprawności są tymczasowe. Nawet niewielka kontuzja może zmniejszyć czyjś zakres ruchu, znacznie utrudniając zadania, które brał za pewnik. Z skaleczonym palcem w bandażu z gazy, Mia musi używać telefonu w sposób, do którego nie jest przyzwyczajona.

Problem Mii

„Muszę wprowadzić informacje o moim stanie zdrowia na stronie tego lekarza, ale ciągle zaznaczam niewłaściwe pola wyboru, ponieważ mój telefon jest niewygodny w użyciu!”

W najlepszym przypadku interakcja z polami, takimi jak pola wyboru i przyciski opcji na telefonach, może być wyzwaniem, ale nawet przy częstym urazie może szybko przerodzić się w frustrację. Mia musi zaznaczyć pola obok leków na tarczycę, które przyjmuje, aby sprawdzić stan swojego zdrowia, ale robienie tego drugą ręką lub innym palcem okazuje się trudne ze względu na mniejszy rozmiar elementu.

Problem Mii w kodzie

Spójrzmy na pola wyboru. Na pierwszy rzut oka wydają się przystępni, z odpowiednimi skojarzeniami z etykietami. Ale przyjrzyjmy się bliżej.

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

Istnieje bardzo prosta technika, którą możemy zastosować, gdy kontrolki formularza mają widoczne etykiety, aby zwiększyć ich obszar kliknięcia lub dotknięcia, znany również jako rozmiar docelowy . Wszystko, co musimy zrobić, to umieścić kontrolkę formularza wewnątrz <label>elementu. Jeśli kontrolka formularza jest elementem podrzędnym kontrolki, to <label>kliknięcie lub dotknięcie etykiety aktywuje skojarzone z nią pole formularza. Przyjrzyjmy się teraz tej zmianie.

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

Kilka szczegółów na temat tej konkretnej techniki

• Jest to cecha rodzimego <label>elementu. Jeśli oznaczasz pola formularza takimi elementami jak <span>(a nie powinieneś!), nie otrzymasz tej funkcjonalności za darmo i będziesz musiał ją zaimplementować ręcznie.
• Ta funkcja ma zastosowanie tylko wtedy, gdy <label><element zawija swoje pole formularza. Używanie aria-labelledbynie zapewnia automatycznie tego samego zachowania.
• Element <label>musi nadal zawierać foratrybut i musi być zgodny z idatrybutem w polu formularza.
• Nie umieszczaj wielu danych wejściowych w jednej etykiecie.

Zanim pójdziemy

Poznajmy jeszcze jedną osobę. Ponownie, prawdopodobnie nie jest to ktoś, o kim pomyślałbyś, rozważając dostępność.

Ben jest architektem oprogramowania w startupie technologicznym w San Francisco. Jego firma pracuje nad stworzeniem gofrownicy przyszłości. Idealnie chrupiące za każdym razem, a także pomaga w rozliczaniu podatków. Jest zachwycony projektem i spędza większość dnia na myśleniu o tym, jak może go jeszcze ulepszyć. Ben jedzie autobusem do miasta, kiedy musi iść do biura. Nie ma żadnych niepełnosprawności.

Ben, z umysłowym blezerem skupionym na gofrownicy, zapomniał, że musi wypełnić ten sam formularz co Mia na wizytę u swojego lekarza. On również używa telefonu do wypełnienia formularza. Ruch jest zatrzymywany i jedzie, więc autobus niespodziewanie szarpie do przodu, gdy on pracuje.

Ponieważ docelowe rozmiary pól formularzy leków zostały powiększone, Ben może z łatwością wypełnić formularz. Nie musi się martwić o kliknięcie niewłaściwego pola wyboru lub dotknięcie niewłaściwego przycisku radiowego. Ta myśl nawet nie przechodzi mu przez głowę. Jest w stanie dokończyć formularz i wrócić do myślenia o gofrach.

Teraz projektujemy uniwersalnie!!

W tym poście zobaczyliśmy, jak prosty formularz może stwarzać bariery dla osób niepełnosprawnych i jak możemy wykorzystać element <label> do usunięcia tych barier. Widzieliśmy również, jak prosta zmiana może sprawić, że formularz będzie łatwiejszy w użyciu dla osób niepełnosprawnych i pełnosprawnych. To jest istota projektu uniwersalnego. Biorąc pod uwagę potrzeby osób niepełnosprawnych, możemy ulepszać nasze aplikacje dla wszystkich.

Dziękuję za przeczytanie. Mam nadzieję, że nauczyłeś się czegoś nowego lub przypomniałeś sobie coś, o czym mogłeś zapomnieć.