Z artyku\u0142u dowiecie si\u0119, jak zacz\u0105\u0107 testowa\u0107 strony www pod k\u0105tem dost\u0119pno\u015bci cyfrowej.<\/p>\n\n\n\n
Dla kogo tak naprawd\u0119 jest dost\u0119pno\u015b\u0107?<\/strong><\/h2>\n\n\n\nZapewnienie dost\u0119pno\u015bci to nie tylko obowi\u0105zek prawny (wynikaj\u0105cy m.in.: z Europejskiego Aktu o Dost\u0119pno\u015bci<\/a> i powi\u0105zanego z nim standardu WCAG 2.1<\/a>), ale przede wszystkim szansa na dotarcie do wi\u0119kszej liczby klient\u00f3w i budowanie wizerunku nowoczesnej firmy.<\/p>\n\n\n\nDost\u0119pno\u015b\u0107 s\u0142u\u017cy ka\u017cdemu z nas. Opr\u00f3cz os\u00f3b z trwa\u0142ymi niepe\u0142nosprawno\u015bciami (wzroku, s\u0142uchu, ruchu, poznawczymi), na dost\u0119pnych aplikacjach zyskuj\u0105 r\u00f3wnie\u017c:<\/p>\n\n\n\n
\n- osoby starsze,<\/li>\n\n\n\n
- osoby, kt\u00f3re s\u0105 zm\u0119czone i potrzebuj\u0105, by obs\u0142uga by\u0142a prosta i intuicyjna,<\/li>\n\n\n\n
- osoby z tymczasowymi ograniczeniami, np.: z\u0142aman\u0105 nog\u0105, kontuzj\u0105 r\u0119ki lub rodzice z w\u00f3zkiem dzieci\u0119cym,<\/li>\n\n\n\n
- osoby korzystaj\u0105ce z Internetu w trudnych warunkach (np.: na s\u0142o\u0144cu lub w ha\u0142a\u015bliwym otoczeniu),<\/li>\n\n\n\n
- cudzoziemcy, dla kt\u00f3rych stosowany j\u0119zyk nie jest ojczystym.<\/li>\n<\/ul>\n\n\n\n
Tak jak ka\u017cdy inny element w procesie wytwarzania oprogramowania, dost\u0119pno\u015b\u0107 powinna by\u0107 wytwarzana i testowana przez zesp\u00f3\u0142 projektowy. W przypadku niekt\u00f3rych produkt\u00f3w czy us\u0142ug (np. medycznych, rz\u0105dowych, serwis\u00f3w informacyjnych), uwa\u017cna implementacja dost\u0119pnych rozwi\u0105za\u0144 jest szczeg\u00f3lnie wa\u017cna i powinna stanowi\u0107 priorytet.<\/p>\n\n\n\n
Kiedy zacz\u0105\u0107 testowanie?<\/strong><\/h2>\n\n\n\nW przypadku dost\u0119pno\u015bci cyfrowej wczesne testowanie \u2013 ju\u017c na etapie makiet i design\u00f3w \u2013 ma szczeg\u00f3lne znaczenie. Szacuje si\u0119, \u017ce 70% problem\u00f3w z dost\u0119pno\u015bci\u0105 mo\u017ce by\u0107 zaadresowane i naprawione jeszcze przed etapem developmentu, a co za tym idzie, ich naprawa jest du\u017co ta\u0144sza i mniej czasoch\u0142onna <\/strong>ni\u017c zmiana gotowych komponent\u00f3w w dzia\u0142aj\u0105cym systemie.<\/p>\n\n\n\nWczesne testowanie pozwala uchwyci\u0107 m.in. b\u0142\u0119dy zwi\u0105zane z:<\/p>\n\n\n\n
\n- wielko\u015bci\u0105 i rozmieszczeniem element\u00f3w w aplikacji,<\/li>\n\n\n\n
- \u0142atwo\u015bci\u0105 przej\u015bcia przez kolejne ekrany,<\/li>\n\n\n\n
- kontrastem zastosowanych tekst\u00f3w i obraz\u00f3w do t\u0142a,<\/li>\n\n\n\n
- wielko\u015bci\u0105 i rodzajem u\u017cytych czcionek.<\/li>\n<\/ul>\n\n\n\n
Nie jest to \u0142atwe zadanie, poniewa\u017c wymaga szerokiej wiedzy domenowej, uwa\u017cno\u015bci i rozeznania w rodzajach technologii wspomagaj\u0105cych, z kt\u00f3rych potencjalnie mog\u0105 korzysta\u0107 u\u017cytkownicy.<\/p>\n\n\n\n
Jak testowa\u0107 dobrze?<\/strong><\/h2>\n\n\n\nTestowanie dost\u0119pno\u015bci wymaga znajomo\u015bci poprawnego pisania i zastosowania kodu HTML (semantyczny HTML), poniewa\u017c technologie wspomagaj\u0105ce, kt\u00f3re towarzysz\u0105 r\u00f3\u017cnym u\u017cytkownikom podczas korzystania z aplikacji internetowych (takie jak czytniki ekranu, switch pady), bazuj\u0105 na wsp\u00f3\u0142pracy z kodem HTML. Kiedy kod aplikacji nie zawiera znacz\u0105cych b\u0142\u0119d\u00f3w, istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce u\u017cytkownikowi b\u0119dzie \u0142atwiej korzysta\u0107 z serwisu internetowego. Dodatkowo, wiele z praktyk i zachowa\u0144 u\u017cytkownik\u00f3w mo\u017ce by\u0107 imitowana przy pomocy darmowych lub p\u0142atnych narz\u0119dzi do test\u00f3w, poszerzaj\u0105cych standardow\u0105 analiz\u0119 kodu i prezentuj\u0105cych wyniki w spos\u00f3b czytelny i umo\u017cliwiaj\u0105cy dalsz\u0105 analiz\u0119.
Najbardziej popularnym, i jednocze\u015bnie dost\u0119pnym, narz\u0119dziem do test\u00f3w dost\u0119pno\u015bci jest Wave<\/a>.<\/strong>
Wave jest wtyczk\u0105 do przegl\u0105darki (Chrome, Firefox i Internet Explorer), kt\u00f3ra pomaga analizowa\u0107 kod HTML i jego struktur\u0119, podkre\u015blaj\u0105c b\u0142\u0119dy dost\u0119pno\u015bci (m.in.: w organizacji nag\u0142\u00f3wk\u00f3w na stronie, zbyt ma\u0142o kontrastowych elementach, niewystarczaj\u0105cych opisach tekst\u00f3w alternatywnych). Wskazuje tak\u017ce poprawnie u\u017cyte dost\u0119pne rozwi\u0105zania (np. aria-label), umo\u017cliwiaj\u0105c testerowi jednoczesn\u0105 prac\u0119 i nauk\u0119 dost\u0119pno\u015bci.
<\/strong>
Co ciekawe, Wave jest sam w sobie narz\u0119dziem dost\u0119pnym \u2013 wykorzystuje podw\u00f3jne oznaczenia element\u00f3w (kolorem i grafik\u0105), a tak\u017ce mo\u017cna go obs\u0142ugiwa\u0107 przy pomocy czytnika ekranu. Daje to szans\u0119 analizy dost\u0119pno\u015bci tak\u017ce tym testerom, kt\u00f3rzy sami s\u0105 osobami z niepe\u0142nosprawno\u015bciami.<\/p>\n\n\n\nTechniki testowania dost\u0119pno\u015bci<\/strong><\/h2>\n\n\n\nCho\u0107 pe\u0142en audyt dost\u0119pno\u015bci wymaga dog\u0142\u0119bnej wiedzy eksperckiej, mo\u017cesz samodzielnie wykry\u0107 podstawowe b\u0142\u0119dy w aplikacji. Pami\u0119taj, \u017ce nawet automatyczne narz\u0119dzia audytuj\u0105ce nie zast\u0105pi\u0105 test\u00f3w r\u0119cznych i spojrzenia z perspektywy u\u017cytkownika. Najlepsz\u0105 praktyk\u0105 jest nieustanne weryfikowanie swoich przekona\u0144 na temat dobrych, dost\u0119pnych rozwi\u0105za\u0144 w \u017ar\u00f3d\u0142ach, np.: na stronach WCAG lub w wytycznych dla developer\u00f3w.<\/p>\n\n\n\n
Kilka prostych, r\u0119cznych test\u00f3w, kt\u00f3re mo\u017cesz wykona\u0107 ju\u017c dzi\u015b<\/strong><\/h2>\n\n\n\nNawigacja za pomoc\u0105 klawiatury<\/strong><\/h3>\n\n\n\n(Test dla os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 ruchow\u0105 i u\u017cytkownik\u00f3w czytnik\u00f3w ekranu)<\/p>\n\n\n\n
Wiele os\u00f3b, w tym u\u017cytkownicy czytnik\u00f3w ekranu oraz osoby z ograniczon\u0105 sprawno\u015bci\u0105 r\u0105k, nie u\u017cywa myszki do poruszania si\u0119 po sieci \u2013 korzystaj\u0105 wy\u0142\u0105cznie z klawiatury.<\/p>\n\n\n\n
Jak testowa\u0107?<\/strong><\/p>\n\n\n\n\n- Od\u0142\u00f3\u017c myszk\u0119. Testuj tylko przy u\u017cyciu klawiatury.<\/li>\n\n\n\n
- U\u017cyj klawisza TAB<\/strong> do przechodzenia przez wszystkie interaktywne elementy strony (linki, przyciski, pola formularzy, elementy steruj\u0105ce multimedi\u00f3w).<\/li>\n\n\n\n
- Sprawd\u017a kolejno\u015b\u0107. Upewnij si\u0119, \u017ce kolejno\u015b\u0107 przechodzenia jest logiczna, zazwyczaj od g\u00f3ry do do\u0142u i od lewej do prawej. Je\u015bli chcesz wr\u00f3ci\u0107 do elementu, u\u017cyj kombinacji klawiszy Shift + TAB<\/strong>.<\/li>\n\n\n\n
- Sprawd\u017a fokus. Zwr\u00f3\u0107 uwag\u0119 czy element, na kt\u00f3rym aktualnie si\u0119 znajdujesz, jest wyra\u017anie widoczny (np. pod\u015bwietlony ramk\u0105).<\/li>\n\n\n\n
- Upewnij si\u0119, \u017ce gdy ju\u017c wejdziesz w dany element (np.: pole formularza lub okno modalne), mo\u017cesz z niego wyj\u015b\u0107, u\u017cywaj\u0105c klawiatury, bez konieczno\u015bci resetowania strony.<\/li>\n<\/ol>\n\n\n\n
Testowanie tre\u015bci nietekstowych<\/strong><\/h3>\n\n\n\n(Obrazy, grafiki i multimedia)<\/p>\n\n\n\n
Osoby niewidome lub s\u0142abowidz\u0105ce korzystaj\u0105 na co dzie\u0144 z czytnik\u00f3w ekranu(np. NVDA), kt\u00f3re odczytuj\u0105 zawarto\u015b\u0107 strony. Zadaniem os\u00f3b tworz\u0105cych tre\u015bci jest zadbanie o to, \u017ceby ka\u017cdy mia\u0142 pe\u0142en dost\u0119p do informacji w serwisie internetowym. Osoby, kt\u00f3re nie s\u0105 w stanie zobaczy\u0107 zdj\u0119\u0107, grafik czy innych element\u00f3w graficznych, powinny mie\u0107 zapewnione alternatywy tekstowe dla tych element\u00f3w.<\/p>\n\n\n\n
Jak testowa\u0107?<\/strong><\/p>\n\n\n\n\n- Sprawd\u017a, czy ka\u017cde zdj\u0119cie lub grafika (kt\u00f3ra nie jest czysto dekoracyjna) ma przypisany tekst alternatywny i czy jego tre\u015b\u0107 oddaje sens obrazu.<\/li>\n\n\n\n
- Nie rozpoczynaj opisu od s\u0142\u00f3w \u201ezdj\u0119cie\u201d lub \u201eobrazek\u201d \u2013 czytnik ekranu ju\u017c wie, \u017ce to jest obraz. Staraj si\u0119, aby opis by\u0142 zwi\u0119z\u0142y.<\/li>\n\n\n\n
- Je\u015bli obraz ma charakter czysto dekoracyjny i nie przekazuje \u017cadnej istotnej informacji (np. kreska oddzielaj\u0105ca sekcje), atrybut alt powinien by\u0107 pusty (alt=””). Dzi\u0119ki temu czytnik ekranu pominie ten element.<\/li>\n\n\n\n
- Je\u015bli na stronie s\u0105 filmy, musisz zapewni\u0107 alternatywy dla tre\u015bci audio i video. Oznacza to napisy (Closed Captions) zsynchronizowane z tre\u015bci\u0105 dla os\u00f3b g\u0142uchych lub nies\u0142ysz\u0105cych oraz audiodeskrypcj\u0119 dla os\u00f3b niewidomych. \u015awietnym dodatkiem jest te\u017c transkrypcja (plik tekstowy z ca\u0142\u0105 wypowiedzian\u0105 w pliku multimedialnym tre\u015bci\u0105).<\/li>\n<\/ol>\n\n\n\n
Narz\u0119dzia, kt\u00f3re pomog\u0105 zacz\u0105\u0107 testowa\u0107 dost\u0119pno\u015b\u0107<\/strong><\/h2>\n\n\n\nTestuj\u0105c dost\u0119pno\u015b\u0107, nie musicie inwestowa\u0107 w drogie oprogramowanie. Wi\u0119kszo\u015b\u0107 narz\u0119dzi wspieraj\u0105cych testy jest darmowa i stanowi cz\u0119\u015b\u0107 pakiet\u00f3w narz\u0119dzi developerskich (Dev Tools) w przegl\u0105darce lub mo\u017cna je zainstalowa\u0107 jako wtyczki do przegl\u0105darki.<\/p>\n\n\n\n
Warto zaznajomi\u0107 si\u0119 z wtyczkami<\/strong>.<\/p>\n\n\n\nSilktide (Chrome)<\/strong><\/h3>\n\n\n\nSilktide, podobnie jak Wave, skanuje kod HTML strony, zgodnie z wybranymi przez testera wytycznymi (WCAG 2.0, 2.1 lub 2.2).
Jest szczeg\u00f3lnie przydatny do weryfikacji:<\/p>\n\n\n\n
\u2022\u202f\u202f\u202f\u202fodpowiedniego kontrastu kolor\u00f3w mi\u0119dzy elementami,
\u2022\u202f\u202f\u202f\u202fczytelno\u015bci tre\u015bci i uk\u0142adu dla os\u00f3b z wadami wzroku,
\u2022\u202f\u202f\u202f\u202fprzejrzysto\u015bci i struktury d\u0142u\u017cszych tekst\u00f3w, co pomaga zapewni\u0107 ich zrozumia\u0142o\u015b\u0107 dla u\u017cytkownik\u00f3w z wyzwaniami poznawczymi takimi jak dysleksja.<\/p>\n\n\n\n
Link do pobrania narz\u0119dzia<\/a>.<\/p>\n\n\n\nHeadings Map (Chrome)<\/strong><\/h3>\n\n\n\nTo rozszerzenie pokazuje struktur\u0119 dokumentu lub indeks dla ka\u017cdej strony internetowej o strukturze opartej na nag\u0142\u00f3wkach. Umo\u017cliwia u\u017cytkownikom bezpo\u015bredni\u0105 nawigacj\u0119 do wybranych sekcji poprzez klikni\u0119cie element\u00f3w w wygenerowanym konspekcie.<\/p>\n\n\n\n
Link do pobrania narz\u0119dzia<\/a>. Dodatkowo nale\u017cy poszerzy\u0107 testy o czytniki ekranu oraz sprawdzanie tre\u015bci serwisu na r\u00f3\u017cnego typu urz\u0105dzeniach (laptopy, tablety, telefony z r\u00f3\u017cn\u0105 rozdzielczo\u015bci\u0105 ekranu i r\u00f3\u017cnego rodzaju systemem operacyjnym).<\/p>\n\n\n\nNajpopularniejsze czytniki ekranu<\/strong><\/h3>\n\n\n\n\n- NVDA:<\/strong> Darmowy czytnik ekranu. Je\u015bli chcecie naprawd\u0119 zrozumie\u0107, jak inni korzystaj\u0105 z Waszej strony, spr\u00f3bujcie zainstalowa\u0107 NVDA i si\u0119 ni\u0105 pos\u0142ugiwa\u0107. Pami\u0119tajcie, \u017ce nauka obs\u0142ugi tego narz\u0119dzia wymaga czasu. Link do pobrania NVDA<\/a><\/li>\n\n\n\n
- Talk Back (Android):<\/strong> To wbudowany w system Android czytnik ekranu, kt\u00f3ry umo\u017cliwia u\u017cytkownikom interakcj\u0119 z urz\u0105dzeniem za pomoc\u0105 komunikat\u00f3w g\u0142osowych oraz nawigacji opartej na gestach. Funkcja ta pozwala na odczytywanie wiadomo\u015bci tekstowych, przegl\u0105danie aplikacji oraz korzystanie z Internetu bez konieczno\u015bci patrzenia na ekran, co znacz\u0105co zwi\u0119ksza dost\u0119pno\u015b\u0107 smartfon\u00f3w i tablet\u00f3w dla os\u00f3b niewidomych i s\u0142abowidz\u0105cych.<\/li>\n\n\n\n
- Voice Over (MacOS): <\/strong>To zintegrowany czytnik ekranu firmy Apple, dost\u0119pny na urz\u0105dzeniach z systemami MacOS i iOS, oferuj\u0105cy rozbudowan\u0105 obs\u0142ug\u0119 gest\u00f3w dotykowych, polece\u0144 klawiaturowych oraz wy\u015bwietlaczy brajlowskich. Zapewnia szczeg\u00f3\u0142owe komunikaty g\u0142osowe opisuj\u0105ce wszystkie elementy widoczne na ekranie, umo\u017cliwiaj\u0105c u\u017cytkownikom nawigacj\u0119 po aplikacjach, odczytywanie dokument\u00f3w oraz interakcj\u0119 z tre\u015bciami w spos\u00f3b wysoce konfigurowalny i intuicyjny. Co istotne, ten sam czytnik ekranu jest dost\u0119pny zar\u00f3wno na komputerach, jak i na smartfonach, a korzystanie z niego przebiega w identyczny spos\u00f3b na obu typach urz\u0105dze\u0144. Warto r\u00f3wnie\u017c podkre\u015bli\u0107, \u017ce VoiceOver jest najpopularniejszym czytnikiem ekranu w spo\u0142eczno\u015bci os\u00f3b niewidomych.<\/li>\n<\/ul>\n\n\n\n
\n \n ![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Testing-Lab-Desktop_.jpg\")
\n <\/picture>\n \n \n Testing & QA<\/h2>\n <\/div>\n
\n Zapewnij jako\u015b\u0107, wydajno\u015b\u0107 i bezpiecze\u0144stwo swojego oprogramowania dzi\u0119ki naszym us\u0142ugom testowania i automatyzacji test\u00f3w.\n <\/p>\n \n Oferta Testing&QA<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nDost\u0119pno\u015b\u0107 cyfrowa to nasza wsp\u00f3lna odpowiedzialno\u015b\u0107<\/strong><\/h2>\n\n\n\nDost\u0119pno\u015b\u0107 to ci\u0105g\u0142y proces, a nie jednorazowe dzia\u0142anie. Nie wystarczy przetestowa\u0107 aplikacj\u0119, czy te\u017c wykona\u0107 jej profesjonalny audyt. Aby poprawi\u0107 dost\u0119pno\u015b\u0107<\/strong> \u2013 znalezione b\u0142\u0119dy musz\u0105 by\u0107 naprawione<\/strong>. Dodatkowo nale\u017cy pami\u0119ta\u0107, \u017ce aplikacje internetowe podlegaj\u0105 ci\u0105g\u0142ym zmianom \u2013 dodawane s\u0105 nowe funkcjonalno\u015bci, modyfikowane s\u0105 elementy interfejsu u\u017cytkownika. Brak bie\u017c\u0105cego testowania mo\u017ce sprawi\u0107, \u017ce nie zauwa\u017cycie, i\u017c elementy wcze\u015bniej w pe\u0142ni dost\u0119pne sta\u0142y si\u0119 niedost\u0119pne po wprowadzeniu zmian.<\/p>\n\n\n\nRozpocz\u0119cie testowania dost\u0119pno\u015bci od opisanych powy\u017cej krok\u00f3w sprawi, \u017ce Wasza aplikacja webowa stanie si\u0119 bardziej przyjazna i otwarta dla wszystkich u\u017cytkownik\u00f3w \u2013 nawet je\u015bli do tej pory nie mieli\u015bcie okazji prowadzi\u0107 takich test\u00f3w.<\/p>\n\n\n\n
Je\u015bli potrzebujecie dalszego wsparcia, mo\u017cecie skorzysta\u0107 z wytycznych PFRON<\/a> lub wytycznych Ministerstwa Cyfryzacji<\/a>, list kontrolnych (checklist) dost\u0119pnych online lub skonsultowa\u0107 si\u0119 ze specjalist\u0105.
<\/p>\n\n\n\n
<\/p>\n\n\n
Dost\u0119pno\u015b\u0107 s\u0142u\u017cy ka\u017cdemu z nas. Opr\u00f3cz os\u00f3b z trwa\u0142ymi niepe\u0142nosprawno\u015bciami (wzroku, s\u0142uchu, ruchu, poznawczymi), na dost\u0119pnych aplikacjach zyskuj\u0105 r\u00f3wnie\u017c:<\/p>\n\n\n\n
- \n
- osoby starsze,<\/li>\n\n\n\n
- osoby, kt\u00f3re s\u0105 zm\u0119czone i potrzebuj\u0105, by obs\u0142uga by\u0142a prosta i intuicyjna,<\/li>\n\n\n\n
- osoby z tymczasowymi ograniczeniami, np.: z\u0142aman\u0105 nog\u0105, kontuzj\u0105 r\u0119ki lub rodzice z w\u00f3zkiem dzieci\u0119cym,<\/li>\n\n\n\n
- osoby korzystaj\u0105ce z Internetu w trudnych warunkach (np.: na s\u0142o\u0144cu lub w ha\u0142a\u015bliwym otoczeniu),<\/li>\n\n\n\n
- cudzoziemcy, dla kt\u00f3rych stosowany j\u0119zyk nie jest ojczystym.<\/li>\n<\/ul>\n\n\n\n
Tak jak ka\u017cdy inny element w procesie wytwarzania oprogramowania, dost\u0119pno\u015b\u0107 powinna by\u0107 wytwarzana i testowana przez zesp\u00f3\u0142 projektowy. W przypadku niekt\u00f3rych produkt\u00f3w czy us\u0142ug (np. medycznych, rz\u0105dowych, serwis\u00f3w informacyjnych), uwa\u017cna implementacja dost\u0119pnych rozwi\u0105za\u0144 jest szczeg\u00f3lnie wa\u017cna i powinna stanowi\u0107 priorytet.<\/p>\n\n\n\n
Kiedy zacz\u0105\u0107 testowanie?<\/strong><\/h2>\n\n\n\n
W przypadku dost\u0119pno\u015bci cyfrowej wczesne testowanie \u2013 ju\u017c na etapie makiet i design\u00f3w \u2013 ma szczeg\u00f3lne znaczenie. Szacuje si\u0119, \u017ce 70% problem\u00f3w z dost\u0119pno\u015bci\u0105 mo\u017ce by\u0107 zaadresowane i naprawione jeszcze przed etapem developmentu, a co za tym idzie, ich naprawa jest du\u017co ta\u0144sza i mniej czasoch\u0142onna <\/strong>ni\u017c zmiana gotowych komponent\u00f3w w dzia\u0142aj\u0105cym systemie.<\/p>\n\n\n\n
Wczesne testowanie pozwala uchwyci\u0107 m.in. b\u0142\u0119dy zwi\u0105zane z:<\/p>\n\n\n\n
- \n
- wielko\u015bci\u0105 i rozmieszczeniem element\u00f3w w aplikacji,<\/li>\n\n\n\n
- \u0142atwo\u015bci\u0105 przej\u015bcia przez kolejne ekrany,<\/li>\n\n\n\n
- kontrastem zastosowanych tekst\u00f3w i obraz\u00f3w do t\u0142a,<\/li>\n\n\n\n
- wielko\u015bci\u0105 i rodzajem u\u017cytych czcionek.<\/li>\n<\/ul>\n\n\n\n
Nie jest to \u0142atwe zadanie, poniewa\u017c wymaga szerokiej wiedzy domenowej, uwa\u017cno\u015bci i rozeznania w rodzajach technologii wspomagaj\u0105cych, z kt\u00f3rych potencjalnie mog\u0105 korzysta\u0107 u\u017cytkownicy.<\/p>\n\n\n\n
Jak testowa\u0107 dobrze?<\/strong><\/h2>\n\n\n\n
Testowanie dost\u0119pno\u015bci wymaga znajomo\u015bci poprawnego pisania i zastosowania kodu HTML (semantyczny HTML), poniewa\u017c technologie wspomagaj\u0105ce, kt\u00f3re towarzysz\u0105 r\u00f3\u017cnym u\u017cytkownikom podczas korzystania z aplikacji internetowych (takie jak czytniki ekranu, switch pady), bazuj\u0105 na wsp\u00f3\u0142pracy z kodem HTML. Kiedy kod aplikacji nie zawiera znacz\u0105cych b\u0142\u0119d\u00f3w, istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce u\u017cytkownikowi b\u0119dzie \u0142atwiej korzysta\u0107 z serwisu internetowego. Dodatkowo, wiele z praktyk i zachowa\u0144 u\u017cytkownik\u00f3w mo\u017ce by\u0107 imitowana przy pomocy darmowych lub p\u0142atnych narz\u0119dzi do test\u00f3w, poszerzaj\u0105cych standardow\u0105 analiz\u0119 kodu i prezentuj\u0105cych wyniki w spos\u00f3b czytelny i umo\u017cliwiaj\u0105cy dalsz\u0105 analiz\u0119.
Najbardziej popularnym, i jednocze\u015bnie dost\u0119pnym, narz\u0119dziem do test\u00f3w dost\u0119pno\u015bci jest Wave<\/a>.<\/strong>
Wave jest wtyczk\u0105 do przegl\u0105darki (Chrome, Firefox i Internet Explorer), kt\u00f3ra pomaga analizowa\u0107 kod HTML i jego struktur\u0119, podkre\u015blaj\u0105c b\u0142\u0119dy dost\u0119pno\u015bci (m.in.: w organizacji nag\u0142\u00f3wk\u00f3w na stronie, zbyt ma\u0142o kontrastowych elementach, niewystarczaj\u0105cych opisach tekst\u00f3w alternatywnych). Wskazuje tak\u017ce poprawnie u\u017cyte dost\u0119pne rozwi\u0105zania (np. aria-label), umo\u017cliwiaj\u0105c testerowi jednoczesn\u0105 prac\u0119 i nauk\u0119 dost\u0119pno\u015bci.
<\/strong>
Co ciekawe, Wave jest sam w sobie narz\u0119dziem dost\u0119pnym \u2013 wykorzystuje podw\u00f3jne oznaczenia element\u00f3w (kolorem i grafik\u0105), a tak\u017ce mo\u017cna go obs\u0142ugiwa\u0107 przy pomocy czytnika ekranu. Daje to szans\u0119 analizy dost\u0119pno\u015bci tak\u017ce tym testerom, kt\u00f3rzy sami s\u0105 osobami z niepe\u0142nosprawno\u015bciami.<\/p>\n\n\n\nTechniki testowania dost\u0119pno\u015bci<\/strong><\/h2>\n\n\n\n
Cho\u0107 pe\u0142en audyt dost\u0119pno\u015bci wymaga dog\u0142\u0119bnej wiedzy eksperckiej, mo\u017cesz samodzielnie wykry\u0107 podstawowe b\u0142\u0119dy w aplikacji. Pami\u0119taj, \u017ce nawet automatyczne narz\u0119dzia audytuj\u0105ce nie zast\u0105pi\u0105 test\u00f3w r\u0119cznych i spojrzenia z perspektywy u\u017cytkownika. Najlepsz\u0105 praktyk\u0105 jest nieustanne weryfikowanie swoich przekona\u0144 na temat dobrych, dost\u0119pnych rozwi\u0105za\u0144 w \u017ar\u00f3d\u0142ach, np.: na stronach WCAG lub w wytycznych dla developer\u00f3w.<\/p>\n\n\n\n
Kilka prostych, r\u0119cznych test\u00f3w, kt\u00f3re mo\u017cesz wykona\u0107 ju\u017c dzi\u015b<\/strong><\/h2>\n\n\n\n
Nawigacja za pomoc\u0105 klawiatury<\/strong><\/h3>\n\n\n\n
(Test dla os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 ruchow\u0105 i u\u017cytkownik\u00f3w czytnik\u00f3w ekranu)<\/p>\n\n\n\n
Wiele os\u00f3b, w tym u\u017cytkownicy czytnik\u00f3w ekranu oraz osoby z ograniczon\u0105 sprawno\u015bci\u0105 r\u0105k, nie u\u017cywa myszki do poruszania si\u0119 po sieci \u2013 korzystaj\u0105 wy\u0142\u0105cznie z klawiatury.<\/p>\n\n\n\n
Jak testowa\u0107?<\/strong><\/p>\n\n\n\n
- \n
- Od\u0142\u00f3\u017c myszk\u0119. Testuj tylko przy u\u017cyciu klawiatury.<\/li>\n\n\n\n
- U\u017cyj klawisza TAB<\/strong> do przechodzenia przez wszystkie interaktywne elementy strony (linki, przyciski, pola formularzy, elementy steruj\u0105ce multimedi\u00f3w).<\/li>\n\n\n\n
- Sprawd\u017a kolejno\u015b\u0107. Upewnij si\u0119, \u017ce kolejno\u015b\u0107 przechodzenia jest logiczna, zazwyczaj od g\u00f3ry do do\u0142u i od lewej do prawej. Je\u015bli chcesz wr\u00f3ci\u0107 do elementu, u\u017cyj kombinacji klawiszy Shift + TAB<\/strong>.<\/li>\n\n\n\n
- Sprawd\u017a fokus. Zwr\u00f3\u0107 uwag\u0119 czy element, na kt\u00f3rym aktualnie si\u0119 znajdujesz, jest wyra\u017anie widoczny (np. pod\u015bwietlony ramk\u0105).<\/li>\n\n\n\n
- Upewnij si\u0119, \u017ce gdy ju\u017c wejdziesz w dany element (np.: pole formularza lub okno modalne), mo\u017cesz z niego wyj\u015b\u0107, u\u017cywaj\u0105c klawiatury, bez konieczno\u015bci resetowania strony.<\/li>\n<\/ol>\n\n\n\n
Testowanie tre\u015bci nietekstowych<\/strong><\/h3>\n\n\n\n
(Obrazy, grafiki i multimedia)<\/p>\n\n\n\n
Osoby niewidome lub s\u0142abowidz\u0105ce korzystaj\u0105 na co dzie\u0144 z czytnik\u00f3w ekranu(np. NVDA), kt\u00f3re odczytuj\u0105 zawarto\u015b\u0107 strony. Zadaniem os\u00f3b tworz\u0105cych tre\u015bci jest zadbanie o to, \u017ceby ka\u017cdy mia\u0142 pe\u0142en dost\u0119p do informacji w serwisie internetowym. Osoby, kt\u00f3re nie s\u0105 w stanie zobaczy\u0107 zdj\u0119\u0107, grafik czy innych element\u00f3w graficznych, powinny mie\u0107 zapewnione alternatywy tekstowe dla tych element\u00f3w.<\/p>\n\n\n\n
Jak testowa\u0107?<\/strong><\/p>\n\n\n\n
- \n
- Sprawd\u017a, czy ka\u017cde zdj\u0119cie lub grafika (kt\u00f3ra nie jest czysto dekoracyjna) ma przypisany tekst alternatywny i czy jego tre\u015b\u0107 oddaje sens obrazu.<\/li>\n\n\n\n
- Nie rozpoczynaj opisu od s\u0142\u00f3w \u201ezdj\u0119cie\u201d lub \u201eobrazek\u201d \u2013 czytnik ekranu ju\u017c wie, \u017ce to jest obraz. Staraj si\u0119, aby opis by\u0142 zwi\u0119z\u0142y.<\/li>\n\n\n\n
- Je\u015bli obraz ma charakter czysto dekoracyjny i nie przekazuje \u017cadnej istotnej informacji (np. kreska oddzielaj\u0105ca sekcje), atrybut alt powinien by\u0107 pusty (alt=””). Dzi\u0119ki temu czytnik ekranu pominie ten element.<\/li>\n\n\n\n
- Je\u015bli na stronie s\u0105 filmy, musisz zapewni\u0107 alternatywy dla tre\u015bci audio i video. Oznacza to napisy (Closed Captions) zsynchronizowane z tre\u015bci\u0105 dla os\u00f3b g\u0142uchych lub nies\u0142ysz\u0105cych oraz audiodeskrypcj\u0119 dla os\u00f3b niewidomych. \u015awietnym dodatkiem jest te\u017c transkrypcja (plik tekstowy z ca\u0142\u0105 wypowiedzian\u0105 w pliku multimedialnym tre\u015bci\u0105).<\/li>\n<\/ol>\n\n\n\n
Narz\u0119dzia, kt\u00f3re pomog\u0105 zacz\u0105\u0107 testowa\u0107 dost\u0119pno\u015b\u0107<\/strong><\/h2>\n\n\n\n
Testuj\u0105c dost\u0119pno\u015b\u0107, nie musicie inwestowa\u0107 w drogie oprogramowanie. Wi\u0119kszo\u015b\u0107 narz\u0119dzi wspieraj\u0105cych testy jest darmowa i stanowi cz\u0119\u015b\u0107 pakiet\u00f3w narz\u0119dzi developerskich (Dev Tools) w przegl\u0105darce lub mo\u017cna je zainstalowa\u0107 jako wtyczki do przegl\u0105darki.<\/p>\n\n\n\n
Warto zaznajomi\u0107 si\u0119 z wtyczkami<\/strong>.<\/p>\n\n\n\n
Silktide (Chrome)<\/strong><\/h3>\n\n\n\n
Silktide, podobnie jak Wave, skanuje kod HTML strony, zgodnie z wybranymi przez testera wytycznymi (WCAG 2.0, 2.1 lub 2.2).
Jest szczeg\u00f3lnie przydatny do weryfikacji:<\/p>\n\n\n\n\u2022\u202f\u202f\u202f\u202fodpowiedniego kontrastu kolor\u00f3w mi\u0119dzy elementami,
\u2022\u202f\u202f\u202f\u202fczytelno\u015bci tre\u015bci i uk\u0142adu dla os\u00f3b z wadami wzroku,
\u2022\u202f\u202f\u202f\u202fprzejrzysto\u015bci i struktury d\u0142u\u017cszych tekst\u00f3w, co pomaga zapewni\u0107 ich zrozumia\u0142o\u015b\u0107 dla u\u017cytkownik\u00f3w z wyzwaniami poznawczymi takimi jak dysleksja.<\/p>\n\n\n\nLink do pobrania narz\u0119dzia<\/a>.<\/p>\n\n\n\n
Headings Map (Chrome)<\/strong><\/h3>\n\n\n\n
To rozszerzenie pokazuje struktur\u0119 dokumentu lub indeks dla ka\u017cdej strony internetowej o strukturze opartej na nag\u0142\u00f3wkach. Umo\u017cliwia u\u017cytkownikom bezpo\u015bredni\u0105 nawigacj\u0119 do wybranych sekcji poprzez klikni\u0119cie element\u00f3w w wygenerowanym konspekcie.<\/p>\n\n\n\n
Link do pobrania narz\u0119dzia<\/a>. Dodatkowo nale\u017cy poszerzy\u0107 testy o czytniki ekranu oraz sprawdzanie tre\u015bci serwisu na r\u00f3\u017cnego typu urz\u0105dzeniach (laptopy, tablety, telefony z r\u00f3\u017cn\u0105 rozdzielczo\u015bci\u0105 ekranu i r\u00f3\u017cnego rodzaju systemem operacyjnym).<\/p>\n\n\n\n
Najpopularniejsze czytniki ekranu<\/strong><\/h3>\n\n\n\n
- \n
- NVDA:<\/strong> Darmowy czytnik ekranu. Je\u015bli chcecie naprawd\u0119 zrozumie\u0107, jak inni korzystaj\u0105 z Waszej strony, spr\u00f3bujcie zainstalowa\u0107 NVDA i si\u0119 ni\u0105 pos\u0142ugiwa\u0107. Pami\u0119tajcie, \u017ce nauka obs\u0142ugi tego narz\u0119dzia wymaga czasu. Link do pobrania NVDA<\/a><\/li>\n\n\n\n
- Talk Back (Android):<\/strong> To wbudowany w system Android czytnik ekranu, kt\u00f3ry umo\u017cliwia u\u017cytkownikom interakcj\u0119 z urz\u0105dzeniem za pomoc\u0105 komunikat\u00f3w g\u0142osowych oraz nawigacji opartej na gestach. Funkcja ta pozwala na odczytywanie wiadomo\u015bci tekstowych, przegl\u0105danie aplikacji oraz korzystanie z Internetu bez konieczno\u015bci patrzenia na ekran, co znacz\u0105co zwi\u0119ksza dost\u0119pno\u015b\u0107 smartfon\u00f3w i tablet\u00f3w dla os\u00f3b niewidomych i s\u0142abowidz\u0105cych.<\/li>\n\n\n\n
- Voice Over (MacOS): <\/strong>To zintegrowany czytnik ekranu firmy Apple, dost\u0119pny na urz\u0105dzeniach z systemami MacOS i iOS, oferuj\u0105cy rozbudowan\u0105 obs\u0142ug\u0119 gest\u00f3w dotykowych, polece\u0144 klawiaturowych oraz wy\u015bwietlaczy brajlowskich. Zapewnia szczeg\u00f3\u0142owe komunikaty g\u0142osowe opisuj\u0105ce wszystkie elementy widoczne na ekranie, umo\u017cliwiaj\u0105c u\u017cytkownikom nawigacj\u0119 po aplikacjach, odczytywanie dokument\u00f3w oraz interakcj\u0119 z tre\u015bciami w spos\u00f3b wysoce konfigurowalny i intuicyjny. Co istotne, ten sam czytnik ekranu jest dost\u0119pny zar\u00f3wno na komputerach, jak i na smartfonach, a korzystanie z niego przebiega w identyczny spos\u00f3b na obu typach urz\u0105dze\u0144. Warto r\u00f3wnie\u017c podkre\u015bli\u0107, \u017ce VoiceOver jest najpopularniejszym czytnikiem ekranu w spo\u0142eczno\u015bci os\u00f3b niewidomych.<\/li>\n<\/ul>\n\n\n
\n\n \n \n <\/picture>\n \n\nTesting & QA<\/h2>\n <\/div>\n
\n Zapewnij jako\u015b\u0107, wydajno\u015b\u0107 i bezpiecze\u0144stwo swojego oprogramowania dzi\u0119ki naszym us\u0142ugom testowania i automatyzacji test\u00f3w.\n <\/p>\n \n Oferta Testing&QA<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\n
Dost\u0119pno\u015b\u0107 cyfrowa to nasza wsp\u00f3lna odpowiedzialno\u015b\u0107<\/strong><\/h2>\n\n\n\n
Dost\u0119pno\u015b\u0107 to ci\u0105g\u0142y proces, a nie jednorazowe dzia\u0142anie. Nie wystarczy przetestowa\u0107 aplikacj\u0119, czy te\u017c wykona\u0107 jej profesjonalny audyt. Aby poprawi\u0107 dost\u0119pno\u015b\u0107<\/strong> \u2013 znalezione b\u0142\u0119dy musz\u0105 by\u0107 naprawione<\/strong>. Dodatkowo nale\u017cy pami\u0119ta\u0107, \u017ce aplikacje internetowe podlegaj\u0105 ci\u0105g\u0142ym zmianom \u2013 dodawane s\u0105 nowe funkcjonalno\u015bci, modyfikowane s\u0105 elementy interfejsu u\u017cytkownika. Brak bie\u017c\u0105cego testowania mo\u017ce sprawi\u0107, \u017ce nie zauwa\u017cycie, i\u017c elementy wcze\u015bniej w pe\u0142ni dost\u0119pne sta\u0142y si\u0119 niedost\u0119pne po wprowadzeniu zmian.<\/p>\n\n\n\n
Rozpocz\u0119cie testowania dost\u0119pno\u015bci od opisanych powy\u017cej krok\u00f3w sprawi, \u017ce Wasza aplikacja webowa stanie si\u0119 bardziej przyjazna i otwarta dla wszystkich u\u017cytkownik\u00f3w \u2013 nawet je\u015bli do tej pory nie mieli\u015bcie okazji prowadzi\u0107 takich test\u00f3w.<\/p>\n\n\n\n
Je\u015bli potrzebujecie dalszego wsparcia, mo\u017cecie skorzysta\u0107 z wytycznych PFRON<\/a> lub wytycznych Ministerstwa Cyfryzacji<\/a>, list kontrolnych (checklist) dost\u0119pnych online lub skonsultowa\u0107 si\u0119 ze specjalist\u0105.
<\/p>\n\n\n\n
<\/p>\n\n\n - Talk Back (Android):<\/strong> To wbudowany w system Android czytnik ekranu, kt\u00f3ry umo\u017cliwia u\u017cytkownikom interakcj\u0119 z urz\u0105dzeniem za pomoc\u0105 komunikat\u00f3w g\u0142osowych oraz nawigacji opartej na gestach. Funkcja ta pozwala na odczytywanie wiadomo\u015bci tekstowych, przegl\u0105danie aplikacji oraz korzystanie z Internetu bez konieczno\u015bci patrzenia na ekran, co znacz\u0105co zwi\u0119ksza dost\u0119pno\u015b\u0107 smartfon\u00f3w i tablet\u00f3w dla os\u00f3b niewidomych i s\u0142abowidz\u0105cych.<\/li>\n\n\n\n
- NVDA:<\/strong> Darmowy czytnik ekranu. Je\u015bli chcecie naprawd\u0119 zrozumie\u0107, jak inni korzystaj\u0105 z Waszej strony, spr\u00f3bujcie zainstalowa\u0107 NVDA i si\u0119 ni\u0105 pos\u0142ugiwa\u0107. Pami\u0119tajcie, \u017ce nauka obs\u0142ugi tego narz\u0119dzia wymaga czasu. Link do pobrania NVDA<\/a><\/li>\n\n\n\n
- Sprawd\u017a kolejno\u015b\u0107. Upewnij si\u0119, \u017ce kolejno\u015b\u0107 przechodzenia jest logiczna, zazwyczaj od g\u00f3ry do do\u0142u i od lewej do prawej. Je\u015bli chcesz wr\u00f3ci\u0107 do elementu, u\u017cyj kombinacji klawiszy Shift + TAB<\/strong>.<\/li>\n\n\n\n