Praktyki CSS, które mogą szkodzić dostępności

CSS stał się wszechpotężnym językiem. To, co zaczęło się jako sposób na dodanie podstawowej stylizacji do tekstu i innych elementów projektu, teraz może znacznie więcej.

Możemy go użyć do stworzenia praktycznie dowolnego układu, jaki można sobie wyobrazić. Efekty specjalne i interaktywność, które kiedyś wymagały obsługi JavaScript lub wtyczek do przeglądarek, są teraz obsługiwane natywnie. Język z podstawowego narzędzia stał się jedną z podstawowych technologii stojących za każdą stroną internetową.

Ale jak każde potężne narzędzie, CSS może mieć również niezamierzone skutki uboczne. Dostępność jest jednym z obszarów budzących największe obawy. Niektóre implementacje rzeczywiście mogą wyrządzić więcej szkody niż pożytku.

Mając to na uwadze, przyjrzyjmy się kilku praktykom CSS, które mogą zaszkodzić dostępności. Zawierają wspólne funkcje, które wymagają starannego rozważenia przed rozpoczęciem pisania kodu. Zacznijmy!

Wyświetlanie ważnego tekstu za pomocą właściwości content

Właściwość CSS content oferuje sprytny sposób dodawania ulepszeń wizualnych do elementu. Na przykład możesz użyć go w połączeniu z pseudoelementem, aby dodać ikonę przed fragmentem tekstu lub elementem listy. Może również wyświetlać obrazy lub ciągi tekstu.

Ale to ostatnie może być szczególnie kłopotliwe. Tekst dodany za pomocą właściwości content nie jest uwzględniany w obiektowym modelu dokumentu (DOM). Oznacza to, że technologie wspomagające, takie jak czytniki ekranu, mogą go nie rozpoznać.

Jest to dobre dla przedmiotów czysto dekoracyjnych. Może to jednak prowadzić do problemów z ułatwieniami dostępu, jeśli tekst zawiera istotny kontekst strony. Użytkownicy mogą przegapić ważne informacje.

Dlatego najlepiej unikać używania właściwości content do wyświetlania tekstu. Chyba że masz pewność, że nie wpłynie to na zdolność użytkownika do zrozumienia strony.

Tworzenie intensywnych migających animowanych sekwencji

Animacja to obszar, w którym CSS przeszedł znaczną ewolucję. Efekty, które kiedyś były terytorium bibliotek stron trzecich, można teraz tworzyć stosunkowo łatwo. A ponieważ są natywnie obsługiwane, mogą korzystać z takich funkcji, jak akceleracja sprzętowa, aby zwiększyć wydajność.

Podstawowe przejścia i przekształcenia mogą zdziałać cuda, tworząc nastrój i przykuwając uwagę użytkownika. Możliwe jest również tworzenie niewiarygodnie realistycznych efektów za pomocą JavaScript.

Ale niektóre style animacji mogą mieć negatywne skutki. Dla niektórych użytkowników zbyt duży ruch może dezorientować – lub znacznie gorzej. Intensywne błyski lub efekty stroboskopowe mogą prowadzić do drgawek. Jest to możliwe w sieci — podobnie jak w filmach, programach telewizyjnych i grach wideo.

WCAG 2.0 zawiera poparte badaniami wskazówki dotyczące tworzenia animacji, które nie wywołują napadów padaczkowych ani innych niepożądanych reakcji. Na przykład zaleca się, aby prezentacja była ustawiona tak, aby migała nie częściej niż trzy razy na sekundę, a także utrzymywała małe rozmiary i unikała koloru czerwonego.

Na szczęście nie ogranicza to naszych możliwości imponowania użytkownikom ruchem. Nadal istnieje wiele możliwości ulepszenia naszej pracy. Należy jednak przeanalizować rodzaje zastosowanych animacji i ich potencjalne skutki.

Nieintuicyjne :hover lub :focus Stany na elementach interaktywnych

CSS jest biegły w stylizowaniu elementów interaktywnych. Zastanów się, co jest możliwe dzięki elementom codziennego użytku, takim jak hiperłącza i pola formularzy. Można je dostosować do tego stopnia, że ​​są nie do poznania w porównaniu z ich domyślnym wyglądem.

To wszystko dobrze i dobrze. Ale ważne jest również, aby pomyśleć o tym, co się dzieje, gdy użytkownik wchodzi w interakcję z elementem. Wyobraź sobie kliknięcie przycisku, który nie oferuje żadnych wizualnych wskazówek potwierdzających, co się stało. Lub za pomocą klawiatury, aby przejrzeć menu, które nie podświetla bieżącego łącza.

Mogą być proste, ale te mikrointerakcje pomagają zapewnić użytkownikom kontekst. Potwierdzenie kliknięcia przycisku lub zrozumienie elementu menu, na którym znajduje się kursor, to tylko dwa przykłady. Każde z nich daje poczucie pewności, gdy odwiedzający przegląda witrynę.

Wstępna stylizacja elementu interaktywnego to dopiero połowa sukcesu. Oferowanie intuicyjnych stylów dla pseudoklas :hover i :focus uzupełnia doświadczenie użytkownika.

Warto zauważyć, że te style powinny być łatwo wyczuwalne. W praktyce oznacza to użycie czegoś więcej niż tylko koloru jako wskaźnika. Dodanie animacji, konturów lub ikon może sprawić, że nikt nie zostanie pominięty.

Podstawy projektowania z ułatwieniami dostępu za pewnik

Wszyscy tam byliśmy. Termin realizacji projektu zbliża się wielkimi krokami i trzeba coś zrobić. W wyścigu do premiery niektóre elementy związane z ułatwieniami dostępu mogą prześlizgnąć się przez szczeliny.

Dość często zapomina się o podstawach projektowania z ułatwieniami dostępu. Te praktyki CSS, które projektanci mogą uznać za oczywiste i założyć, są już zgodne ze standardami.

Najlepsze przykłady obejmują podstawy, takie jak czytelna typografia i akceptowalne współczynniki kontrastu kolorów. Bez rozważenia i przetestowania tych elementów witryna internetowa może nie być tak dostępna, jak myślisz.

Dlatego warto poświęcić trochę więcej czasu na przejrzenie szerszych aspektów stylów witryny. Nawet jeśli przedmiot przejdzie kontrolę „gałki ocznej”, dołóż wszelkich starań, aby przeprowadzić audyt. Możesz być zaskoczony, jak wiele możliwości subtelnej poprawy znajdziesz.

Chodzi o odpowiedzialne korzystanie z CSS

Ponieważ CSS jest tak potężny, łatwo dać się skusić możliwościom, jakie ma do zaoferowania. Po co zadowalać się podstawową animacją, skoro można stworzyć coś kinowego? I jak moglibyśmy nie pokochać wygody używania go do generowania treści?

Wszystko sprowadza się do empatii i odpowiedzialności. Jak każde narzędzie, CSS jest zdolny do wielkich rzeczy. Ale to, że możemy zaimplementować określoną funkcję, nie oznacza, że ​​jest ona odpowiednia dla ułatwień dostępu. Żyjemy w świecie, w którym ludzie z różnych środowisk będą konsumować to, co budujemy. A naszym zadaniem jest sprawić, by mogli to robić bez przeszkód.

Jasną stroną jest to, że unikanie powyższych praktyk jest w zasięgu każdego. W większości przypadków jest to kwestia zastanowienia się nad potencjalnym wpływem tego, co robimy. Stamtąd testy dostarczają nam danych potrzebnych do dalszego udoskonalania rzeczy.

CSS ma na celu ułatwienie dostępu. Wszystko zależy od tego, jak zdecydujemy się go użyć.