Wymawiaj „Alix”. Bo tak prościej!
Jest to specjalnie skonfigurowany plik CSS, który ma na celu ostrzeganie programistów o możliwych błędach i zagrożeniach w kodzie HTML. Może również posłużyć do przybliżonej oceny jakości strony przez proste dołączenie go jako zewnętrznego arkusza stylów.
a11y.css niczego na przeglądanej stronie nie zmienia. Powoduje tylko, że od momentu jej uaktywnienia do odświeżenia strony, przeglądarka stosuje do odtworzenia strony dodatkowy arkusz stylów, który oznacza błędy występujące w kodzie HTML strony i miejsca, które mogą powodować problemy.
Po uruchamianiu a11y.css obok każdego z podejrzanych elementów pojawia się wskazówka sygnalizująca, co się dzieje.
Zważ przy tym, że a11y.css nie zastępuje kompletnego narzędzia, takiego jak aXe, Tanaguru czy Tenon. Ma on jedynie na celu pokazać możliwe słabości. Oczywiście, aby wiedzieć na pewno, czy kod powinien, czy nie powinien zostać poprawiony, trzeba go sprawdzić ręcznie.
Masz co najmniej trzy możliwości. Możesz skorzystać z rozszerzenia przeglądarki albo ze skryptozakładek, albo użyć a11y.css lub jego wariacji jako zewnętrznego arkusza stylów.
Niezależnie od tego, której przeglądarki używasz, zainstaluj używasz a11y.css dla Firefoksa albo a11y.css dla Chrome .
Zapewnia ono kilka fajnych funkcji, których póki co nie ma w pliku CSS, takich jak:
- wymuszona widoczność fokusu,
- pokazywanie atrybutu lang,
- sprawdzanie alternatyw obrazów,
- zwiększanie odstępów w tekście.
Ponadto rozszerzenie przeglądarek umożliwiają:
- przełączanie CSS i zmianę w locie poziomu dokładności alertów,
- zapamiętywanie ustawień dla każdej karty,
- automatyczną aktualizację pliku w tle.
Możesz użyć głównego pliku a11y.css albo jego wariacji jako skryptozakładki. Na polskiej stronie projektu w bocznym pasku umieściliśmy kilka przycisków, za pomocą których możesz dodać a11y.css do swoich zakładek w przeglądarce. Gdy wejdziesz na stronę, którą chcesz zbadać, wystarczy wywołać łącze zakładki. Gdy skończysz badanie, po prostu odśwież stronę.
Główne zastrzeżenie polega na tym, że nagłówki HTTP CSP blokują niebezpieczne/zewnętrzne skrypty - głównie z powodu błędów i niespójności przeglądarek. Ale wiele zasad Cross-Origin Resource Sharing (CORS) może zablokować działanie skryptozakładki….
Warto również pamiętać, że ładowanie skryptozakładki może potrwać kilka sekund, bo przecież wstrzykuje ona arkusz stylów a11y.css do DOM przeglądanej strony. A ponieważ kod tego arkusza pobierany jest z zewnętrznego serwera, może to chwilę potrwać. Ale jest to cena, którą trzeba zapłacić za aktualność arkusza stylów.
Chcesz wiedzieć więcej o CSP i CORS? Przeczytaj:
*** Zewnętrzny plik css
Tworzysz stronę? Dodaj a11y.css jako zewnętrzy arkusz stylów. Efekt, ręczę, będzie czasem trudno znieść. I dlatego poprawisz wykryte usterki, a Twoja strona będzie wzorem poprawności.
Jeśli chcesz się zaangażować w ten projekt, zajrzyj na jego wiki. Każdy wkład jest mile widziany. Pracę nad a11y.css rozwija jego twórca Gaël Poupard. W repozytorium projektu pod adresem (https://github.com/ffoodd/a11y.css) możesz zgłosić wykryte problemy czy propozycje ulepszeń. Sprawdź jednak wcześniej, czy występują one w oryginalnej wersji.
Nasze polskie wydanie nie wnosi żadnych nowych, czy innych rozwiązań, a jedynie zapewnia polski interfejs skryptozakładki i polską dokumentację przypadków testowych. Jeśli w nich zauważysz jakieś błędy albo masz pomysły, co możemy zrobić lepiej, daj nam znać, otwierając nowy problem lub zgłaszając poprawkę (PR) na stronie https://github.com/lepszyweb/a11y.css.