 Nazywam się Izabela Mrohen i chciałabym Państwu dzisiaj przedstawić dosłownie takim podsumowanie zestaw czykładów, jak możecie Państwo projektując swoją stronę na WordPressie z jednej strony zrobili ją właśnie ciekawą, ale też dostępną. Tytuł tej prezentacji to dostępne i użyteczne strony na WordPressie dobre praktyki w zapobieganiu wykluczeniu cyfrowemu i społecznemu. I kawałeczek na, tu widzę, nie działa. Jeżeli chodzi o porządek prezentacji to dosłownie jeden slajd na mój temat. Następnie przedstawię Państwu użytkowników internetu, wybór motywu, jak można się do tego zabrać ze strony dostępności, ale niekoniecznie ten motyw będzie nam odpowiadał. Następnie przedstawię Państwu standardy dostępności. Weź nie mamy WCAG 2.0, ale od czerwca tego roku wchodzi już też siedemnaście nowych kryteriów sukcesu i będzie trzeba troszeczkę wspomnieć Państwu na temat WCAG 2.1 i przykłady dobrych praktyk. Tu w tej części będę bardzo dużo takich praktycznych rzeczy pokazywała. Natomiast mój wykład jest jakby wstępem preludium do następnego wykładu, który poprowadzi pan Mikołaj Rotnicki. Pokażę Państwu to, czego my nie widzimy, jak osoba z dysfunkcją z roku odbiera. Czyli w podsumowaniu będzie można właśnie zobaczyć, jak to wszystko wygląda ze strony osoby widzącej. Moje zainteresowania w ogóle nową technologią rozpoczęły się już w 1999 roku, kiedy zajęłam się napisami do firmów swojej pierwszej pracy magisterskiej na filologię angielskiej na Uniwersytecie Śląskim. Następnie pisałam prasę doktorską, co prawda z historii języka, natomiast ja badałam korpusy i tu również nowa technologia się wkradła do tej pracy. Trzeba było napisać bardzo szybko program wyszukujący, taki właśnie konkordancja. W tamtym czasie nie było to możliwe jeszcze tak jak teraz, więc informatyk zrobił dla mnie taki program, który wyszukiwał bardzo szybko pewne zwroty w wielu, wielu powieściach angielskich. W 2010 roku zainteresowałam się narzędziami CAD, czyli Computer Assisted Translation. Dlatego właśnie łączę holistycznie WordPressa, dostępność i tłumaczenie. Będę dużo mówiła też o lokalizacji, o programowania, ale też lokalizacji stron, ponieważ bardzo często Państwo wykorzystujecie przeróżne wtyczki, które są nieprzetłumaczone do końca, coś się otwiera na stronie i mamy wtedy polecenia, raz po angielsku, raz po polsku oraz jeszcze w jakimś innym języku, a dosłownie osoba, która przecież nie widzi, może nie znać tego języka, a osoba, która nie słyszy w ogóle uczy się języka polskiego, jako drugiego języka. Dlatego jeżeli mamy taką mieszankę językową na jednej stronie, to nie jest to zbyt dobre i dostępne. W 2012 roku rozpoczęłam taką ideę otwierania studiów podyplomowych, włączenie cefrowe i społeczne strony internetowe Audiodyskrypcja Multimedia na Uniwersytecie Śląskim. Pierwsza edycja tych studiów już się odbyła. Teraz we wrześniu będę starała się, aby wznowić już taką bardziej zmodyfikowaną również tę edycję studiów podyplomowych dwóch semestrarnych. W międzyczasie zrobiłam certyfikację jako ekspert do spraw dostępności. W 2017 roku oficjalnie certyfikowałam się na projektanta stron na WordPressie i w tym roku również podeszłam do certyfikowanego kursu zakresu aplikacji mobilnych. I powiem Państwu, że to wszystko naprawdę pomaga w zrozumieniu dostępności, ale też daje pewne takie niedosyd, że jeszcze, jeszcze to jest ciągle za mało. Jeżeli chodzi o porządek prezentacji, najpierw chciałabym Państwa wprowadzić świat osób z różnymi dysfunkcjami i dlaczego ta strona, którą Państwo będziecie projektować, powinna być intuicjna i przyjazna dla użytkownika. Przede wszystkim największym problemem od lat jest to, że wszędzie widzimy ten jeden i ten sam pictogram osoby siedzącej na włosku, na parkingach, na drwiach do toalet, na przykład na dworcach czy na lotniskach. I wtedy dużo osób kojarzy sobie tylko i wyłącznie jakąś dysfunkcję związaną tutaj z motoryką, czyli z problemem z poruszaniem się. Zapominając o tym, że są osoby, które mają również dysfunkcję wzroku, niekoniecznie są to osoby niewidome od urodzenia, ponieważ bardzo dużo osób traci wzroku, po prostu z biegiem czasu z powodu różnych dolegliwości, różnych chorób. Osoby, które są niedosłyszące bądź głuche od urodzenia, to ten pictogram po lewej stronie, gdzie mamy dwie ręce, to jest tak zwany znak motyla. Po prawej stronie na dole macie Państwo pictogram osoby z białą laską, czyli jest to osoba z dysfunkcją wzroku. I ostatni pictogram po prawej stronie u góry, to jest osoba z dysfunkcją kognitywną. Tutaj również wchodzą osoby z dyslekcją, dlatego tak bardzo jest ważne, aby zwrócić uwagę na to, jakie czyciągi Państwo stosujecie na stronach. Nie mogą być zbyt ozdobne, no i przede wszystkim, żeby ten motyw, który ma szarłą czyciąkę, żeby jednak poprawiać tę czyciąkę, żeby ona była bardziej kontrastowa i ciemniejsza, łatwiejsza do odczytania. Dlatego sięgając tutaj do wytycznych WCA G2-0 w języku polskim, pokazałam taki fragment z tej definicji, że przede wszystkim treść stron powinna być dostępna dla szerokiego grona użytkowników, aby była bardziej przyjazna dla każdego. Bardzo wiele osób zawsze mnie prosił, mów, że to nie tylko jest dla osób z dysfunkcją, to jest dla każdego użytkownika, ponieważ proszę Państwa, życie jest nieprzewiedywalne. Dzisiaj wydaje nam się, że my nigdy nie będziemy wśród osób, które mają jakąś dysfunkcję, ale okazuje się, że za 10, za 15, za 20 lat nagle coś się dzieje i mamy kuboty ze wzrokiem, ze słucham, albo na przykład sam fakt, że mamy rękę w gipsie i już nie możemy używać mężki. To, że jest też wykluczenie nas przez jakiś moment, z jakiejś funkcji, na przykład w pracy. Jeżeli chodzi o bardzo ciekawy podział, osób, które mają przeróżne dysfunkcje, został to przygotowane przez Microsoft, było to wersja angielski, a przetłumaczyłam na polski, więc jest to moje własne tłumaczenie. Bardzo mi się podoba to, że jest przede wszystkim podział na wykluczenie stałe, tymczasowe i sytuacyjne. Proszę Państwu zauważyć tej tabelce, że jeżeli chodzi o dysfunkcję dotyku, to właśnie o to, o czym wspomniałam, możemy mieć górne ukończenie unieruchomioną w gipsie, na tym blaku i to już jest wykluczenie tymczasowe. Zaczyna się problem z posłukiwaniem się mężką albo wykluczenie sytuacyjne, jeżeli mamy zabiegi pielęgnacyjne, ponieważ na przykład wychowujemy małe dziecko. Jeżeli chodzi o dysfunkcję wzroku, osoby niewidomy, to też osoby, które ciepią na katarakty, dlatego teraz jest bardzo wiele ciekawych projektów dla osób 65 plus, właśnie w dostępności organizuje się różne spotkania, jak mogą te osoby posługiwać na przykład tabletami. No i w wykluczeniu sytuacyjne, kiedy kierując pojazdem zaczynamy zwracać uwagę na inne czynności, na przykład rozmowy telefoniczną, o czym teraz jest wiele programów takich, aby nie zwracać uwagi, nie odbierać telefonów jednak w trakcie prowadzenia pojazdu. Jeżeli chodzi o dysfunkcję słuchu, to głuche mogą mieć na przykład niedosłuch spowodowany stanem zapalnym i już jesteście Państwo w wykluczeni tymczasowo, a wykluczenie sytuacyjne to osoby pracujące w hała ślubym środowisku. Dlaczego to akurat wykluczenie jest ważne? Jeżeli ja na przykład jadę pendoliną w wagonie strefa ciszy i chciałabym sobie zobaczyć jakiś film, a film nie ma napisów. Ja jestem już wykluczona, nie jestem w stanie przede wszystkim odbierać wiadomości w tym filmie z ruchu ust. Dlatego napisy są jednym z elementów właśnie standardu WCAG 2.0. I ostatnia dysfunkcja mówienia to na przykład wykluczenie tymczasowe jeżeli chorujemy, mamy zapalenie gardła, wtedy też nie jesteśmy w stanie przecież wiele mówić, no i wykluczenie sytuacyjne to osoby z akcentem, gdzie mamy kłopot z zrozumieniem na przykład jakiegoś filmu, wtedy również bardzo przydają się napisy. Dlatego jak Państwo będziecie przygotowywać swoje strony na WordPressie i zamieszczacie jakieś filmy, to bardzo proszę na to zwrócić uwagę, żeby te napisy były, żeby była audio dyskrypcja i ja również o tym powiem w późniejszym moim wystąpieniu żeby zamieszczać poniżej transkrypt. Czyli to, co się mówi na filmie powinno być też dostępne w alternatywnej formie tekstowej. Dysfunkcję wzroku proszę Państwa dlaczego strona powinna być intuicyjna? Przede wszystkim dlatego, że są osoby, które tak jak widzimy w ilustracji, mają takie widzenie plamki. Cały czas widzą czarną plamę, ta plama się powiększa. Na początku jest malutka, potem coraz większa. Więc jeżeli strona jest intuicyjna i zawsze mniej jest w tym samem miejscu, w jakieś inne obrazy czy filmy znajdują się w ten sam sposób intuicyjnie ułożone na stronie i każda podstrona jest bardzo podobna, wtedy ta osoba nie musi się za każdym razem uczyć jak obsługiwać dany serwis. To zdjęcie przedstawia również ten sam problem z widzeniem plamkowanym. Tutaj widzimy te plamki rozrzucone po całym ekranie. Są również osoby, które widzą tak zwanym widzeniem tunelowym, czyli widzą tylko co jest w środku. Tu akurat jest jeszcze duży obszar, którym widzą, ale są osoby, które widzą tak jak przez dziurkę odklucza. To słownie taki mały naparstek tylko Państwa strony. I znowu jeżeli osoba wie, że jak sobie coś przesunie, jest to w miejscu i tak samo zrobione, jest jej o wiele łatwiej odczytać taką stronę. I ostatni slajd to osoby, które mają cataractę, czyli jest to osoba, jest to strona bardzo zamazana i tutaj bardzo zwracam uwagę na kolorystykę. I dlatego mówiłam na początku o tej szarej czciące. Jeżeli ta czciąka jest nieczytelna, to osoba z cataractą naprawdę nic nie przeczyta. Drugi części chciałabym Państwa wprowadzić coraz bardziej, jak sobie radzić na tych stronach w WordPressie. Ja pamiętam swojej początki, tutaj pani Kasia też pamiętam, zaczynałam zawsze od tego, że próbowałam znaleźć jakiś ciekawy motyw. Żaden z tych motywów, który oglądałam nie odpowiadał w tej dostępności. Więc zobaczyłam, że jest filtrowanie. Jak już się pojawiło filtrowanie i się ucieszyłam, że jest accessibility, te motywy nagle jak Państwo widzą na ilustracji zaczynają się pojawiać. Po filtrowaniu otrzymuje 20 motywów. No i niestety żaden z tych motywów wszystkich tych elementów WCA Gen 2.0 nie zawiera. Są jakieś jedne bądź dwa, czyli na przykład jest motyw, który bardzo ładnie już ogólnie nam daje możliwość dodawania fokusa, są kontrasty w menu, jest Kipling z czego się bardzo cieszę, bo tego wcześniej nie było. Natomiast niestety trzeba by te 30 wyselekcjonowanych, przefiltrowanych motywów złożyć w jeden cały, żeby z każdego wiąźć po troszkę tego, co jest w każdym. No i zaczyna się wtedy masz pod górkę. Trzeba coś jednak w każdym motywie uzupełnić. Bardzo ważne jest aby zwrócić uwagę na nagłówki. Ponieważ nagłówek to jest tak jak znaki drogowe na drodze. Osoba, która używa technologii asystującej po prostu porusza po stronie i słyszy nagłówek 1, nagłówek 2 i przechodzi krok po kroku, o czym będzie mówił szczegółowo Pan Mikołaj. Następnie listy uporządkowane i nieuporządkowane. Jeżeli Państwo możecie sobie tylko dawać jakiś miśniczek i oczywiście spacja to absolutnie nie wchodzi w grę. Paragrafy nie mogą być to ściany tekstu na stronie, tylko łańnie podzielone na mniejsze odcinki. Linki i odnośniki tutaj bardzo dużą uwagę zwracam na to, aby atelinki i odnośniki były wyróżnione. Standardowo powinny być niebieskie z podkreśleniem, a po wybraniu jak najeżdżamy kursorem powinny się zmieniać kontrastowo. Są niektóre ciekawe fundacje na przykład w Stanach Zjednoczonych, które dodatkowo jeszcze poświetlają na żółto, czyli po wybraniu widzimy gdzie jesteśmy. Dlaczego też te linki i odnośniki są takie ważne, jeżeli chodzi o kolor i o to, żeby się jakoś poświetlały, na przykład jest też fokus, ponieważ jest dużo osób, które posługują się klawiaturą i używają tylko tabulatora i idą po linkach. W ogóle nie przechodzą po stronie tak jak my. Dlatego im bardziej te linki są wyróżnione, tym łatwiej. Ja jeszcze będę mówiła o tym w późniejszej części, formularze. O tym będzie mówił pan Mikołaj, ja tylko chciałam powiedzieć proszę państwa, że jak się robi audyt to ta strona jest najczęściej sprawdzona. Jeżeli to jest strona, gdzie jest kontakt z klientem i my mamy wypełnić jakieś nasze damy i jest polecenie wszystkie pola z czerwoną gwiazdką są wymagane, a osoba nie widzi, to po pierwsze nie czerwonej gwiazdki nie zobaczy, a tym bardziej jak powiem za chwilkę są osoby, które nie rozróżniają koloru, koloru czerwonego nie zobaczy. Więc wtedy zamiast powiedzieć pola z czerwoną gwiazdką są wymagane, może lepiej napisać imię, wynawiasie wymagane, nazwisko, wynawiasie wymagane. Tedy każdy wie, które z tych pól jest naprawdę ważne. No i jeszcze jedna rzecz, o którą bym chciała tutaj państwa prosić to lokalizacja o programowania. Jeżeli już robimy na urtpresie te formularzy, to jeżeli ktoś się pomyli, to żeby informacja zwrotna nie wyskakiwała na stronie w języku polskim, na przykład w języku angielskim albo niemieckim, bo akurat producent wtyczki albo jakiegoś programowania innego wykonują w tym języku i to jest też niedopuszczalne. Pomyślmy sobie o osobach głuchych dla których język polski jest językiem drugim. To co dopiero jeżeli informacja zwrotna będzie jeszcze w innym języku obcym. Dlatego trzeba na to zwrócić uwagę, czyli lokalizujemy sobie to co tam umieszczamy. Tabele powinny być też dobrze zrobione, wszystkie nagłówki w tabelach. No i menu, na które należy zwrócić uwagę, żeby był odpowiednik kontrast w każdej zakładce. Takim razie proszę państwa, wybierając wtyczki ja chciałam państwu zwrócić uwagę właśnie na jedną, którą ja wybrałam. To jest ta pierwsza wupę accessibility helper. Dzięki niej ja mogę sobie każdą z tych zakładek, którą mam w języku angielskim przetłumaczyć na dowolny język. I w tym momencie jak mi się to pojawia się to osoba jak ma stronę w języku polskim to ma też wtyczkę w języku polskim. A nie musi zgadywać prawda co ma wykonać albo nie daj Boże zgadywać co oznacza każdy pikto gram na tej wtyczce. Więc to jest jedna z takich którą bym poleciła. Jak państwo widzą też po prawej stronie od razu jest spełnione zasada kontrastu jak wchodzę tutaj myszką wybieram sobie grafika w szarości na przykład od razu kontrastowo zakładka jest na biało, napis jest na czarno. Więc jest to bardzo dobrze widoczne. Jeżeli chodzi o standardy dostępności dlaczego mówimy o tym. Konsorcją W3C jak pojawił się internet 1995 rok zło zauważyło, że strony są robione po prostu no każdy jak chce. Nie było jakichś konkretnych standardów. Zaczęto się zajmować ujednoliceniem tego sposobu przekazywania informacji. I tak w maju 1999 roku wprowadzono pierwszy zakres standardów nazwany WCAG 1.0 z czasem jednak nasze urządzenia zaczęły być coraz bardziej zaawansowane pojawiały się przeróżne urządzenia mobilne 11 grudnia 2008 wprowadzono WCAG 2.0 na którym teraz my opieramy audyty i te standardy obowiązują wokół tego właśnie WCAG 2.0 W maju 2015 zwracam na to uwagę ponieważ w Polskach miała już mieć wszystkie strony dostępne a szczególnie urzędy no niestety to jest marzenie jeszcze daleko nam do ideału i jak to się dzieje u nas. W 2012 roku 12 kwietnia podpisano rozporządzenie w którym zobowiązuje się właśnie instytucje publiczne do tego aby strony były zgodne z WCAG 2.0 czyli z tym zakresem standardów. To zwraca Państwa uwagę, że to jest bardzo ważna rzecz ponieważ coraz więcej projektów unijnych musi przejść przez audyt. Jeżeli Państwo nie zrobicie strony zgodnie z audytem, projekt po prostu może całkowicie odpaść albo będzie trzeba zwracać pieniądze. Dlatego to jest bardzo ważne, jeżeli przyjmujecie Państwo zlecenie od osoby, która musi mieć projekt z środków unijnych. No i jesteśmy w czerwie z 2018 wchodzi WCAG 2.1 co prawda, jak robimy audyt, obieramy się na WCAG 2.0 ale tam poszło 17 nowych kryteriów sukcesu bardzo ważna wytyczna w drugiej zasadzie gdzie bardzo dużo zwrota się uwagę na aplikacje mobilne, o czym w trakcie wystąpienia jeszcze Państwu powiem. Tak wygląda dosłownie akronim WCAG 2.0 czyli Web Content Accessibility Guidelines. Mamy cztery zasady Perceivable Operable Understandable Robust. Te cztery zasady po prawej stronie widzą Państwo są podzielone na 12 wytycznych Czasami mówimy w porządzeniu jest to nazywane, że są to wymagania natomiast te wymagania te wytyczne są jeszcze podzielone na kryteria sukcesu na odpowiednich poziomach A, 2a i 3a. Na czym to polega? Przede wszystkim jak rozumiemy to WCAG 2.0 w tłumaczeniu polskim to wytyczne dla dostępności traści internetowych tak aby były bardziej dostępne dla szerszego grona użytkowników i tutaj mamy zakres osoby słabo widzące, głuche, niedosłyszące takie które mają trudności w uczeniu się na przykład właśnie z powodu dysleksji czy mają ograniczenia zaburzenia mowy i nadrażliwość na światło ale przede wszystkim na dole widzimy że powinny być to przede wszystkim strony bardziej przyjazne dla każdego użytkownika Jeżeli chodzi o polskie tłumaczenie i takie skrótowe podejście do tych czterech zasad to pierwsza postrzegalność tak jak widzimy tamto oko ale to jest właśnie to na co zwrócę dzisiaj państwu szczególną uwagę to na co my zwracamy uwagę jako osoby widzące to co postrzegamy na interfejsie czyli jak ten interfejs powinien być dostępny dla użytkownika jak powinna wyglądać szczcionka jak są paragrafy ułożone jak mamy te linki odnośniki jak etykiety się nam pojawiają i przede wszystkim jak są opisane ilustracje Druga to funkcjonalność tutaj bardzo dużo mówimy o nawigacji to jest to o czym państwu wspomniałam osoby które nie używają myszki posługują się tylko i wyłącznie klawiszem czyli tabulatora no i tutaj wchodzi klawiatura dlatego ta strona musi być odpowiednio przygotowana trzecia zasada to zrozumiałość to o czym mówię i język dlatego nie robimy tej mieszanki wielu kulturowej czyli strona po polsku a wszystkie inne rzeczy pojawiają się nagle po angielsku no i przede wszystkim powinna być pisana językiem prostym bardzo tutaj polecam ciekawe programy które zostały opracowane na uczelniach to jest Logios i Jasnopis gdzie możecie państwo sprawdzić zakres trudności swojej treści którą umieszczacie na stronie i ostatnia zasada to solidność gdzie należy sprawdzić czy strona jest rzetelna czy znaczniki atrybuty są odpowiednio umieszczone i to już jest akurat sprawdzane automatycznie na przeróżnych validatorach jeżeli chodzi o kryteria sukcesu to nieszczęśliwia ta literka a możecie państwo mylić z tą A plus A2 plus kiedy powiększamy czciąki no ale tak się akurat złożyło te poziomy A2 A i 3 A są podobnie oznaczone w języku angielskim jak państwo wyjdziecie na kryteria sukcesu to one na dole umieściłam państwu przykład nazywalne są jako level A natomiast jak mamy język polski to jest to przeniesiony jako poziom nas obowiązuje w trakcie badania w tytułach ten poziom A i poziom 2 A przede wszystkim poziom 2 A to jest ten który został wprowadzony w 2008 roku i do tego poziomu państwo powinniście dążyć czyli otwierając sobie tego typu standardy szukały wszystkiego co ma poziom 2 A i A poziom 3 A jest to najwyższy poziom dostępności no niestety ten jeszcze nas nie obowiązuje ale z tego co wiążą są dążenia do tego ten poziom przede wszystkim obejmuje język migowy bo na razie chyba finansowo i fizycznie nie jesteśmy w stanie doprowadzić do tego aby każdy film który umieszczamy na YouTube był zaopatrzony w język migowy ale jak widać są już organizacje które to wprowadzają jeżeli chodzi o następną część prezentacji to standardy dostępności chciałabym przede wszystkim państwu omówić przykłady w oparciu o zasady pierwszą percepcja jako osoba widząca tak jak państwo swoje strony projektujecie na co szczególnie zwrócić uwagę czyli musimy pomyśleć o tym aby nasz użytkownik dobrze widział i dobrze słyszał treści jeżeli je będzie czytać właśnie za pomocą technologii asystującej no i przede wszystkim żeby miał możliwość oddzielenia informacji od tła bardzo ważna rzecz jeżeli chodzi o współczynnik kontrastu o alternatywę tekstową i o tym o czym mówiłam czyli multimedia to jest ta nasza właśnie zasada numer 1 percepcja jak państwo postrzegacie na stronach to są różne mapy informacje jak państwo widzą ładne ilustracje, wykresy diagramy no i nasze różne przyciski w zakładkach jednak to co my widzimy to ta metafora góry lodowej to jest tylko jej czówek natomiast to wszystko co się dzieje w środków czyli w całym kodzie html o tym będzie mówił pan Mikołaj w jaki sposób osoba która używa technologii asystującej słyszy stronę bo przecież jej nie widzi tutaj chciałam nawiązać do znaków drogowych bardzo często jak umieszczamy jakieś obrazki to przecież na znakach też mamy dodatkowy napis czy jest to na przykład pazje z milautobusów czy jest to przejście związane z jakąś sygnalizacją nie umieszczamy tak pictogramów aby były one dwuznaczne ponieważ w różnych krajach ten sam pictogram może być różnie rozumiany i o tym właśnie mówi WCA AG21 dlatego mówi się teraz o większej sytuacji często Państwo coś wybieracie na booking.com tam jest bardzo dużo takich pictogramów i one są bardzo dwuznaczne dlatego należy o tym pamiętać w takim razie jeżeli mówimy o alternatywie tekstowej to po pierwsze jeżeli Państwu umieszczacie dyplomy przeróżne certyfikaty plakaty na stronach no tutaj trochę pracy nas czeka to wszystko co jest w treści w tym plakacie to jest tam zagnieżdżone osoba z czytnikiem nie dojdzie do tych informacji trzeba to powtórzyć i albo Państwo to przepisujecie poniżej czyli robimy tą tak zwaną transkrypcję albo możecie to stworzyć tak, że będzie to do pobrania w formie doka, TXT odetę, bo jest bardzo popularny i tam dałam trzy krepeczki i w różnych innych formatach można nawet to przygotować w HTML jaką dodatkową pod stronę z przeróżne formy ale to wszystko co na tych plakatach się znajduje musicie Państwu przepisać czyli chodzi o alternatywę tekstową atrybut alt Państwo bardzo często dodajecie te napisy i opisy, ilustracje do title do tej etykiety a to nie jest to samo czytnik tak idzie, że musi się natknąć na ten atrybut alt i po lewej stronie przygotowałam Państwu przykład gdzie jest mapka świata i nie ma tego alta co wtedy słyszy osoba z czytnikiem słyszy po prostu kod źródłowy 3, 4, 4, 2, 2, prawda i tę całą gamę tych znaczków które są w tym kodzie i na końcu JPEG to usłyszy ta osoba i proszę sobie teraz wyobrazić że robicie stronę dla urzędu gdzie jest 30 takich zdjęć albo 30 jakichś innych ilustracji i ta osoba w ten sposób odczytuje tą stronę no zniechęci się można też jeżeli to są tylko ozdobniki na stronie wrzucić tak zwany pusty alt i tam macie Państwo dokładnie jak się to robi czyli mamy alt pusty i dwa te znaki takie cudzysłowia wtedy czytnik nie przaskoczy ten obrazek ale to jest tylko i wyłącznie wtedy jeżeli to jest ozdobnik na przykład jakaś krestka albo jakiś kwiatek który nic nie znaczy natomiast wszystkie inne rzeczy które są związane z obrazami obowiązkowo muszą być opisane właśnie w tym atrybucie natomiast jeżeli po prawej stronie mamy dobry przykład mamy ilustrację która oprócz tego że ma swój kod źródłowy czyli file JPEG ma jeszcze alt dwa kolorowe motyle z rozporcartymi skrzydłami wśród kwiatów i potem usłyszę osoba która używa technologii asystującej więc jak w WordPressie mamy dodawanie obrazka i potem po prawej stronie macie Państwo do wpisania przeróżne rzeczy tam wystarczy do 300 znaków nie wyrazów ale do 300 znaków krótki opis oto guło do szczegółu i proszę używać kolorów i kształtów ponieważ bardzo dużo osób tak jak mówiłam traci wzrok po jakimś czasie to nie jest tak że wszyscy są niewidomymi osobami od urodzenia dlaczego jeszcze spółczynnik kontrastu jest ważny w standardach proszę popatrzeć to jest taka bardzo fajna aplikacja Color Contrast Analyzer jak Państwo to wpiszecie sobie w przeglądarki od razu się to pojawia jako grupa Paciello i teraz jeżeli mamy na przykład przyciski typu szukaj no to jeszcze ten czerwony na białym proszę popatrzeć tam mamy w środku jest ten spółczynnik kontrastu 4,61 do 1 a wymaganie jest 4,5 do 1 to jest minimum którego nie można już niżej zejść prawda więc jak jest szukaj taki kolor czerwony na białym on przechodzi bo ma 4,61 do 1 natomiast jeżeli teraz weźmiemy na przykład biały na żółtym albo żółty na białym z czym ja się spotykam i ja się dziwię że w ogóle coś takiego jest na stronach to jest nie do przyjęcia no i ten czerwony z czarnym proszę zobaczyć jak się zbada ten czerwony z czarnym to niestety nie przechodzi ponieważ spółczynnik tu po lewej stronie 4,45 do 1 nam się wydaje że to jest fajne ale niestety to nie jest zgodne ze standardami i jest za nisko ta aplikacja jest bardzo ciekawa ponieważ jak się tutaj zrobi display details to mamy bardzo dokładnie opis na jakim poziomie w ogóle jesteśmy i co przechodzi a co jest niezgodne także zawsze można przy okazji sobie zrobić taką powtórkę no i można jeszcze sobie tutaj rozwijać i te kolory sobie zmieniać to jest bardzo kontrastowe jeżeli chodzi o kontrast w zakładkach proszę popatrzeć najlepiej żeby to się wymiennie robiło czyli jak mamy białą zakładkę z granatowym napisem to potem po wejściu żeby się zamieniało odwrotnie biały napis na granatowym tle to wtedy od razu widać i proszę pamiętać że jak ktoś kto się posługuje tabulatorem przechodzi przez coś takiego to to się musi wszystko otwierać więc jeżeli mamy takie nie tylko zmyszki na co jeszcze chciałam zwrócić uwagę to droga okruszków bardzo pomocna ja zawsze jej szukam proszę popatrzeć ja też wiem które to jest tutaj linkiem ponieważ jest na niebiesko spodkreśleniem i wtedy nie szukam tego że to jest na czarno czyli jak mamy kolor tekstu na czarno to wtedy wyróżnijmy te linki na niebiesko jeżeli chodzi o kolory w tej aplikacji którą państwu podałam jest właśnie taka forma czy dany kolor jest postrzegany przez osoby z zaburzeniami rozpoznawania barw po po lewej stronie macie państwo przykład ilustracji gdzie są kolory oryginalne czyli to jest osoba która nie ma problemów druga ilustracja to jest tak zwana pronatopia tak widzą osoby które nie rozpoznają barwy czerwonej dlatego z tym czerwonym i zielonym na stronach proszę bardzo uważać one są po prostu niedostrzegane i nie wiem dlaczego jest taka moda czy jest na czerwono albo na zielono i jeszcze nie daj boże ten zielony jest taki bardzo jaskrawy trzecia ilustracja to deuteranatopia to są osoby które mają właśnie kłopoty z rozpoznawanym barwy zielonej mylą ją z czerwoną tak zwany daltonizm i ostatnia to jest trinatopia gdzie osoby w ogóle nie rozpoznają barwy żółtej i niebieskiej dlatego jak państwo coś umieszczacie to tą prostą aplikacją można wszystko sprawdzić to jest właśnie dzięki tej prostej aplikacji zrobiłam dla państwa takie zrzuty ekranu które widzą i to jak się robi audit to trzeba niestety ale właśnie tak dokładnie sprawdzać jeżeli chodzi o potrzeby użytkowników i ich preferencje to dzięki tym wtyczką które ja pokazałam państwo na początku osoba na przykład może sobie wybrać że chce widzieć tylko obrazy w kolorach monochromatycznych bo tak bardzo dużo osób lubi oglądać strony są też osoby które mają taką dysfunkcję że lubią oglądać stronę za pomocą tak zwanych kolorów odwróconych tak jak pozytyw negatyw ja widziałam taką osobę na studiach podyplomowych i widziałam właśnie że tej osoby się bardzo dobrze czytały strony w ten sposób i ostatnie to jest alternatywa tekstowa chciałam państwu pokazać my jako osoby widzące widzimy ale na przykład nagle internet działa bardzo wolno albo coś się dzieje nie tak i pojawia się państwu tylko tyle jeszcze raz jest ten krótki opis coś tu nie wchodzi nie widzimy obrazka ale ten opis się pojawia i my widzimy tylko ten opis natomiast jeżeli państwo dacie obrazki bez tego alta to osoba nic już nie zobaczy a tak przynajmniej usłyszy te alty prawda jeżeli my mówimy o sobie jak osoby widzące to widzimy obrazek a jeżeli nawet jak coś jest długo i się nam nie ładuje to mamy ten opis jeżeli chodzi o kontrast i odnośniki tu przykład z mojej strony to jest już archiwalna strona chciałam pokazać dlaczego to jest ważne od razu jak ja patrzę na tą stronę widzę aha na niebiesko są moje odnośniki z podkreśleniem czyli osoba słyszy link i ten odnośnik jest od razu w kontekście czyli ja nie robię czytaj dalej czytaj dalej czytaj więcej tylko osoba słyszy do czego ten odnośnik prowadzi ponieważ jest cały cały zwrot jest właśnie odnośnikiem także to bardzo pomaga jeżeli chodzi o pominięcie bloków i nawiązuje do nawigacji proszę pamiętać że jeżeli osoba korzysta z klawiatury i tylko naciska klawisz tab to nie musi przechodzić przez całe menu które często jest bardzo rozbudowane może przeskoczyć do treści albo do innej części tej strony wtedy stosujemy tak zwane skiplinki z języka angielskiego to się powinno pojawić u góry albo w lewę górnym roku ale na niektórych stronach widziałam że to też jest na samym środku na samej górze osoba wtedy słyszy albo po prostu widzi na przeskocz do treści i od razu tutaj nawiązuje do lokalizacji oprogramowania jak państwo te skiplinki robicie i w motywie one są po angielsku skip to content to proszę po prostu to przetłumaczyć żeby to było, jeżeli strony jak widzimy wydział filologiczny jest po polsku mam przeskocz do treści jeżeli mamy department of philology mamy skip to content no i potem jak mamy po rosyjsku to wszystko powinno ze sobą być synchronizowane nie tylko patrzymy na to, że jest w ogóle te skiplinki się cieszymy ale on też powinien być w danym języku danej strony i już powolutku zmierzam do końca mówiłam państwu, że wchodzą nowe standardy według WC AG 2.1 zwraca się uwagę na aplikacje mobilne dlaczego wybrałam taki przykład i mówiłam też o tych piktogramach jeżeli chodzi o lokalizację w ogóle stron to w różnych kulturach, różne piktogramy mogą być różne rozumiane te akurat, gdzie mamy media społecznościowe typu Twitter, Facebook, LinkedIn czy Google+, one są rozpoznawalne i wiadomo, że każdy będzie wiedział o co chodzi natomiast na co tu zwracam uwagę jeżeli na stronie będą one bardzo szare Państwo widzą, że one są prawie że niewidoczne, to co dopiero jak tego, ta strona otworzy się na telefonie i jest jeszcze taka pogoda jak dzisiaj słoneczna, to osoba już w ogóle nie zobaczy którą właśnie ma ten piktogram wybrać żeby się przenieść na jakąś pod stronę druga rzecz bardzo ważna na to też zwraca uwagę WCA AG 2.1 jeżeli już Państwo stosujecie piktogramy to czerwoną szałką zaznaczyłam, żeby pod spodem dopisać do czego się odnosi ten piktogram niekoniecznie ten ludzik na tle tej tablicy będzie rozumiany tak samo wszędzie jako program tekstu dopasowany więc jak mamy tego typu piktogramy podpisujmy, dlatego zrobiłam na dole piktogram z kołami zębatymi które normalnie mogłyby być rozumiane przez Państwa w różny sposób, tak jak tu siedzimy to mogłoby być 30 różnych pomysłów co mogą oznaczać taką zębatę dlatego pod spodem np. ustawienia to już jest wprowadzenie naszego użytkownika co znajdzie pod tym odnośnikiem, pod tym linkiem także to WCA AG 2.0 to było oparte wcześniej, prawda na stronach internetowych, laptopy teraz idziemy już coraz mniejszy stronki typu na telefonach, na iPadach te tablety przeróżne są rzeczy, na których ja mogę badać ten układ i zwraca się uwagę na kolorystykę no i na taką właśnie funkcjonalność poza to jeżeli chodzi o dostępność i użyteczność sprawdzajmy zawsze zanim Państwu wypuścicie stronę czy jest ona responsywna i jak się układa na różnych urządzeniach do tego są bardzo fajne dodatki do chroma gdzie możecie Państwo tą stronę przeobrażać w różne sposoby i wtedy Państwo sprawdzacie czy wszystkie elementy, które dodajemy te bloki właśnie w WordPressie one się ukadają tak ani inaczej czy ta kolejność ułożenia jest prawidłowa to jest bardzo ważne jeżeli chodzi o jakby podsumowanie mojej prezentacji, jakie są wnioski przede wszystkim proszę Państwa zauważyć w jakim tempie to idzie WCAG 1.0 99 rok już na całym świecie myślano o jakichś standardach u nas dopiero się pojawiać zaczęły 2012 roku w formie rozporządzenia natomiast w środkowej części tej tutaj ilustracji zapisałam Państwu ostatnie wyniki badań z czerwca 2017 roku w Polsce rośnie liczba osób korzystających z urządzeń przenośnych ponad 20 milionów dlatego WCAG 2.1 dodaje 13 tutaj mamy już wytycznych bo doszło nam 17 nowych kryteriów sukcesu no i dążenie jest do WCAG 2.2 ale ogólnie w przyszłości będzie bardzo wiele zmian dlatego jeżeli teraz nie zaczniemy tego wdrażać to i tak i tak proszę Państwa nie ma od tego odwrotu dlatego, że te standardy są cały czas ulepszane dodaje się nowe kryteria sukcesu takim razie proszę Państwa podsumowując to było bardzo krótkie takie przybliżenie Państwu zasad wytycznych i kryteriów sukcesu w projektowaniu stron na WordPressie proszę pamiętać, że to co Państwo umieszczacie musi być dostępne dla osób które mają kłopoty ze wzrokiem dla osób na przykład z dyslekcją żeby te czcianki były bezszerwowe, bezbędnych ozdogników, odpowiednim kolorze i kontraście osoby głuche i niedosłyszące aby miały napisy do filmu i transkrypcję czyli jakaś wersja która jest tylko i wyłącznie w formie takiej audio musi być zawsze dodana w formie takiej pisemnej treści następnie osoby z dysfunkcją motoryczną to te osoby, które bardzo często korzystają właśnie z klawiatury i posługują się klawiszem tabulatorem tak jak Państwu wcześniej mówiłam nie osoby używające czytnika ekranu sągamy technologii asystujących i osoby autystyczne to wszystko razem trzeba niestety brać pod uwagę żeby ta strona wyglądała i przy okazji też była dostępna czyli nie tylko sama grafika bo tutaj często jest taki dysonans pomiędzy osobą która projektuje stronę a później osobą która programuje jeżeli mówimy o takich stronach które są dedykowane no niestety trzeba jakoś na etapie wymyślania tej strony już trzeba współpracować z osobą która zajmuje się dostępnością wtedy naprawdę zmniejsza się koszty i problemy w dalszej części jeżeli pytania to teraz jest moment na to można też się ze mną skontaktować na facebooku mam tak samo jak się wpisze Izabela Mrochem mogą Państwo zadać pytania nie ma problemu mam też tą stronę którą zaraz będę przerabiała