Hej, nazywam się Comandeer.
I dzisiaj opowiem trochę o dostępności, wytłumaczę po co nam ona, na co, dlaczego, czym. Tak w ogóle jest i dlaczego powinniśmy o nią dbać. Na sam początek jak w każdej szanującej się prezentacji Przypomnijmy sobie definicję dostępności. Oczywiście skopiowana z Wikipedii Dostępność serwisu internetowego oznacza stopień, w jakim może być on postrzegany, rozumiany i przeglądany przez wszystkich użytkowników niezależnie od ich cech lub upośledzeń, a także niezależnie od właściwości używanego przez nich oprogramowania i sprzętu. Oczywiście, jak każda definicja ta jest bardzo zawiła i wypadają PL Pociąć na mniejsze fragmenty, żeby lepiej ją zrozumieć. Dlatego zastanówmy się, czym tak naprawdę jest dostępna strona. Dostępna strona to przede wszystkim strona, z której każdy może korzystać. Niezależnie od tego, czy jest na przykład poszkodowany w taki sposób, że nie widzi pewnych rzeczy lub ma ślepotę na kolory, czy też na przykład nie może korzystać z myszki z powodu zwyrodnień kości lub innych chorób ruchowych. Jest przystosowana do osób z niepełnosprawnościami. To de facto wchodzi od razu w punkt pierwszy, ponieważ osoba z niepełnosprawnością jest każdym, więc jeśli strona jest dostosowana dla każdego, równocześnie jest z automatu dostosowana pod osoby z niepełnosprawnościami. Dostępna stronę nie zgaduje kim jest Użytkownik. I to znowu, choć jest zawarte w pierwszym punkcie. Warto osobno opisać nie zgaduje kim jest Użytkownik. Bardzo często strony zakładają, że Użytkownik, który wchodzi na nią, to Użytkownik, który widzi ma pełną sprawność ruchową, jest w stanie wytrzymać dużą ilość animacji, zwłaszcza że na przykład może wejść z urządzenia mobilnego, który nie jest w stanie przerobić tego i Wszystko zacznie się zacinać. Dostępna strona to strona, która zawsze próbuje użytkownikowi dostarczyć treść. A żeby to zrobić, Nie może zakładać kim jest Użytkownik. Zawsze Użytkownik dla niej powinien być po prostu użytkownikiem. I tutaj trzeba zaznaczyć od razu na wstępie, że dostępność nie dotyczy osób tylko niepełnosprawnych. Dostępność w obecnym rozumieniu dotyczy wszystkich użytkowników sieci. I zanim do tego dojdziemy i zrozumiemy, dlaczego tak jest, przyjrzyjmy się pokrótce rodzajem niepełnosprawności. Pierwszym rodzajem jest niepełno sprawność motoryczna związana z ograniczeniami ruchu. Czyli to są wszystkie przykłady jakiś paraliżów, osób na wózkach, ale także na przykład osób po złamaniach rąk nie zawsze kości odpowiednio się zrosną i miałem przypadek w swojej rodzinie, że po prostu osoba po takim złamaniu nie była w stanie posługiwać się myszką. Niepełnosprawność sensoryczna może nie jest to do końca taka medyczna Kategoria, ale do niej zaliczam wszystkie osoby, które mają problemy ze zmysłami. Czy to na przykład wzroku słuchu, mowy i tak dalej. Jak widać, jest to bardzo taka szeroka Kategoria. Kolejną kategorią są niepełnosprawności poznawczym i tutaj zwykle są wchodzą takie schorzenia i zaburzenie jak ADHD dysleksja. I Inne tego typu rzeczy to są podstawowe rodzaje niepełnosprawności. Im w gruncie rzeczy, jeśli mówimy o dostępności, to głównie myślimy właśnie o takich osobach, że jest strona dostępna. To strona dostosowana do osób posiadających jedną z tych rodzajów niepełnosprawności. I teraz, żeby nie było to takie oderwane od rzeczywistości. Garść statystyki ponad miliard osób na świecie cierpi z powodu jakiegoś rodzaju niepełnosprawności. Nieważne, czy to jest sensoryczna, motoryczna poznawcza. Po prostu ponad miliard osób ma jakąś niepełnosprawność miliard osób, czyli prawie 15% populacji ludzkości. I, żeby nie było, że to jest wyciągnięte z kapelusza. Są to oficjalne dane Międzynarodowej Organizacji Zdrowia. Zatem, jeśli wykluczamy tylko niepełnosprawnych, wykluczamy jednocześnie 15% ludzkości. 15% rynku. No cóż, to już nie brzmi aż tak dobrze jak no na pewno nie będziemy mieli więcej niż 1% niepełnosprawnych? Nie, nie wiadomo. Zwłaszcza, że dostępność zakłada, że każdy może na tą stronę, wejść. Ale dlaczego problem z dostępnością jest tak duży, dlatego, że świadomość dostępności sama w sobie jest bardzo niska. Osobiście wyróżniam kilka poziomów tej świadomości. Najbardziej podstawowym poziomem takim prymitywnym wręcz bym powiedział jest dostępność definiowana jako imperatyw moralny. W tym wypadku mówimy, że strona musi być dostępna, ponieważ tak nakazuje dobry obyczaj, kultura, empatia czujemy niejako obowiązek, żeby dla tych osób niepełnosprawnych dostarczyć produkt. Tylko jak wiadomo, imperatywy moralne często nie mają żadnego przełożenia na życie. Często, jeśli porównamy to do głosu sumienia, wiadomo, że wszyscy to zagłuszamy w jakiś sposób. Dlatego też, żeby zapewniać takim osobom niepełnosprawnym dostęp do różnych usług z imperatywu moralnego powstał imperatyw prawny. Zarówno na gruncie prawa krajowego w Polsce jak i na gruncie całego prawa europejskiego istnieją różne dyrektywy i ustawy, które nakazują dostosowywanie stron dla osób z niepełnosprawnościami. na gruncie polskim Głównie dotyczy to stron instytucji publicznych. Zatem ministerstw. I tak dalej. Na gruncie europejskim zaczyna to też już powoli zahaczać o wszystkie firmy, które. Dla tych instytucji pełnią różne usługi. Niemniej to wciąż jest taki poziom bardzo prymitywny. Robimy to, bo musimy, a, jeśli robimy to, bo musimy to często robimy to po łebkach tylko żeby spełnić jakąś normę i było. dlatego też kolejnym poziomie jest dla mnie biznes, choćby, że brzmi to bardzo dziwnie czy wręcz źle, że Świadomość dostępności jest budowana przez biznes. To tak jak najbardziej tak jest. Może nie jest to jeszcze tak jakoś bardzo mocno rozwinięte w Polsce, gdzie temat jeszcze moim zdaniem cały czas raczkuje, ale na przykład jeśli spojrzymy na Zachód, no głównie na USA nie oszukujmy się. To dostrzeżemy, że tam już firmy od dawna już zrozumiały, że dostępność to jest bardzo duży biznes, na którym można czerpać niesamowitą kasę. I to bardzo cynicznie, ale z 2 strony. Skoro przechodzimy, od robimy, bo musimy do robimy, bo chcemy i można na tym zarobić, to automatycznie jakość usług dla osób z niepełnosprawnościami rośnie. Bo, jeśli mamy konkurencyjny rynek, to każdy musi świadczyć usługi na jak najwyższym poziomie, żeby mieć klientów, żeby mieć forsę, trzeba być naprawdę dobrym w tym, co się robi. I mimo że Wszystko skupia się na biznesie i zarabianiu pieniędzy, to usługi świadczone przez te biznesy są na naprawdę bardzo dużym poziomie. Wystarczy wspomnieć choćby cały segment związany z produkcją tak zwanej technologii asystujących, które mają pomagać osobom z niepełnosprawnościami w dostępie do różnych stron, gdzie bardzo dużym rynkiem są na przykład czytniki ekranowe, czyli.  aplikacje, które czytają na głos to, co wyświetla się na ekranie. Wystarczy spojrzeć na ceny tych programów, na przykład najpopularniejszego na Windowsie programów Jaws Szczęki, który kosztuje no. Gruby pieniądze. Tak samo bardzo dużo zarabiają. Firmy świadczące usługi związane z konsultacją różnych tematów związanych z dostępnością. Tutaj wypada wspomnieć D pajero grup, które bierze udział także w tworzeniu standardów sieciowych odnośnie dostępności. I trzeba przyznać, że choć jest to dla nich głównie biznes. To to co robią dla podniesienie świadomości dostępności w Internecie jest naprawdę godne uwagi. Niemniej biznes to jeszcze wciąż nie jest ten szczytowy poziom świadomości tym szczytowym poziomie jest tak zwana samolubna dostępność. Brzmi to jeszcze bardziej cynicznie od dostępności jako biznesu, ale ma to swoje uzasadnienie i w gruncie rzeczy jest najlepszym motywatorem do działań na rzecz dostępności. Cóż, to jest samolubne dostępność? Powiedzmy sobie szczerze, nasza pełna sprawność jest po prostu iluzją. To, że jesteśmy pełnosprawni w danym momencie, w każdej chwili może się zmienić. Wyobraźmy sobie, że mamy psa. normalnego psa. Pies jak każde zwierzę ma jakieś Zabawki wystarczy, że gdzieś zostawi swoją gumową kość na którą nadepniemy poślizgniemy się rąbniemy jak dłudzy na podłodze i jest połamana miednica, jakaś kość w nodze i w tym momencie już nie jesteśmy pełnosprawni. Fajnie, jeśli ta niepełnosprawność je tylko chwilowa, na przykład kość się zrośnie i mamy. spokój gorzej jak upadniemy tak niefortunnie, że na przykład wybijemy sobie oko, bo tuż obok zabawki był jakiś stolik z kantem. No i jest problem W tym momencie. Już nie jesteśmy pełnosprawni, jesteśmy osobą ze stałą niepełnosprawnością. Dlatego też. Warto się zastanowić, czy dostępność nie jest potrzebna także nam, zwłaszcza, że nawet nie trzeba wypadku, żeby cokolwiek nam się złego stało, bo. Starość weryfikuje poglądy. Wyobraźmy sobie nas za 40 lat, skoro w chwili obecnej jesteśmy osobami, które siedzą niemal wyłącznie przy komputerze, powiedzmy sobie to szczerze wgapimy się w różnego rodzaju ekrany czy to telewizora czy komputera, czy smartfonów. Szansa, że na starość będziemy mieli bardzo dobry wzrok jest. Jest po prostu nikła. Nie oszukujmy się, że za 40 lat będziemy mieli świetny wzrok, bo bo to nie jest możliwe po prostu i dlatego też warto zacząć się już dzisiaj zastanawiać, czy aby na pewno sieć, jaką tworzymy jest przystosowana dla nas dla nas, czyli osób, które na pewno i mówię to z czystym przekonaniem, na pewno będą w przyszłości osobami z niepełnosprawnością. Sam, wiem po sobie, Że tematem dostępności zacząłem się interesować głównie dlatego, że mój okulista powiedział mi wprost, za kilka lat, pan nie będzie widział. I od tamtego czasu nie zmieniło się nic na tyle, żeby usłyszał od swojego lekarza, że wie pan, jednak jest szansa, że. Będzie Pan widział? Więc skoro za kilka lat nie będę widział. Wypada mi zacząć się interesować dostępnością już teraz, żeby sieć, którą mamy obecnie przystosować do siebie w przyszłości samolubna dostępność to tworzenie stron dla siebie w przyszłości. I to chyba jest najlepszą motywacją do tworzenia dostępnych stron stron dla wszystkich. Bo myślimy tylko i wyłącznie o sobie. I znów brzmi to niesamowicie, cholernie cynicznie. Ale nie oszukujmy się tak działa nasza psychika i jeśli coś robimy dla siebie, robimy to w najlepszy z możliwych sposobów na tego, jeśli następnym razem się siądziemy do projektowania strony. Pomyślmy, jak będziemy się my sami nią posługiwać za 10 lat, kiedy będziemy starsi, bardziej schorowani i być może jak na przykład moim wypadku ślepi. I to jest właśnie to projektuj dla siebie, głównie dla siebie, a dzięki temu projektu także dla każdego innego. I to Wszystko zostało ukute w termin, który istnieje już tak naprawdę kilkanaście lat. Niemniej na gruncie Web Developmentu pokazał się dopiero niedawno i można powiedzieć, że termin ten został ukuty przez The Paciello Group.  Programistę właśnie ze wspomnianego już przeze mnie The Paciello Group. przez Haydona Pickeringa, który ukuł właśnie termin design inkluzywny. Napisał nawet świetną książkę na ten temat. Inclusive Design Patterns coding accessibility into web design która została wydana przez wydawnictwo Smashing Magazine. I jest to książka, która naprawdę otwiera oczy. To książka, która opisuje, czemu Patterny, bardzo często uważane za niesamowicie dobre i które są niesamowicie popularne, są z gruntu rzeczy złe i dlaczego należy je zmienić, albo przynajmniej zmodyfikować tak, żeby były lepsze i dostępniejsze dla większego grona osób? Design inkluzywny w swoim podstawowym założeniu Brzmi mniej więcej tak, że. Należy projektować stronę tak, by każdy mógł z niej korzystać. To jest to, o czym już wspominałem. To ma właśnie taką fajną nazwę design inkluzywny, inkluzywny, a więc włączający. I to jest podejście, które w gruncie rzeczy staje przeciwko obecnemu, że tak powiem podejściu do dostępności, bo obecnie bardzo często dostępność rozumie się jako coś dodatkowego taką jakąś... No rzep, który można przyczepić do psiego ogona i to niby będzie działać. Owszem, może to będzie działać, ale będzie to takie bardzo prymitywne design inkluzywny zakłada. Że strona jest projektowana z myślą o osobach z niepełnosprawnościami od samego początku. To jest właśnie to projektowanie bez zakładania. Kim jest Użytkownik i bardzo dużą Częścią designu Inkluzywnego są poprostu. Testy na bieżąco z użytkownikami. Zwłaszcza że projektant, który bardzo długo siedzi nad jednym projektem, jest w stanie. że tak powiem oderwać się od rzeczywistości i zafiksować na tym projekcie a test zużytkownikiem, zwłaszcza takim, którym ma jakąś niepełnosprawność. Na przykład, pozwala wskazać te punkty, które w obecnym projekcie po prostu zawodzą. Tyle teorii. teraz, może przejdźmy sobie trochę do bardziej takich technicznych spraw. Na sam początek warto wspomnieć o jakichś standardach sieciowych, które określają nam, jak powinna wyglądać dostępność w Internecie.  najważniejszym dokumentem jest standard WCAG. To jest tak naprawdę zbiór technik, które pozwalają zbiór technik i wytycznych, które pozwalają tworzyć strony w sposób film jak najbardziej przystosowany do osób z niepełnosprawnościami. I oficjalną wersją jest 2 0, ale trwają już prace nad wersją 2 1 a jest tak dlatego, że wersja 2 0 powstała bardzo bardzo dawno temu i nie uwzględniała na przykład całego bumu jaki jest obecnie na Responsive Web Design. Dlatego powstaje nowa wersja, co znajduje się wewnątrz tego stan. Otóż znajduje się tam naprawdę Wszystko, co trzeba wiedzieć, próbując projektować serwis dostosowany naprawdę dla wszystkich. Znajdziemy tam między innymi informacje o tym, jaki kontrast należy dostosować, żeby osoby niedowidzące były w stanie odczytać Wszystko na stronie. Są informacje między innymi o tym, jak umieszczać napisy w filmach, kiedy one są konieczne. Jest cały wielki rozdział poświęcony opisowi obrazków. Zresztą to jest temat, który chyba powraca zawsze, jeśli chodzi o dostępność. Są na przykład także opisane techniki związane z wykorzystaniem kolorów. Podam przykład z powodu różnych zaburzeń z widzeniem kolorów. Bardzo często zdarza się, że jeśli na stronie jakieś elementy. Sygnalizując swój stan tylko i wyłącznie kolorem. To pewne osoby tego nie po dostrzegają. Dlatego też. Jednym z takich najbardziej podstawowych  paternów w Internecie, który chyba od samego zarania dziejów istnieje, jest właśnie podkreślenie linków. Linki są niebieskie, a zatem są wyróżnione kolorem, ale równocześnie są podkreślone i to jest właśnie ten 2 element, który składa się na całość wizualnej identyfikacji, bo sam kolor bardzo właśnie często nie wystarcza. W standardzie WCAG są także opisy różnych innych technik, między innymi jest nie cała technika poświęcona temu, dlaczego tabelki nie są odpowiednim sposobem do tworzenia layoutu strony. I to jest standard, który jest podstawą, jeśli ktokolwiek chce tworzyć dostępne strony w internecie. Musi to znać. Problem polega jedynie na tym, że ten dokument ten standard ma ponad. 1000 stron i znajdują się w jego obrębie techniki Różnorakie i jest ich kilkaset, więc. Więc chyba nie ma osoby, która by przeczytała to dokładnie każdą stronę i pamiętała Wszystko, ale są bardzo liczne poradniki. World Wide Web Consortium opublikowało także skrót tego, w którym zawarte są wszystkie. Najpotrzebniejsze informacje istnieją także narzędzia, które sprawdzają. Najbardziej takie podstawowe fragmenty tego, czy nasza strona jest zgodna z tym. Więc sam standard jest naprawdę bardzo wielki, porusza bardzo wiele kwestii, trzeba go znać, ale niekoniecznie w tej kanonicznej postaci. Kolejnym standardem jest Aria Accessible Rich Internet Applications. I znów. Oficjalną wersją jest wersja 1.0, ale powstaje już wersja 1.1. Cóż to jest? Otóż nie oszukujmy się HTML od wersji 5 ma bardzo duże możliwości. Ale wciąż nie ma jakichś super wielkich. bardziej skomplikowane elementy strony, jak na przykład. Tab-listy czy Takie właśnie. Soczyste widgety, że tak się wyrażę, trzeba w jakiś inny sposób opisać i do tego właśnie służy ten standard. Pozwala on właśnie opisać elementy, które tworzymy sami w taki sposób, żeby technologie asystujące głównie już właśnie wspomniane czytniki ekranowe były w stanie odczytać elementy w konkretny sposób. Mówiąc inaczej Aria pozwala totalnie somatycznym divom nadać znaczenie, które pozwoli. Przedstawić je w odpowiednim świetle. Osobom z niepełnosprawnościami na przykład tworzymy Przycisk na divie wiec oczywiście jest techniką naganną, ale to jest najłatwiejszy przykład, żeby pokazać o co chodzi. W aria, tworzymy fil przycisk na divie. I, żeby dla czytnika ekranowego lub innej technologii w stresującej ten dive był przyciskiem, możemy dzięki arii dodać mu atrybut role, który ma wartość button i wówczas ten dive staje się przyciskiem. Jest przedstawiane użytkownikowi jako przycisk. Są także różne inne praktyki tworzenia dostępnych stron i to jest podczepione pod standard Aria, ponieważ korzysta z różnych. Rzeczy, które Aria udostępnia właśnie między innymi określanie roli. Niemniej w tych praktykach są także zawarte inne rzeczy, jak na przykład sposoby, w jakie klawiatura powinna działać z poszczególnymi typami komponentów na przykład są dokładne praktyki, jak powinno działać menu kontekstowe, które pojawia się po naciśnięciu prawego przycisku myszy. Jest tam na przykład określone że w chwili otwarcia menu. Focus powinien być na pierwszym elemencie. Że podmenu powinno się otwierać przy pomocy.  spacji czy tam strzałki w Prawo i tak dalej. To samo jest opisane w stosunku do przycisków otwierających menu do tab-list, gdzie na przykład jest określone, że żeby wejść do tabów należy nacisnąć przycisk, nacisnąć klawisz tabulacji, a pomiędzy trybami przeskakiwać strzałkami na klawiaturze, co jest bardzo, bardzo, bardzo wielu miejscach źle zaimplementowane. Na przykład na githubie W sekcji pisania komentarzy ,do przeskoku pomiędzy zakładką edytora preview i tak trzeba używać tabulatora, a zgodnie z praktykami powinno się używać klawiszy strzałek. Stworzyłem taką stronę przedstawiającą najczęstsze błędy. Pokrótce sobie o niej opowiedzmy. brak etykiet formularza też chyba ten błąd, który najbardziej piętnuje. Nagrałem nawet film kiedyś Filmik dla Koduje, w którym tłumaczy, dlaczego brak label w formularzu jest tak bardzo złe i dlaczego placeholder w żaden sposób go nie zastępuje. Otóż w dużej mierze. Problem z label polega na tym, że bez tej etykiety czytnik ekranowy nie w stanie poradzić sobie z danym polem. Formularza nie wie, do czego to pole służy, dlatego każde pole formularza powinno mieć swoją własną etykietę. Brak lub niewłaściwy atrybuty alt w obrazkach to kolejny błąd, który jest powtarzany na prawie każdej stronie. Bardzo często atrybuty te są albo pomijane, albo mają całkowicie bezsensowne wartości. Warto przy tym zauważyć, że atrybut alt zależy od kontekstu. To za chwilę pokażę na przykładzie tej stworzonej strony. Na razie sobie tak tylko szybko mówmy złe wykorzystanie ikonek to zwłaszcza jeśli chodzi o nowe ikonki, które wykorzystuje się w icon fontach lub przy pomocy svg. Bardzo często są z wstawiane w sposób całkowicie niedostępny. Niski kontrast strony. No to jest raczej oczywiste, niewłaściwa lub utrudniona nawigacja klawiaturą. To jest bardzo ciekawe.

Bardzo często można to zauważyć zwłaszcza na stronach, w których występuje tak zwane hamburger menu. Przycisk otwierający menu często jest całkowicie niedostępny z poziomu klawiatury, bo nie jest przyciskiem, tylko nie jest właśnie wstawionym divem lub spanem. Czasami zdarza się nawet, że mimo że menu nie jest ukryte, jesteśmy w stanie z poziomu klawiatury się dostać do wszystkich jego pozycji, co jest dość. Dziwne i wprowadza jedynie zamęt w czasie obrzucić strony i zawiły język. Okazuje się też, że bardzo często na stronach pewne proste rzeczy opisane są w sposób, który nie pozwala nikomu. Oprócz prawdziwych ekspertów zrozumieć temat. I to jest przede wszystkim problemem, zwłaszcza dla osób, które mają niepełnosprawności z grupy poznawczych. Stąd bardzo ważne jest, żeby język próbować. Uprościć do jak najprostszej postaci bez niepotrzebnego owijania w bawełnę, że tak powiem, przyjrzyjmy się może teraz tym najczęstszym błędom. Tak to jest taka bardzo prymitywna strona złożona na szybko, żeby to pokazać. Etykiety w formularzu jak już wspominałem placeholder w żaden sposób tej etykiety nie zastępuje. W gruncie rzeczy. Problem polega na tym, że w chwili kiedy cokolwiek do tego pola wpiszemy, etykieta jest bezpowrotnie tracona. I kiedy na przykład będziemy edytować formularz, natkniemy się na pole, w który mnie wiadomo, co zrobić. Jeśli jakaś zawartość w nim jest w stanie nam podpowiedzieć, do czego ono służy, no to jeszcze jest w miarę. Niemniej czasami zdarzy się, że zawartość nam nic nie podpowie, bo na przykład będzie tam jakaś liczba. A tuż obok będzie druga liczba i wiadomo jedynie, że w jednej jest są sztuki a w 2 jest cena. Więc dlatego mimo Wszystko tą etykietę bym dodawał. Niemniej dodanie etykiety w taki sposób uniemożliwia często identyfikację danego pola czytnikowi ekranowemu. Pozwolę sobie teraz włączyć czytnik ekranowy na macbooku jest dostępny pod skrótem klawiszowym command F5. No może nie brzmi to jakoś super, ponieważ komunikaty voiceovera są po angielsku, a głos jest typowo Polski. Próbuję czytać po polsku. Niemniej właśnie w taki sposób to działa jak można było.  usłyszeć w żadnym razie nie został oczyszczony etykieta dla tego pola czytnik jedynie stwierdził, że jesteśmy wewnątrz pustego pola i które możemy edytować w chwili, kiedy etykieta jest dodana. Czytnik zachowuje się zupełnie inaczej. Pozwolę sobie go Jeszcze raz włączyć. Jak widać w tym wypadku Etykieta została przeczytana. Jeszcze raz sobie to porównajmy tak dla pewności.  Jak widać, w tym drugim przypadku najpierw jest czytana etykieta. Później dopiero jest mówione, że mamy do czynienia z polem formularza. Kiedy etykieta jest źle, przypięta czytnik nie czyta nam w żaden sposób. Co do tego pola powinniśmy wprowadzić chwili, kiedy nawigujemy po formularzu przy pomocy klawiatury Głównie jest to problem, ponieważ no po prostu nie mamy zielonego pojęcia, co wydaje na pole należy wpisać. Dlatego tak ważne jest, żeby Te etykiety mimo Wszystko dodawać i tak od razu powiem, że placeholder przez czytniki ekranowe jest czytany, ale ze względu na właśnie te niepewne, niepewne user experience mimo Wszystko bym omijał to na rzecz etykiet opisy obrazków. No tutaj bardziej trzeba się zagłębić w kod. Pierwszy przykład. Jest oczywisty, brakuje alta całkowicie, więc wypadałoby go dodać. drugi przykład już taki oczywisty nie jest, bo mamy alt. Ale jego wartością jest nazwa obrazka. Tutaj wypadałoby to zmienić na coś lepszego typu, na przykład Comandeer. Lub zależnie od kontekstu Comandeer Avatar. 3 przykład jest jeszcze mniej oczywisty, bo mamy poprawny out, ale mimo Wszystko uznałem to za dlaczego? Ponieważ jak już wspominałem opis obrazka zależy od kontekstu. Tuż za obrazkiem znajduje się nazwa użytkownika Comandeer. W tym wypadku czytnik ekranowy. Po dotarciu do takiego akapitu przeczytałby to jako comandeer image comandeer, czyli de facto mamy duplikowaną tą całą informację, żeby tego uniknąć w tym wypadku warto nadać. Pusty alt wówczas zostanie przeczytany jedynie to. oczywiście, jeśli na przykład.  chcielibyśmy opisać, jak wygląda mój avatar. Wówczas w alt powinno się znaleźć, że jest to głowa niebieskiego robota i tak dalej, ale jak już wspominałem, Wszystko zależy od kontekstu. Dlatego też bardzo często na stronach, które mają w lewym górnym rogu logo, bardzo często powtarzanym błędem jest wpisywanie jako alt logo strony. No właśnie nie bo kontekst wskazuje na to, że logo to ma określoną funkcję, w tym wypadku identyfikuje stronę, zatem nie jest logo, ale ma przedstawiać użytkownikowi nazwe stron. W tym wypadku należy pominąć słowo logo i zostawić samą nazwę strony. Zwłaszcza jeśli jest źle, jeśli logo jest to podlinkowane. Wówczas  czytnik przeczyta to w taki sposób, jakby sugerował, że mamy do czynienia z linkiem do loga strony. A zupełnie nam o to nie chodziło. Kiedy logo mogłoby mieć opis, że jest logiem na przykład w portfolio obrazków jakiegoś grafika. Wówczas można to opisać, że stworzył jakieś logo. Niemniej logo jako logo. W lewym górnym rogu strony takiego opisu mieć nie powinno. ikonki. Tutaj znowu trzeba się bardziej skupić na kodzie. pierwsza ikonka zdaje się być całkowicie poprawna. Niemniej w3c World Wide Web Consortium uznało, że tagu <i> nie powinno się używać do ikonek. Ponieważ semantycznie całkowicie jest to nieuzasadnione, dlatego powinno się używać. Elementu span warto także dodawać Aria hidden true z prostej przyczyny bardzo często. Systemy operacyjne czytają różne znaczki Unicode. W z tego też względu zawsze warto czytniki ekranowe całkowicie wyciszyć, zwłaszcza jeśli ten ptaszek jest naprawdę tylko ozdobnikiem, który nie wnosi nic do komunikatu, bo cały komunikat jest za tym ptaszkiem. Wszystko jest ok, więc skoro jest tuż obok, tego napis, że Wszystko jest ok. ptaszka można całkowicie wyciszyć tak, żeby czytnik ekranowy go pominął. W przypadku takiego pola. Ikonka de facto opisuje co w tym polu należy wpisać. Dlatego też. Umieszczamy tą ikonkę W label Żeby po kliknięciu odnosiło się do pola i żeby równocześnie czytnik odczytał nam etykietę tego pola. Ale równocześnie dodajemy element SR-only. Tak jest przynajmniej w bootstrapie, w innych miejscach bardzo często klasa Ta strona się nazywa visually-hidden. Chodzi o to, że tekst wpisany w taki element jest niewidoczny na stronie, ale jest czytany przez czytniki ekranowe. Jest ukryty w taki sposób, żeby czytniki ekranowe do niego mimo Wszystko dotarły i w tym momencie. Mamy widoczną jedynie ładną ikonkę, ale równocześnie mamy zapewnioną dostępność dla czytników ekranowych. I jest jeszcze przykład. Z linkiem do emaila. Tutaj pozwoliłem sobie. Pokazać ten przykład, ponieważ. Tego typu ikonki są ikonkami, które niosą dodatkową treść. Sam link nie mówi nam, że jest linkiem do E-maila. To Znaczy. Owszem, można to wywnioskować po tym, jak jest jego zawartość, ale nie zawsze tak jest. Dlatego jeśli. Ta ikonka ma nas poinformować o tym, że to jest email. Warto także zastosować tą samą metodę i dodać dodatkową informację dla czytników ekranowych.

Niski kontrast no tutaj raczej nie ma za dużo nic do tłumaczenia. Wiadomo, biały tekst na żółtym tle. Nie jest do przeczytania, biały tekst na czarnym tle jak najbardziej jest. I tutaj trzeba od razu zwrócił uwagę, że. Poziom kontrastu jest bardzo wyraźnie definiowany w standardach, zwłaszcza we WCAG. Istnieje wiele różnych narzędzi, które to są w stanie automatycznie sprawdzić i bardzo warto sprawdzać, czy nasza strona spełnia wymagania odnośnie kontrastu, ponieważ. Ponieważ no przyznam, że to chyba jest błąd. Nawet częstszy od złego używania alt w obrazkach czy brak label i for w formularzu. Niemal każda strona w Internecie ma problem z kontrastem.

Nawigacja klawiaturą. W tym wypadku. Można zauważyć, że. Po kliknięciu Tabulatora na klawiaturze. Jest zaznaczony link, niemniej jest to praktycznie niewidoczne, jedynie podkreślenie, które może komuś umknąć. Wskazuje, że termin został zaznaczony. Najechanie na przycisk w ogóle nie działa. I jak to powinno być zrobione?

Oczywiście w przypadku linków zostawiamy obwódkę wokół niego, czyli po prostu nie stosujemy outline. none jak już stosujemy, to warto zadbać o jakąś alternatywną metodę. Na przykład zrobienie jakiejś ładnej ramki, czy zmiana tła elementu. Jeśli chodzi o przyciski - Przyciski robimy jako przyciski, a nie jakieś dziwne spany - po prostu. Mimo że niby to działa jak przycisk, to jednak przyciskiem nie jest i czytnik rano tego nie traktuje jak przycisk i nie czyta informacji, że można to kliknąć. Tak samo nie można się dostać do tego z poziomu klawiatury, dlatego tak ważne jest, żeby  zachowywać semantykę. HTMLa i stosować te elementy, które naprawdę należy zastosować w danym momencie. Brzmi jak totalne podstawy, ale niestety bardzo często zdarza się, że przyciski są robione tak. Zamiast tak i tak od razu zaznaczę onclick to zło, ale na potrzeby przykładu było tak najprościej. Czyli dochodzimy do ostatniego błędu, zawiły język. No tu jest taki przyznam, że zaszalałam z tym przykładem. No nie sądzę, żeby ktoś zamiast promienia słonecznego światła padające na ziemię, był w stanie skonstruować zdanie typu Fenomen transmisji, wiązki fotonów, wertykalnym kierunku, zwrocie wskazującym na równik planety Egzotermiczniej azotowy terenowi atmosferze. W każdym razie to chyba wyczerpuje temat zawiłego języka. Wrócimy sobie do prezentacji to są najczęstsze błędy razem z prymitywnymi, przerysowanymi przykładami. I przejdźmy sobie teraz do sprawdzania dostępności, w jaki sposób sprawdzić, czy strona spełnia Chodźby min. Dostępności. No to właśnie tak. Jak już wspominałem testowanie w czytnikach ekranowych. Na macu jest to voiceover, który jest wbudowany w każdy system MAC na Windowsie jest to JAWS albo nvidia. No na linuksie no. Na linuksie niby jest orka, ale tego chyba nikt nie używa. Tak naprawdę można uruchomić nvidię, ale nie do końca działa to tak jak powinno. Więc jeśli chcemy się pobawić czytnikami ekranowymi, to raczej na windowsie i albo raczej na macu na linuksie niespecjalnie. validator. Validator oczywiście sprawdza nam, czy nasz kod HTML jest poprawny i tutaj są 2 poziomy poprawności. Kod i Html może być poprawny syntaktycznie, a zatem na poziomie składni, czyli czy wszystkie elementy są zamknięte, czy nie Ominęliśmy jakieś potrzebne atrybutów i tak dalej. Oraz jest także poziom  zgodności semantycznej, której niestety walidator już sprawdzić. Nie potrafi, bo nie jest na tyle wyspecjalizowany, żeby stwierdzić, czy na pewno chcieliśmy dać takie znaczenie w tym miejscu, a nie inne. Choćby to właśnie przykład  przyciskami robionymi na span validator nie jest w stanie stwierdzić, czy ten element faktycznie powinien być przyciskiem czy nie. Dlatego walidator bardziej przyda nam się. Jedynie przy sprawdzaniu poprawności syntaktycznej, a jest to ważne na tyle, że jest to wpisane właśnie w standard WCAG, także element, że dokument html musi być poprawny składniowo, żeby być zgodnym po prostu z tym stanem. Wave jest narzędziem, które wykonuje szereg automatycznych testów dla danej strony i sprawdza na przykład kontrast czy wszystkie obrazki mają alt, Czy linki są w dobry sposób opisane, czy kilka linków o tej samej treści nie prowadzi w różne miejsca i tak dalej? Jest to jeden z takich narzędzi, które. Niby są walidatorami symetryczność htmla, ale wiadomo części rzeczy się zautomatyzować nie da i jak wskazują badania i różne statystyki, tego typu narzędzia są w stanie wykryć od 15 do około 30% wszystkich błędów z dostępnością na stronach, więc mimo Wszystko nie można się tylko na nich opierać. Są także osobne narzędzie przeznaczone wyłącznie do pomiaru kontrastu. Które dają lepsze wyniki niźli, takie  narzędzia zintegrowane, jak choćby wew. I tak najważniejsze są testy z użytkownikami. Nie oszukujmy się, nikt tak nam nie powie. Czy strona jest dostępna dla osób z niepełnosprawnością, Jak osoba z niepełnosprawnością. Zawsze warto testować z użytkownikami, to jest de facto podstawa. No bo można sobie odpalić czytnik ekranowy, posłuchać jak tam, żeby nasza strona można sobie przylecieć validatorem i innymi narzędziami, zdobyć wszystkie możliwe certyfikaty, sprawić, żeby kontrast był naprawdę wysoki, a później się okaże, że na przykład całkowicie skopaliśmy nawigacje klawiaturą. Czy zapomnieliśmy, że czytniki ekranowe w pewien specyficzny sposób traktują pewne elementy HTML, a i tym samym Mimo że strona W teorii spełnia wszystkie wymogi do bycia dostępną jest całkowicie niedostępna. I Tak wszystkie te automatyczne narzędzie pozwalają nam. Odsiać najbardziej podstawowe problemy. Niemniej faktycznie stwierdzić, czy strona jest dostępna, potrafi jedynie Prawdziwy człowiek i o tym warto pamiętać. No to byłoby tyle tej dawki doplaci odnośnie dostępności. Mam nadzieję, że przynajmniej część z tego, co powiedziałem, brzmiało sensownie. Taki mały apel na. Koniec, chodzimy naprawiać sieć, chodźmy ją naprawiać, bo za 10 lat prawdopodobnie będziemy musieli z niej korzystać, a nie będziemy już wtedy tak młodzi jak dzisiaj. Dziękuję.