 Witam Państwa bardzo serdecznie. Nazywam się Mikołaj Rodnicki. Po prawa słyszę, że jest naprawdę sporo ludzi. Chociaż Państwa zbyt dobrze nie widzę, ponieważ może tego nie widać, ale jestem osobą bardzo sobą widzącą. Nie noszę augularów, ale to jest taka wada wsiadkówki, która niestety uniemożliwia mi zobaczenie Państwa mimiki. Także na wstępie powiem, że jeżeli będą jakieś pytania, przypuszczam, że pod koniec to oczywiście tutaj pewnie mikrofon i tak będzie przekazany, ale jakby ktoś potrzebował ewentualnie podnieść rękę w kontekście takim zgłoszenia się do odpowiedzi, to ja oczywiście tego nie zobaczę. Natomiast mówię, słyszę, że jest tutaj całkiem sporo osób. Ja to, co przed chwileczką Państwo mieliście okazję usłyszeć taki powiedzmy teorii od pani dr Mrohen. Ja Państwu pokażę, jak to wygląda właśnie z perspektywy osoby z niepełnosprawnością wzrobą. Także to będzie taki dosyć case study na przykład, na takiego egzemplarze, jak tutaj przed Państwem stoi i do Państwa mówi. Także oczywiście będzie to case oparcie o stronę na WordPressie, a do tam Państwu tyle, że kiedy zaproponowano mi tutaj wystąpienie, ja już od jakiegoś dłuższego czasu, bo również też jestem i blogerem, i youtuberem jestem, także troszeczkę treści swoich jakichś przemycam różnymi kanałami. Prowadza takiego bloga już od kilku lat, 6dots.pl, a głównie o technologiach asystujących dla osób niewidomych. Blog iaccessibility.pl, który jest, oczywiście też są to blogi na WordPressie oparte, który jest poświęcony głównie urządzeniem firmy EpoLogo z logiem na dyrezyjonego jabłka, ponieważ jestem z jednej strony fanem, ale z drugiej strony użytkownikiem, dlatego że właśnie są to urządzenia, które najlepiej się sprawdzają w przypadku tych ułatwi indostępów, które mają po prostu budowane. No i ten dzisiejsze wystąpienie zmotywał mnie do tego, żeby w końcu trochę na potrzeby, takie jak słyszę na szkoleniach właśnie, bo ja na co dzień mówię, ja udytuję strony i szkole, jest bardzo właśnie dużo kwestii, takie jedno pytanie, nawet tutaj się pojawiło, czy są jakieś właśnie strony, na których polskie, na których można by o tej dostępności, nie tylko tak, jak co, encyklopedycznie, ale właśnie tak poznać ją troszeczkę bardziej z przykładu. No i tak się złożyło, że zmotywał mnie po prostu ten dzisiejszy, to dzisiejsze wystąpienie do tego, żeby w końcu uruchomić swój serwis o adresie a11y.report, czyli record dostępności. Tak się będzie to nazywać i jest już pierwszy wpis i ten pierwszy na bazie tego pierwszego wpisu zrobimy sobie właśnie dzisiejszą prezentację. Skąd się wziąło to słowo w ogóle a11y? To jest tak naprawdę tak zwane numeronim, czyli skrót z numerkiem w środku. Dosyć powszechnie w informacji to gdzieś tam stosowane. Przypuszczam, że jeżeli słyszeliście również o tłumaczeniu stron na różne języki, to jest taki skrót internationalization, pisana jako i18n. I to wszyscy wiedzą, że chodzi o ten wyraz. A w przypadku wyrazu a11y wiadomo, że chodzi o osobo accessibility, czyli a w środku 11 literek i y na końcu. No i pod takim adresem właśnie od dzisiaj uruchomiłem serwis a11y.report z angielskiego. Po polsku serwis oparty na WordPressie nazywa się po prostu raport dostępności i będę starał się umieszczać tam różne rzeczy związane z dostępnością nie tylko tą taką stronę internetową, ale również taką codzienną, ponieważ ja na co dzień tego typu rzeczami też się zajmuję, no ze względu również na to, że sam jestem osobą z niepełnospodnością z tego świata cyfrowego dzisiaj korzysta. Także zobaczmy, ja tutaj będziecie wszyscy słyszeć to wszystko co się dzieje u mnie na ekranie, ale celowo właśnie nie pokażę wam tego. Zobaczycie sobie tą stronę, gdzie już na nią wejdziecie i zobaczycie, czy jest to zgodne co się, że tak mówimy za chwileczkę, usłyszycie, tak? Także jeżeli ewentualnie macie urządzenia mobilne w tej chwili ze sobą, jeżeli chcecie, możecie już na stronę sobie wejść to już tak niezależnie od wszystkiego, a 11fig.report możecie sobie to wyświetlić. Natomiast ja celowo właśnie nie będę pokazywał, co się dzieje na tutaj, na ekranie po prostu to wszystko usłyszycie. Czyli zaproszę was do świata takiego jak jagowice tak naprawdę, czyli ja bardzo sobą widzę, coś tam jeszcze widzę głównie tylko dzięki temu, że stosuje bardzo wysokie kontrast i wolę czytać jasny tekst na ciemne tle, stąd też jak pewnie zauważycie taki wygląd tego motywu, jest to standardowy motyw 2017 z drobnymi modyfikacjami, natomiast w wersji tak zwanej dark mode, czyli jasny tekst na ciemnym tle. Jak to wygląda w praktyce, kiedy wejdziemy na taką stronę, za pomocą czytnika ekranu, w ogóle dwa słowa na temat czytników ekranu. Czytnik ekranu to jest taki program, czy to na komputerze, czy obecnie również na urządzeniu mobilnym umożliwie o sobie niewidomej albo tej, która ma trudności z widzeniem obrazu używanie urządzeń mobilnych. Ja jeszcze tylko na chwileczkę przejdę tutaj do ogólnego, to co słychać z tego typu przypomnienia. Jestem teraz na iPhoneie i teraz za pomocą gestu odpowiedniego, który wykonuje jednym palcem w tym przypadku na ekranie. Słychać, słychać to tak? Ja przechodzę sobie po prostu wszystkich ekranów. Przejdźmy sobie kawałeczek do ekranu Safari Safari A to z programem dwukrotnie otwiera nam się stronę. Wcześniej jeszcze przed tym tytułem mamy tak zwany Słychać, przejdź do treści to jest ten skiplik, o którym pani doktor przed chwileczką mówiła bo w motywie 2017 automatycznie mamy taki skiplik dodany z automatu, tak zwany przejdź do treści gdybym mógł kliknął, od razu byśmy przeszli do głównej treści strony, natomiast na razie przejdziemy sobie po prostu odpowiednimi gestami voice-over'a po kolei po wszystkich elementach. Zagładamy, że osoba niewidoma Sajbierzaz chodzi na tą stronę i chce się rozejrzeć. Co słyszy? Rapor dostępności na główek poziomu 1, odwiedzone. Rapor dostępności na główek poziomu 1, odwiedzony, łącze banner, punkt orientacyjny bardzo dużo informacji, ale to wszystko właśnie czysting ekranu wziął sobie z kodu strony, tak? Czyli że jest to na główek poziomu pierwszego, że jest to łącze, że jest to również banner, bo tutaj również też elementy HTML 5 są odczytywane, jedziemy dalej. Pisze Mikołaj Rodnicki, znak pod ok. 11y Reput. No i to jest pod tytuł, akurat tego vloga, pisze Mikołaj Rodnicki, czyli ja bo tak sobie to tak na razie dopisałem taki pod tytuł, że pisze ten raport dostępności i tutaj na łamach tego vloga będą te różne publikacje. I zobaczymy, co mamy dalej. Menu, przycisk. Menu. Navigacja, punkt orientacyjny, zwinięte. Menu, przycisk. Tak, mamy menu przycisk, punkt orientacyjny, navigacja, że jest zwinięte, tak? Czyli jest to również taka informacja, ponieważ wyświetla ono się w tej chwili na wersji tak zwanej responsywnej, gdzie to menu jest zwinięte po prostu i dopiero dwukrotnym kliknięciem. Menu, górne menu, navigacja, punkt orientacyjny, rozwinięte. Rozwinęło mi się to menu, czyli czytnik ekranu też przeczytał, że jest rozwinięte. To, że ono jest zwinięte, rozwinięte to jest oczywiście zasługa programu instruktyw tego motywu, że oni zrobili w to menu w taki sposób, że nie tylko nosi wizualnie, rozwija na ekranie, ale również czytnik ekranu jest w stanie stwierdzić, jaki jest jego stan, czy jest zwinięte, czy jest zwinięte, tak? W naszym przypadku na razie sobie je zwinięmy, bo nie będzie potrzebne w większej później. Menu, górne menu, navigacja, punkt orientacyjny, zwinięte. Zwinęło się. Jedziemy dalej. Wpisy, nagówek poziomu 2. Wpisy. Wpisy, nagówek poziomu 2, banner punkt orientacyjny, czyli czał czas widzimy, że tutaj HTML5 jest stosowane, ale również właśnie mamy poziom nagówka 2. Poziom nagówka 1 był czytu całego serwisu raport dostępności. Poziomem nagówka 2 jest w tej chwili słowo wpisy, tak? Czyli nie widząc strony wyobrażając sobie te poziomy nagówków, troszeczkę podobnie jak w książce, tak? Czyli tytuł książki nagówkiem poziomu pierwszego, czyli najważniejszy, najważniejszy też nagówkę poziomu pierwszego, potem niżej załóżmy rozdziały nagówkiem poziomu drugiego i pod rozdziały nagówkiem poziomu trzeciego, tak? Byśmy mieli w książce, nie? I troszeczkę to jest podobnie. Dzięki temu osobom, osoba nie widoma może się zorientować jak na treść jest hierarchicznie ze sobą powiązana, czyli nadana jest od nas struktura temu. A druga rzecz to jest to, że jak za chwileczkę potem państwu powiem mianowicie można za pomocą w czytniku ekranu ustawić funkcje nawigowania po konkretnych rodzajach treści. Tak? Mogę właśnie po nagówkach. W tym momencie ja mogę bardzo szybko po tych nagówkach sobie przejść. Dobrze, jedziemy dalej. Opublikowanego artykuł w rektorium tecyjnym. I mamy dalej też ten tyhatem okrętygo. I to jest tytuł tego artykułu, tak? Potem mamy oczywiście, tak zwany wypić, ten tak zwany excerpt. I to jest wstępi do tego artykułu. Idziemy sobie oglądać artykuł określimy. Teraz zobaczymy co mamy dalej. I to słyszycie, że na raport dostępności nagle przestał być nagłówkiem poziom pierwszego. Dlaczego? Ponieważ zmienił się kontekst weszliśmy teraz do artykułu i motyw 2017 działa w taki sposób, że jeżeli jesteś na stronie danego artykułu danego wpisu to nagłówkiem poziomu pierwszego już nie jest tytuł naszego bloga, ale No właśnie, bo w tym momencie najważniejszym elementem czołowym w hierarchii jest tytuł tego artykułu. Jesteśmy na stronie tak, tak to wygląda. Także zmieniła się nam troszeczkę hierarchia, ale tylko dlatego tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, tylko dlatego, że jesteśmy już na konkretnej podstronnie. Tak działa w tym momencie motyw 2017 i to jest też działanie bardzo protestownościowe. Czyli zmienił się nam poziom nagłówka, ale dlatego, że zmienił się nam troszeczkę kontekst. Jedziemy sobie dalej. No i dobrze, jedziemy sobie dalej. Do dzisiejszego wystąpienia przygotowałem dwa przykłady. Początek, listę. O, mamy listę, tak, czyli też mamy jakąś listę wypunktowaną. Złą stronę, mocy. Złą stronę mocy, przygotowałem jeden link i drugi. Dobrą stronę, mocy. I dobrą stronę mocy. Także zobaczę sobie co to są w ogóle za strony, które przygotowałem na dzisiejszą, na dzisiejszą prezentację. Wejdźmy sobie na początku na tą złą stronę mocy. Złą stronę, mocy. Odwiedzone, widel dostępny. Złą stronę. Adres. A11y, pisze Mikołaj Rotnicki, znak umymu przecisk. Złą stronę, mocy. Na główek, witam wszystkich na złej stronie, mocy. No, wejdź, witam wszystkich na złej stronie, mocy, zobaczymy co tam na nie jest, tak? Także cały czas, oczywiście, wy tylko słyszycie, tak? Czyli jesteś postaw... Można powiedzieć postawieni w taki sam sposób, jakby osoba niewidoma właśnie korzystała z tego typu strony i słyszycie to tylko i wyłącznie. Jesteście w stanie sobie tego wyobrazić, tak? Także, jak zauważacie też jest potrzebna bardzo duża uwaga, że próbuję się zorientować w tej hierarchii nagłówków, rozmaitych elementów i tak dalej. Oczywiście każda osoba niewidoma ma swój sposób poruszany się po stronach, tak? Niektóre osoby wystarczą, że kilka linii już przeczyta i już przechodzą gdzieś tam dalej, bo to ich nie interesuje. Nie muszą całej strony od deski, dla deski przeglądać, ale ta strona akurat złej strony mocy, którą chcę na samym początku pokazać, zbiera wszystkie takie przykładowe, najczęstsze błędy, które mogą się pojawić i świadczą właśnie o kiepskiej dostępności albo w ogóle niedostępności danej treści. Zobaczmy, co my mamy na tej złej stronie mocy. Kto to jest? Nagówek poziomu 4. Nagówek poziomu 4, kto to jest? A przed chwilą słyszeliście, że tytuł był nagłówkiem poziomu pierwszego. Nagle z nagłówką poziomu pierwszego następuje po nim nagówek poziomu 4. Coś tu jest nie tak, brakuje nam nagówka poziomu 2, nagówka poziomu 3. Czyli co się pojawia? Tak zwana dziura, hierarchii nagłówków. I to jest kolejne. Jak audytor powiedział, to jest błąd, bo po nagłówku poziomu pierwszego, który jest tytuł, powinien nastąpić treść nagłówka poziomu 2, a nie 4. I w tym momencie osoba niewidoma mówi sobie tak, no to chyba coś jest nie tak, bo nie wiem, gdzie się wspomniany nagówek poziomu 2 i 3, gdzie one są. Może ich nie ma, może one są, nie wiem. A może rzeczywiście jest źle, po prostu to zrobione. No i rzeczywiście w przypadku ja celowo tutaj wprowadziłem błąd. W tym przypadku powinno być to inaczej zrobione, nie powinno być to nagówkiem poziomu 4, tylko nagówkiem poziomu 2. Jedźmy dalej. 402 podkreślenie, x podkreślenie, 599, 8G. Obrazek. Ok, jest obrazek. Jakaś dziwna liczba, tak? 402 podkreślenie, x podkreślenie, 599, 8G. I co taka biedna osoba niewidoma może z tym zrobić, tak? Ona może się tylko podrapać w głowę. Można by się domyśleć, ale tylko ktoś, kto dosyć dużo chodzi po internecie, że to jest oczywiście nazwa pliku, która może wskazywać na to, że sobie w nazwie pliku użył po prostu wymiarów tego obrazka, tak? Być może, a może tak nie jest. Może sobie tak ktoś przypadkowo dał, tak? Ale to jest dla nas żadna informacja, tak? No, ja nie jestem w stanie jako osoba z dysfunkcją z rok ustwierdzić, co jest na tym obrazku, tak? Bo w tekście alternatywnym nie ma nic. Najczęściej to działa w takim smużu w tekście alternatywnym, jeżeli nie nadmy nic, albo w ogóle tego atrygu tu nie dodamy, no to w tym momencie niestety osoba niewidoma takie coś usłyszy. Ale też spotykam się również z praktykami takimi, że ktoś umieszcza taki obrazek o takiej o takiej nazwie i zapomina o tekście alternatywnym w momencie dodawania do WordPressa po prostu jest kopiowany do tekstu alternatywnego również ta nazwa pliku, tak? Co zacznie jest prawidłowe. Tekst alternatywny jest, ale on w tym przypadku jest po prostu niepoprawym, tak? Bo osoba niewidomowała w dalszym ciągu nie wie, co jest na tym obrazu, tak? Przypuszczam, że osoby, które już gdzieś tam na tym mój serwis wiedzą, co tam jest na tej stronie, ale na razie jeszcze niech nie zdradzają, bo to powiem sobie mówiąc o dobrej stronie mocy, no ale zobaczmy, co mamy dalej. Źródło Wikipedia. Okej, źródło Wikipedia, czyli najprawdopodobniej ktoś jedna obrazek dodał z Wikipedia i taka jest po prostu treść dodana w tekście. Jedziemy dalej. Odpowiedź na główek poziomu 6. Mamy jakąś słowa odpowiedź na główek poziomu 6, ale co to jest? Na główek poziomu 6 usłyszyliśmy, tak? Poprzednio był 4, czyli znowu jest dziura w nawigacji, tak? Nie dość, że nie ma na główka poziomu 2 i 3, bo od razu jest prześle czwórki, to tutaj do jednej między tą czwórką a szóstką nie ma piątki. Znowu jest dziura w nawigacji. Więc to trzeba będzie wyprostować. Formularz odpowiedzi. Jest jakiś formularz odpowiedzi, bo tam był opowiedziana odpowiedź. Formularz odpowiedzi. Zalaczymy, co mamy. Powiedział początek formularza. Jedziemy dalej. Tytuł obrazu, pole tekstowe. Stuk nie dwukrotnie, aby edytować. Czyli jest to w pole formularzu. Chodzi o tytuł obrazu, najprawdopodobniej chodzi o ten obrazek, który przed chwilą żeśmy usłyszeli tą nazwę, tak? Ale dalszym ciągu ja nie jestem w stanie powiedzieć jakiś tytuł tego obrazu, bo teksto alternatyw tego regionu niestety tutaj nie uświadczyłem. Zobaczymy dalej. Autor. Jaki jest to, bo autor, ale co to jest? To ja to wziął wywiedzić. No jest autor, a gdzie jest to pole tekstowe? Pole tekstowe. Koniec formularza. No jest dopiero na następne, tak? Ja jako zaawansowany użytkownik mogę powiedzieć, że tu jest coś nie taky z etykietami. To znaczy ta pierwsza etykieta, ja się cofam na chwileczkę. Autor. Tytuł obrazu, pole tekstowe. Tu jest ok. Tytuł obrazu, pole tekstowe, tak? Ale to... Autor. Mamy autor, jakąś osieroconą etykietę czy coś, jakiś napis. I potem już pole tekstowe. To nie jest związane programistycznie z tym polem, tak? Czyli jest błąd gdzieś tam w HTML-u. Ta... Ten napis autor, podpis do tego pola nie jest programistycznie związany, nie jest to etykieta. Czy jest to kolejny błąd, tak? Jedziemy dalej. Pole oznaczone na czerwoną sądę maganę. Pole oznaczone na czerwoną sądę maganę. Bo słuchaj, kiedyś pole jest czerwone? Nie było, nie? No to mamy problem, bo ja nie wiem, które pole jest czerwone, tak? I nie wiem, że ona jest wymagana. I nie wiem, czy pole autor, które w ogóle jest etykietowane, czy pole dytuł. No i mam problem, tak? Jeszcze wypowiedziana jest właśnie oznaczone kolorem, tak? To jest właśnie, to nie dopuszczalny. Jeszcze tym kolejnym czerwonym, którego zakazała pani doktor Murachek używać, tak? Więc po prostu mamy błąd na błędzie i błędem pogania, tak? Jedziemy dalej. Kalendarz na główek poziomu 3. Kalendarz na główek poziomu 3. Przedtem tu na główek poziomu. W tym nagówkach się w ogóle pogubiłem, więc może nie zwracajmy w tej chwili uwagi na te nagówki, ale mamy słowo kalendarz. Zatrzymy, co tam jeszcze dalej mamy. Poniedziałek, wiersz 1. Kolumn na 1. Początek tabeli. 5 wierszy 7 kolum. 5 wierszy 7 kolum. Poniedziałek, no, może to jest jakiś kalendarz. Jeźdźmy sobie dalej w ramach tej tabeli. Storek, kolumn na 2. Środa, kolumn na 3. Piątek, kolumn na 4. Piątek, kolumn na 5. Sobota, kolumn na 6. Niedziela, kolumn na 7. Jeden, wiersz 2. Kolumn na 2. Trzy, kolumn na 3. Cztery, kolumn na 4. Są jakieś liczby? Pięć, kolumn na 5. Sześć, kolumn na 6. Siedem, kolumn na 7. Osiem, wiersz 3. Kolumn na 1. Bo tu myślej, że tak jest. Ale jakim dnią tygodnia one są przypisane? No nie mam zielanego pojęcia. Dlaczego? Dlatego, że to jest tabela, która nie ma prawidłowo zdefiniowanego wiersza nagówka. A tutaj, w przypadku wiersza nagówka, jest są dni tygodnia, poddziałek, wtorek, środa, czwartek, piątek. Tak że ta tabela jest nie do końca ok i dostawnie zrobiona. Tak? Brakuje jej po prostu tej informacji. Jedziemy sobie dalej. Jedziemy sobie przez te... 22, 27, 28, kolumn na 7. Koniec tabeli. Dojechaliśmy do końca tabeli. Zobaczmy, co mamy dalej. Zapraszam na film. Czekamy, jaki film. Dany boi, łączę. Dzień się chyba nazywa dany boi. Do obejrzenia, przycisk, udostępnij. Pokazuj okno wyskakujące. Tutaj mamy akurat wrzucony player YouTube. Odpusz, przycisk. Próbujmy odtworzyć fragment. Odtwórz. Zielu dłoch, kanałiem odtwórz, przycisk. Odtwórz. Jeżeli będzie dobry internet, mam coś. Odtwórzę, jak nie? Zielu dłoch, kanałiem odwórz, przycisk. Odtwórz. Nie chcę nam odtwarzać. Jeszcze raz spróbujemy. Zielu dłoch, kanałiem odwórz, przycisk. I zapraszamy. Bidę. Spoknij dwukrotnie, aby przełączyć elementy sterujące. No i sobie leci jakiś film. Polecam dobrze obejrzeć, bo zadam kilka pytań do tego filmu, tak? Ale na razie co? Słyszymy tylko muzykę. Nie tylko dyle. Jeszcze chcę, tylko poczekamy. Więc jest jakaś treść. Słyszymy. Ja słyszę jakieś kroki. Słyszę, przynajmniej to jest muzyczka. One są dość cicho, ale możecie mi wierzyć, że słyszę jakieś kroki. Jakiś samochód. Słyszę na jakiejś ulicy, pewnie to się dzieje. Coś tam zaszaleściło. Jakieś metal. Ktoś chyba strzela z jakiejś broni. No dobrze, a to ja jestem w stanie tylko to usłyszeć, tak? Głośność. Zacznijmy sobie. Jest film umieszczony, natomiast ja mam problem z zrozumieniem tego, co jest na tym filmie, tak? Bo to jest film, który nie posiada audiodeskrypcji, czyli tej techniki ułatwiającej osoby niewidomej zrozumienie tego tej treści. Żydu kanał YouTube wytwórni semaword. Że stąd się wziął ten film, tak? Mogę jeszcze Wam tylko dodać to przynajmniej osoby widzące, które wejdą sobie na tą pod stronę tą złą stronę mocy przypuszczam, potwierdzą, że ten napis źródło kanału YouTube wytwórni semaword jest bardzo bladą czcionką zrobiony. Jego prawie w ogóle nie widać, bo od strona jest ciemna, tak jest ciemny i to jest też przykład niedostępności korzystycznej, także jest to po prostu zła strona mocy, także może ją opuśćmy i przejdźmy na dobrą stronę mocy i mamy jeszcze link powrót, ale do czego nie do końca wiem, więc to też jest nie do końca właściwa treść, to sama powrót, a bo nie wiem do czego ja wracam, więc ten link powinien być trochę lepiej opisany, ale wróćmy do czegokolwiek. Wróciliśmy do artykułu po prostu stron opartych na potrzeby dzisiejszego wystąpienia przygotowałem dwa przykłady to przejdźmy może na tą dobrą stronę mocy i zobaczmy, co tam słychać adres, dobra strona, mocy nagłówek poziomu 1 i zobaczmy co mamy nagłówek poziomu 2 i znowu mam chyba tą samą strukturę kto to jest nagłówek poziomu 2 czyli tutaj widzimy, że mamy już prawidłową strukturę nagłową ponieważ tytułem jest dobra strona mocy natomiast nagłówkiem poziomu 2 następującym poniem jest ta słowo kto to jest i tam, jeżeli dobrze pamiętacie ze swojej strony mocy był obrazek bardzo niedobrze opisany, czy może na dobrej stronie mocy ten obrazek jest dobrze opisany posuwajmy czyli my jesteśmy w stanie teraz odpowiedzieć kto to jest na tym obrazku bo pytanie było, kto to jest czy ja dzięki temu, że jest text alternatywy jestem w stanie stwierdzić że jest to Mona Lisa obraz Leonarda da Vinci czy są jakieś osoby, które otwarły sobie tą stronę na urządzeń mobilnym i jest to Mona Lisa no to świetnie także jest dobry tekst alternatywy tak, jego nie widać oczywiście, bo on jest zakodowany w atrygu dzialt ale każdy z was dodając obrazek do WordPressa czy do strony statycznej, czy do wpisu oprócz pola tytuł oprócz pola, gdzie to ma linkować jest pole tekst alternatywny i tam właśnie musicie wpisać się w tekst alternatywny czyli to, co powinno się znaleźć co jest na tym obrazku, aczkolwiek jest, czy jest bardzo często ważny kontekst tutaj akurat jest kontekst taki no demonstracyjny, można by powiedzieć natomiast co do zasady to jeszcze wam powiem taką rzecz że jeżeli będziecie umieszczać obrazki zawsze jest to mniej z kontekst całości jeżeli dla przykładu, tak jak tutaj pani doktor Nocher opowiadała o sytuacjach, kiedy umieszczacie plaka, takie imprezy ale oprócz tego robicie całą transkrypcję tego pod tym plakatem całościową w HTML normalnie to w tym przypadku w tekście alternatywnym wystarczy napisać plaka takie imprezy już, nie trzeba tego powtarzać w tej treści w tekście alternatywnym ale gdyby była sytuacja taka, że będzie tylko plakat bez tego, bez tej transkrypcji to no nie jest to polecane, ale takim powiedzmy no udostępnieniem tego plakatu będzie chociaż umieszczenie no w miarę możliwości całej tej informacji w tekście alternatywnym, chociaż lepszym rozwiązaniem jest umieszczenie całej informacji normalnie w otwartym tekście w tekście alternatywnym plakat takiego a takiego wydarzenia, żeby osobę nie widziała że ten plik jest tym plakatem i tyle zobaczmy dalej źródło, wiki, te białe to myśmy, że to już było wszystko dostępne odpowiedź, nagłówek poziomu 3 odpowiedź nagłówek poziomu 3 czyli tam był nagłówek poziomu 2 czyli wiemy już, że ta treść odpowiedź z nagłówkiem poziomu 3 to jest jakby pod hierarchicznie, pod tym kto to jest, tak bo kto to jest na tym obraz, tak jedziemy sobie do tego, najprawdopodobniej w formularze zobaczmy formularz odpowiedzi, początek formularza formularz odpowiedzi, początek formularza i co mamy dalej gwiazdka, pole wymagane czyli tekstem oficjalnie powiedziane, że te pola, które mają gwiazdkę, ale wyraźną gwiazdkę to jest również dla osób widzących ma informacja to, że są to pola wymagane czy już na wstępie mam powiedzieć to, że są to pola wymagane czy już na wstępie mam powiedzieć nie na końcu, tak jak było w poprzednim formularzu tylko już na wstępie mam powiedziane, że z jednej strony owszem gwiazdką czyli wizualnie są to pola oznaczone jako wymagane ale zobacząc, żeśmy na pierwszego pola Tytuł obrazu gwiazdka pole tekstowe, wymagane Tytuł obrazu gwiazdka wymagane, czy ja również tam dodałem atrybut required w tym polu, bo to są nowe atrybuty dla HTML5 i czytnik ekranu automatycznie obczytał, że jest to pole wymagane oprócz tego w opisie też dałem oprócz tego w opisie też dałem informację z gwiazdką, że dwutorowo tą informację przecałem na pewno nie kolorem czerwonym, tak na pewno nie przekazujemy informacji istotnej kolorem, a tym bardziej czerwonym, zobaczmy dalej Autor, pole tekstowe, koniec formularza i tu jest poprawiona, autor pole tekstowe koniec formularza, tak czyli ta etykieta, która była wcześniej ją słyszeliście jedno autor, tak rzeczywiście ma prawidłowo teraz przypisa na tego formularza ja jestem w tej chwili w stanie powiedzieć że ten formularz ma prawidłowo zrobione etykiety, wiem że pole tytuł jest wymagane i że ja mam je uzupełnić ja muszę je wyuzupełnić, tak również z poziomu uczetnika ekranu tak, że to jest prawidłowo w tym momencie zrobiony formularz, tak, tutaj akurat pamiętam to, że ten formularz akurat nie ma przycisku wyśli, ale tutaj głównie chodziło mi o skupienie się na tych dwóch bolach edycyjnych zobaczmy dalej kalendarz, jak mówiłem w poziomu 2 mamy ten osławiony kalendarz, pamiętacie że to była tabela, tak i teraz zobaczmy jak to jest na dobrej stronie mocy zrobione poniedziałek, wiersz 1, kolumna 1 początek tabeli 5, wiersz 7, kolumny ok, mamy podobne kolumna 1, środa, kolumna 3 czwartek, kolumna 4, piątek kolumna 5, sobota kolumna 6, niedziela, kolumna 7 jeden, niedziela, wiersz 1 jeden, wtorek poniedziałek, jeden, kolumna 1 o, i słyszycie, że mamy wartość 1 i mamy odczytane, że poniedziałek wtorek, kolumna 2, środa 3, czwartek, czwartek 4, piątek, 5, sobota 6, niedziela, 7 poniedziałek, 8, wtorek 9, środa 10, czwartek 11, piątek, 12 sobota, 13, niedziela 14, poniedziałek, 15 no i gdzie to jest pełno-wartościowy kalendarz, a jaka była modyfikacja, jedynie tabela była identyczna tak, jak w poprzednim przypadku, tylko że pierwszy wiersz jest oznaczony jako THTable Header i czytnik ekran automatycznie wierzy to jest nagówek tabeli, nagówek kolum, tak i przy każdym przechodzeniu z komórki do komórki, jak ja sobie idę w ramach danego rzędu, to za każdym razem na początku jest sczytywany przez czytnik ekranu, informacja o tym jaka to jest i jaki to jest tytuł kolumny, że poniedziałek wtorek środa czwartki, dzięki temu poruszając się po bardzo dużej tabeli ja jestem w stanie to zidentyfikować, tak także to jest zrobiona tabela w sądostępnym właśnie z nagówkiem dzięki temu wszystkie czytniki ekranu mają taką możliwość wtedy łatwiej po takiej tabeli, w tym przewadku tą tabelą jest kalenę, czy jest łatwiej po tym nawigować przejdźmy sobie za tabelę teraz wtorek środa czwartek piątek dziewiętnaście wtorek środa czwartek dwadzieścia pięć piątek sobota niedzielel dwadzieścia osiek zapraszamy w niedzielel dwadzieścia osiem wiersz pięć kolumna siedem koniec tabeli ok zapraszamy film kubek poziomu dwa zapaczmy jeszcze raz ten sam film dany boją je w deskrypcjach do obejrzenia przycisk udostępnij odtwórz przycisk odtwórz doć jeszcze raz nie będzie problemu zimno dło kanał im. odtwórz przycisk zapragnij animacja wideo okno i dwukrotnie a wytrzyma łącze elementy sterujące temat produkcja filmowa jarhangel S.A. co produkcji z RSI radio, telewizjone, slicera przedstawiają film Marka Skrólewskiego dany boj stłoczone powykrzywiane kamienice różnych wysokości elewacje nakładają się na siebie w centrum dwie wieże drapaczy chmur las ludzkich nóg idących po bruku ludzie bez głów mijają się w tle ściany kamienic bez główy mężczyzna siedzi pod ścianą naszyj tabliczka z napisem blind przy nogach kapelusz a nogi przewraca się kobieta wstaje, odchodzi przez otwartą szybę samochodu ręka kierowcy strzepuje popiórz sygara wybiega mężczyzna z workiem wpada na samochód z kierowcą upuszcza worek, wypadają monety jedna toczy się przed bezgłowym ślepcem rabuś strzela na oślepce strzał pod rzuca kapelu w ślepce przechodnie padają na bruk ślepiec na czworakach zbliża się do prawędzników bez głowy gapie rozchodzą się za nimi stoi chłopak o czarnych kręconych włosach rozgląda się przy pomniku bezgłowego dostojnika wózek z lodami naprawca nakłada gałki do wafelka odbiera go bez głowa kobieta sukience z głębokim dekortem lody wrzuca nabiós autobus widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny widoczny Powrót do wpisu, jak to widzę, odwiedzony, łączę. Powrót do wpisu, jak to widzę, to już widzę, że to jest jakiś powrót, tylko powrót do konkretnego wpisu. Kliknę sobie w ten link. Ten dostępny, jak to widzę, słyszę, czyję. Dostępność stron opaktych na Wordpress się dla osób z niepełnostrewnościami w praktyce. I w ten sposób wróciłem sobie na stronę gówną. Także pokazałem wam tutaj dwa przykłady tej samej treści przedstawione na dostępnej stronie, czyli tzw. złej stronie mocy, jak ją nazwałem i dobrej stronie mocy, gdzie wszystkie te błędy zostały poprawione. To oczywiście jest taki naprawdę wyciąg z tego, jak najczęściej błędy są popełniane, tak? Ale macie dzięki temu po prostu takie praktyczne, case-owe porównanie, jak to wygląda. A dzięki tej prezentacji tutaj, w tej chwili, mieliście okazję unikatową zobaczyć, w ogóle jak to wygląda z perspektywy osoby niewidomej, która na co dzień korzysta, szecznika ekran. Także z tej strony takiej, powiedzmy, głównej treści mojej prezentacji, to by było tyle. Natomiast zachęcam w tym momencie do jakichś zadawania pytań, macie też unikatową szansę, żeby tutaj ewentualnie mi zadać jakieś pytania, ewentualnie potem też mogę odpowiedzieć. Także zapraszam ewentualnie do jakichś pytań. Proszę się nie bać, ja nie gryzę. Chciałem się stydzać o taką opinię, jak to uważa w takim stanie, że taki jest internet, tzw. dostępności na ile, jak dużo jest jeszcze do zrobienia, żeby tam się łatwo opowistało z internetu i z dzielu zasobu. Powiem tak, jest naprawdę bardzo dużo do zrobienia, ale to z różnych względów, bo stron internetowych jest naprawdę mnóstwo. Też chyba potwierdzacie, że mówi się, że około 30% internetu, jak to się mówi, stoi na WordPressie. Ja w tym miejscu w ogóle chciałem was zachęcić do takiej rzeczy tam, właśnie też w tym wpisie, tak na marginesie, podlinkowałem trzy zasoby na tym pierwszym wpisie, na moim blogu tam właśnie. Są podlinkowane. Warto zobaczyć, jest taka sekcja. Po pierwsze jest link do standardu WCAG 2.0 przetłumaczonego i na język polski. Ja też miałem parę lat temu okazję częściowo tłumaczyć ten standard. Bardzo dużo ekspertów tutaj z Polski tłumaczyło ten start-up na język polski. Już od kilku lat on jest dostępny. Drugi link, który pamiętam wkleiłem, to są zasoby dotyczące dostępnych motywów, a w szczególności tych, które w oficjalnym repozytorium WordPressa są, właśnie jak sobie wejdziecie, field, tutaj akurat jest bezpośredni link do tego. Jest taka kategoria po angielsku accessibility ready, a na polskiej społeczności polska WordPressa przetłumaczyła to jako zmyślą od dostępności. Dlaczego to nie jest accessible, tylko accessibility ready? Dlatego, że to są motywy gotowe na dostępność, tak to znaczy one spełniają standardy WCAG jako takie same w sobie, natomiast jeżeli skorzystamy z takiego, powiedzmy, motywu, no 2017 i większość tych standardowych motywów 2016, 2015 i poprzednie są robione zgodnie z zasadami WCAG, tak, z zasadami zbytą dostępności, ale to jest dlatego accessibility ready, a nie akcesybu, ponieważ możesz się zdarzyć sytuacja taka, że ktoś ma dostępny motyw, a wrzuci tam na przykład obrazek bez tekstu alternatywnego, no to już nie można zwalać winy na ten motyw, tylko na tego autora, który tej treści nie wrzucił tam, dlatego to się też nazywa akcesybility ready. Teraz wracając do pana pytanie, no, to naprawdę mnóstwo mnożą się te strony, cały czas gonimy, mogę powiedzieć, tak? Ja też jako audytor, głównie strony instytucji publicznej, bo tutaj te przepisy tego wymagają, być może jak wejdzie europejskie, jak o dostępności, to również strony instytucji prywatnych będą musiały być dostosowywane. Ja mogę powiedzieć takim dobrym przykładem, są strony banków, na których się nie wymusza tego, ale klienci można powiedzieć z niepełnosprawnością, którzy korzystają z banków, no chcą, żeby strony były dostępne. I wiele polskich banków, ja mogę sobie wsparcować też z wieloma polskimi bankami i pilnować tej dostępności, natomiast bardzo ważnym takim aspektem jest to, że bardzo dużo w dostępności można zrobić, ale jak się w modę tego nie przypilnuje, to jest problem i znowu nam ucieka, tak? Jeden z dużych polskich banków nagraconych za dostępność wiele, wiele lat dostawał nagrody i zarząd postanowił, że zmieniamy serwis transakcyjny i z dnia na dzień powiedzieli niby, że było to testowane z osobami niewidominy, ale okazało się w praktyce, że to była po prostu tak zwana bujda na resorach, tak? I się okazało, że z dnia na dzień osoby niewidome zostały pozbawione możliwości zalogowania się do tego banku, tak? I był problem, tak? I już bank się od tamtej wtopy, można powiedzieć, bodnieźrzowemu nie podjął się do dziś, to znaczy bizerunkowo, tak? Oni zaczęli tam dubać, dubać, ale już tego... Bardzo trudno jest wejść na ten piedestał i stać się bardzo nazwemnym bankiem, ale bardzo szybko można z niego spaść. Dlatego to jest takie dużenie nielespieczeństwo. Wspólnie z różnymi organizacjami starajmy się monitorować, a na przykład w tej chwili od roku prowadzę monitoring centralny ponad 50 instytucji. Weseł o nie jest mogę powiedzieć, są podstawowe błędy dostępności, ale zdarzają się nawet strony, które są, jak powiedział, przesadnie dostępne. To znaczy ktoś powisywał tekst alternatywny i w alcie, i w title i jeszcze próbuje go jeszcze w area label wstawiać trzy razy, tak? I to jest naddostępność, bo czytnik ekranu w tym momencie przeczyta tą samą informację trzy razy. I też mam problem, tak? A powinno być tylko w alcie albo tylko w area label. I jest z tym problem, tak? Tak że, no powiem tak, jest bardzo dużo do zrobienia. Trochę boli to, że standard WCAG w tym, na tym poziomie podwójnego A, czyli ten poziom tak zwany rozszerzony, on jest wymagany rozporządzeniem, ale trzeba pamiętać o tym rozporządzeniem. Mówię o tym, to jest krajowe, znaczy rozporządzenie o krajowych ramach interoperacyjności i minimalnych wybagań, tak? Minimalne wymagania, czyli tutaj mamy mowa w rozporządzeniu o minimalnych wymaganiach i nawet to minimum nie jest spełnione, tak? A co dopiero myśleć gdzieś tam o potrójnym A? Samo oczywiście ministerstwa i tak dalej, które starają się, czy samorządy, bo to wszystko zależy, jakie są tutaj publiczne, ale również organizacje porządzowe, które korzystają z pieniędzy publicznych, też jak pani doktorom na chwilę powiedział, one też muszą, ze względu na to, że korzystają z pieniędzy publicznych, muszą być dostosowane do standardu WCAG. Jest cały czas z tym problem. Musimy tego pilnować i warto, ja to zawsze mówię też na wszystkich szkolenach, dostępność jest procesem. To się musi dziać, bo jak ja przyjdę z audytem, zrobię audyt, ja ten audyt jest ważny, tylko na ten dzień, kiedy ja go zrobię. Na drugi dzień, jeżeli przyjdzie redaktor i nie doda teksto alternatywnego do nowego zdjęcia, audyt dla mnie idzie do kosza, jest nieważne, tak? Bo to jedno zdjęcie sprawia, że kryterium akurat w tym przypadku tam 1.1.1 WCAG jest niespełnione, brak tekstu alternatywnego, koniec kropka i już strona jest, mogę powiedzieć, w całości niespełnia standardu, a co za tym idzie, to rozporządzenie, tak? Zobaczymy, jak się to będzie oczywiście rozwijać dalej. Przypuszczam, że WCAG 2.1, który na razie wszedł jako specyfikacja, on też będzie musiał być przywołany, w którejś z ustaw, tak? Teraz mogę ministerstwo cyfryzacji pracuje nad nową ustawą o dostępności. Zobaczymy, co z tego będzie. Minus jest stanu obecnego w tej chwili taki, że w rozporządzeniu są powiedziane, że są wytyczne, ale nie ma zapisanej sankcji. Na zasadzie nie mamy Pana kapelusza i co mi zrobicie, tak? I bardzo często na szkolenie się tym spłatykam, zawada mi są właśnie pytania. A co mi grozi za to, że ja tego nie zrobię? Tu nie chodzi o to, czy coś Panu, albo Pani grozi, Pan urządowi, tylko po prostu tak się powinno robić z informacją, żeby była ona przygotowana w sposób dostępny, tak? Najawsze ustawie najprawdopodobniej będą nawet karier finansowe, nawet w wysokości, może i nawet kilkudziesięciu tysięcy, albo wyżej, tak? dla urzędu, dla urzędnika. Także, no metodą trochę bata trzeba robić, tak? Ale mam nadzieję, że tego typu wystąpenia, jak przed wileczką Pani dr. Mrochem i moje w tej chwili, u was zakożeniom zainteresowanie się od dostępnościom i powiem wam jeszcze jedną rzecz. Wy jako twórcy, programiści, webmasterzy, webdeveloperzy i tak dalej, mam wśród moich znajomych bardzo wiele osób, które są też na co dzień adminami, ale również programistami. Jak oni zaczynali się zajmować dostępnością, to im to dostosowanie, czyli myślenie, wdrażanie tej dostępności w kodzie z początku zajmowało około 20% więcej czasu więcej. Ktoś powiedział, no tak naprawdę, no, sporo czasu więcej, jedną, piątą czasu więcej. Ale po tym, jak się tego już nauczyli, jak zaczynają projektować swoje projekty nowe od zera, tak? I już znają te zasady dostępności, znają WCAGM na blachę, a znają, jak działają czytniki ekranu i tak dalej, to projektowanie i to dorabianie tych rzeczy zajmuje raptem maksymalnie 3 do 4% więcej czasu. Także trzeba się prosto tego nauczyć, a wam również polecam do również z tego względu, bo to staje się również obecnie na rynku developerów budowaniem przewagi konkurencyjnej. A w kontekście zamówień publicznych związanych z funduszami unijnymi oni będą na waszym portfolio patrzeć. Czy robiliście jakieś projekty dla administracji i czy były, spełniały one standard WCAG 2.0, tak? To pomyślnie o tym również, jako budowanie waszej przewagi kompetencyjnej, tylko że robicie ładne strony, bo pewnie takie robicie, że funkcjonalne, że zgodne z UX, tak naprawdę UX jest bardzo blisko accessibility, to się w ogóle przednika tak naprawdę, tak? Ale również budować przewagi kompetencyjną i napisać sobie w sypie, jeżeli robiliśmy, tak robię strony zgodne z WCAG, tak? Znaczy oczywiście nie pisać tego bezpodstawnie, tak? Ale jeżeli mieliście okazję już taki serwis robić i chociaż jeden audyt waszego serwisu był robiony, warto powiedzieć, tak, robiłem stronę zgodną, została oceniona bardzo wysoko przez organizację zartyfikującą, czy tam robiącem audyt, proszę bardzo, tak? I to się staje po prostu też budowaniem, nie tylko, że to trzeba tak robić, bo robimy to po prostu dostępnym dla wszystkim, ale również możecie dzięki temu budować swoją przewagi kompetencyjną na bazie dostępności. Dlaczego firma Apple, Google i tak dalej wprowadza do swoich produktów w standardzie czytniki i ekranu? To nie jest już doinstallowywane, dokupywane takiego, co było jeszcze parę lat temu. Dzisiaj to jest po prostu standard, tak? Urządzenia są robione zgodnie z filozofią uniwersalnego projektowania, czyli po prostu dla wszystkich. Także życzę Wam, abyście po prostu tą dostępność po prostu w swoich projektach starali się wdrażać, tak? Czytali rozmaite zasoby? Ja mam nadzieję, że właśnie ze startem tego swojego teraz bloga, byte chciał dużo takich case'ów podawać, przykładów z życia wziętych. Zachęcam też do komentowania, zachęcam również do zadawania pytań i również do komentarzy. Do mnie można się też zgłosić, tam na stronie macie również kontakt. Mój domnie mail to jest rotnickimaupa gmail.com. Jestem też na Facebooku jako Mikołaj Rotnicki. Podobnie jak pani doktorą Rochen możecie zadawać też do mnie pytania na Wasze pytania, no i zapraszam do odwiedzin na moim serwisie Rapport Dostępności, a 11y.report. Dziękuję serdecznie za uwagę.