Dostępnik o skillach dostępności

Wcale nie chodzi tu o umiejętności ludzkie, tylko skille używane przez agenty AI. Opisuję eksperyment wykonany za pomocą takiego skilla.

Powierzyłem AI coś trudnego: sprawdź dostępność interfejsu webowego i napraw to, co można naprawić. Nie jakiejś przykładowej strony z tutoriala — prawdziwego, działającego projektu. Interfejsu czatu zbudowanego na Streamlicie, nad którym pracuję w zupełnie innym celu. To był test z prawdziwego zdarzenia.

Czym jest skill agenta

Zanim opiszę, co się wydarzyło, słowo wyjaśnieniajeżeli przypadkiem jeszcze nie znasz tego pojęcia.

Agent Skills to standard wprowadzony przez Anthropic w październiku 2025. Skill to folder z plikiem SKILL.md i biblioteką zasobów pomocniczych — dokumentów referencyjnych, przykładów, skryptów. Gdy agent dostaje zadanie, skanuje opisy dostępnych skilli i jeśli znajdzie pasujący, wczytuje go przed przystąpieniem do pracy.

W grudniu 2025 specyfikacja stała się otwartym standardem — nie jest to już wyłącznie technologia Claude’a. Każde środowisko agentów może implementować skille w ten sam sposób.

Idea jest stara jak dokumentacja, ale wykonanie jest inne. Nie piszesz instrukcji dla człowieka. Piszesz je dla agenta — precyzyjnie, bez niedomówień, z konkretnymi kryteriami do weryfikacji. Agent czyta, przetwarza, stosuje. Mam takich skilli kilkadziesiąt i służą do przeróżnych rzeczy. Może kiedyś pokaże moje pudełko ze skillami, ale teraz o jednym konkretnym.

Intopia Accessibility Skill

Możesz się śmiać, ale moim Facebookiem jest Github. Przeglądam go regularnie i sprawdzam, co trenduje i co może mi się przydać. No i ostatnio zagwiazdkowałem taki specjalny skill od dostępności interfejsów webowych.

Intopia — australijskie centrum dostępności, znane w branży od lat — wydało Intopia Web Accessibility Skill, darmowy zasób dla programistów pracujących z agentami AI.

Skill składa się z pliku głównego SKILL.md oraz biblioteki plików z kryteriami akceptacji dla konkretnych komponentów: tytułów stron, języka dokumentu, landmarków, pól formularzy, przycisków, obrazów, kontrastu kolorów. Gdy agent pracuje nad zadaniem front-endowym, najpierw czyta skill i konsultuje INDEX.md, żeby znaleźć właściwe wytyczne dla budowanego komponentu.

Twórcy skilla przetestowali go na prostym przykładzie — formularzu kontaktowym. Bez skilla model robił typowe błędy: zły kontrast, brak zarządzania fokusem, niewidoczne etykiety. Ze skillem agent myślał o dostępności już w trakcie pisania kodu. Nie idealnie — jeden błąd i tak się wkradł — ale znacznie lepiej niż bez żadnego wsparcia.

Skill jest eksperymentalny. Twórcy celowo zrobili go bardziej nakazowym niż w pracy z ludźmi. Agent ma mieć jasne, mierzalne wytyczne — nie interpretować, tylko sprawdzać.

Test na trudnym przypadku: Streamlit

Postanowiłem przetestować skill na czymś niełatwym. Mój projekt — nie będę go tu szerzej opisywał, bo to praca w toku — to interfejs czatu agenta zbudowany w Streamlicie. Używam Streamlit do prototypowania, podobnie jak kiedyś Gradio. W obu przypadkach musiałem poświęcić dostępność na rzecz prostoty.

Streamlit to framework Python, który generuje interfejs webowy “automagicznie”. Nie piszesz HTML. Nie piszesz CSS. Streamlit sam buduje DOM i zarządza Reactem pod spodem. To sprawia, że dostępność jest tu wyjątkowo trudna — nie masz pełnej kontroli nad tym, co trafia do przeglądarki.

Agent dostał dostęp do kodu aplikacji (streamlit_app.py), skilla Intopii i Playwrighta do testowania. I do dzieła. W moim przypadku agentem był Claude Code od Anthropic.

Co znalazł agent

Agent napisał własne skrypty Playwright, uruchomił aplikację w przeglądarce bez interfejsu graficznego, wyekstrahował DOM, zmierzył kontrasty i porównał wyniki z kryteriami akceptacji Intopii. Znalazł 7 poważnych naruszeń WCAG 2.2 AA i 4 ostrzeżenia.

Język strony lang=”en” na polskiej aplikacji. Streamlit hardkoduje ten atrybut i nie daje sposobu zmiany. Czytnik ekranu ogłaszałby polskie treści angielską syntezą mowy.

H2 “Użytkownik” w DOM przed H1 “Agata”. Element sidebara renderował się wyżej w DOM niż główny tytuł strony. Hierarchia nagłówków zaburzona. Użytkownicy czytników ekranu nawigujący po nagłówkach trafialiby najpierw na H2 — zanim zobaczyli H1.

label_visibility=”collapsed” na przycisku dodawania pliku. Ta opcja Streamlita usuwa etykietę całkowicie z drzewa dostępności. Pole było widoczne wizualnie (w pewnym sensie), ale niewidoczne dla czytnika ekranu.

Kontrast przycisków paska narzędzi: 3,69:1 zamiast wymaganego 4,5:1. Wynikało to z koloru rgba(49, 51, 63, 0.6) — Streamlit nakładał 60% przezroczystości i po skomponowaniu na białym tle kolor nie spełniał progu. To nie byłoby oczywiste bez matematycznego pomiaru.

Były też dwie literówki: “Uzytkownik” (bez ż) i “zrobic” (bez ć). Dla czytnika ekranu to nie drobiazg — syntezatory wymawiają tekst fonetycznie, więc “zrobic” i “zrobić” brzmią inaczej. Kto nie wierzy, niech domyśli się, co oznacza słowo “skadze”.

Co naprawił i jak

Agent naprawił 5 z 7 naruszeń. Dwa pozostałe to problemy w samym Streamlicie — poza kodem aplikacji — i wymagałyby modyfikacji biblioteki lub zgłoszenia issue na GitHub.

Metody naprawy były technicznie ciekawe.

Dwa sposoby wstawiania kodu w Streamlicie — i tylko jeden działa

Żeby naprawić język strony, dodać znacznik głównej treści i wstrzyknąć skip link, agent musiał uruchomić skrypt JavaScript. Problem w tym, że Streamlit ma dwie metody wstawiania własnego kodu HTML — i ta “wygodna” po cichu ignoruje wszystkie skrypty. Agent użył tej drugiej: specjalnego komponentu, który osadza zawartość w osobnej ramce, skąd skrypt ma dostęp do całej strony.

Poczekaj — strona jeszcze się buduje

Jeden nie wystarczył. Streamlit buduje stronę stopniowo i poprawki musiały poczekać, aż budowanie się skończy. Agent odpalił je dwukrotnie — po pół sekundzie i po półtorej — żeby złapać też wolniejsze konfiguracje.

Podwójny obrys fokusu

Skip link wymagał widocznego obramowania fokusu na dwóch różnych tłach — ciemnym tle samego przycisku i jasnym tle reszty strony. Jeden kolor nie może jednocześnie wystarczająco kontrastować z obiema powierzchniami. Rozwiązanie: jasne obramowanie widoczne na ciemnym tle przycisku oraz ciemna obwódka na zewnątrz, widoczna na jasnym tle strony. Sprytne i poprawne.

“hidden” zamiast “collapsed”

Drobna, ale ważna zmiana w file uploaderze. label_visibility=”collapsed” usuwa etykietę z DOM. label_visibility=”hidden” ukrywa ją przez CSS, ale pozostawia dostępną dla czytników ekranu. Jedna wartość parametru — duża różnica w doświadczeniu osoby niewidomej.

Co zostało i dlaczego

Agent uczciwie opisał ograniczenia. Dwa problemy pozostały nienaprawione:

· Przycisk zwijania paska bocznego bez aria-label — renderowany przez Streamlit bez dostępnej nazwy, poza naszą kontrolą

· Ikona w file uploaderze renderowana bez aria-hidden — nie można ukryć elementu przed czytnikiem ekranu przez samą regułę CSS

Agent nie próbował “na siłę” naprawiać tego, czego naprawić się nie da. Zamiast tego zaproponował zgłoszenie issue do projektu Streamlit.

Czy to ma sens?

Wynik jest obiecujący. Agent znalazł rzeczy, które bym przeoczył — szczególnie kontrast po nałożeniu 60% przezroczystości. Zmierzył matematycznie, bez domysłów. Naprawił problemy, których naprawa wymagała znajomości subtelności API Streamlita.

Jednocześnie: skill nie zastąpi eksperta. Narzędzia automatyczne — nawet wspomagane AI — wychwytują 30–40% problemów dostępności. Reszta to ocena, której nie da się zautomatyzować: czy tekst alternatywny faktycznie opisuje obraz, czy kolejność czytania ma sens, czy obsługa klawiaturą jest intuicyjna. To nadal wymaga człowieka.

Ale jako pierwsza linia obrony — zanim kod trafi do audytu przez człowieka — skill Intopii wydaje się bardzo użyteczny. Szczególnie jeśli budujesz coś samodzielnie i nie masz w pobliżu specjalisty od dostępności. Zakładam też, że skill będzie się nadal rozwijał i będzie uzupełniany o kolejne skrypty i reguły.

Jedna uwaga do Streamlita: to trudny teren. Jeśli testujesz na frameworku, który generuje HTML za Ciebie, część błędów zawsze będzie poza zasięgiem. Na “czystym” HTML i CSS skill powinien dać jeszcze lepsze wyniki.

Skill Intopii znajdziesz na GitHub: Intopia/intopia-web-accessibility-skill. Warto dodać go do swojego środowiska i zobaczyć, co znajdzie. Wystarczy skopiować folder ze skillem do folderu agenta, najczęściej jest to podkatalog ‘skills’. Czasem trzeba taki skill jeszcze włączyć, ale to zależy już od konkretnego agenta.

Wieści o dostępności

Jeśli jeszcze nie miałeś okazji zajrzeć na kurs semantycznego HTML Wojtka Kutyły — to dobry moment. Wojtek tłumaczy semantykę nie jako zbiór zasad do zakucia, ale jako logikę, która stoi za dobrze zbudowaną stroną. Polecam szczególnie jeśli pracujesz z kodem i chcesz zrozumieć, dlaczego struktura HTML ma znaczenie dla dostępności.

WordPress i motywy dostępne — do 30 czerwca wszystkie motywy oznaczone jako “accessibility-ready” w repozytorium WordPress muszą przejść ponowną weryfikację lub zostaną usunięte z katalogu. Jeśli korzystasz z takiego motywu, warto sprawdzić, czy jego autor jest aktywny.

Francuski sąd nakazał firmie Carrefour dostosowanie platform e-commerce do potrzeb osób z niepełnosprawnościami, orzekając, że częściowa dostępność cyfrowa jest niewystarczająca. Wyrok ten, wydany w kontekście Europejskiego Aktu o Dostępności (EAA), potwierdza, że organizacje społeczne mogą skutecznie i bezpośrednio egzekwować te prawa przed sądem. Jednoczesna fala kolejnych pozwów we Francji dowodzi, że brak dostępności cyfrowej wiąże się obecnie z realnym i poważnym ryzykiem prawnym w Unii Europejskiej.

I to by było na tyle. Deszcz pada i to dobrze. Rosja pada i to jeszcze lepiej. Ucieszmy się deszczem, a potem niech zaświeci nam słońce.