Czy CAPTCHA może być zgodna z wytycznymi WCAG?

Описание: Audio wstęp: Ekran tytułowy filmiku podzielony na pół. Z lewej strony, na niebieskim tle, biały napis „Dostępność stron internetowych”. Niżej – niebieski napis na białym tle: „Captcha”. Poniżej – logo Accens. Po prawej – krótki film z nagraniem ekranu, gdzie kursor myszy klika na prostokąt z weryfikacją captcha. Na prostokącie napis: „I’m not a robot”.

Na filmie – kamera z Adrianem oraz okna z nagraniem ekranu. Kamera z Adrianem będzie albo wypełniać cały ekran, albo znajdować się w prawym lub lewym górnym rogu. Podczas filmu Adrian przetestuje 3 strony.

Film zaczyna się od kamery z Adrianem wypełniającej ekran. Adrian ma niebieską koszulę z długim rękawem. Na głowie ma duże, czarne, nauszne słuchawki. Siedzi na szarym krześle. Przed jego twarzą – szary mikrofon na statywie.

W momencie, gdy opowiada o typach weryfikacji captcha, na ekranie pojawiają się dwie grafiki przedstawiające weryfikacje captcha. Pierwsza to przykład kodu tekstowego. Druga – to dwie weryfikacje obrazkowe. Każda z nich zawiera 9 kwadratów ze zdjęciami zwierząt lub roślin.

Następnie Adrian prezentuje stronę z artykułem. Kamera znajduje się w prawym górnym rogu. Strona ma białe tło i czarne lub niebieskie napisy w języku angielskim. Po lewej stronie, na szarym tle – spis treści całego artykułu. Następnie pojawiają się trzy zrzuty ekranu ze strony W3C dotyczące kryterium WCAG 1.1.1. Każdy zrzut ma białe tło oraz niebieskie i czarne napisy w języku angielskim.

Potem Adrian testuje stronę „X”. Kamera znajduje się w lewym górnym rogu. Strona ma białe tło. Na środku – prostokąt z powiadomieniem. Ma białe tło, czarne napisy i przycisk – czarny prostokąt z białym tekstem. Na dole – mały rysunek głośnika z rozchodzącymi się falami dźwiękowymi.

Kolejna strona to portal Poczty Polskiej. Kamera w lewym górnym rogu. Strona ma białe tło, bordowe paski z nawigacją, ciemnoniebieskie napisy. Na dole strony – pole weryfikacji captcha. To szary prostokąt z kodem tekstowym w wielu kolorach i bordowymi przyciskami z białym tekstem.

Ostatnia strona to serwis Bluesky. Kamera w prawym górnym rogu. Strona ma białe tło. Po lewej – szary prostokąt z niebieskim napisem „Utwórz konto”. Po prawej – czarne napisy i przyciski. To jasnoczerwone prostokąty z białymi napisami. Następnie na ekranie pojawiają się cztery zrzuty ekranu. Pierwszy – ze strony hCaptcha. Ma białe tło, czarne napisy i przycisk – czarny prostokąt z białym tekstem. Tekst tłumaczy, czym jest hCaptcha. Kolejne trzy zrzuty pokazują kolejno drogę do zainstalowania hCaptcha na swoim komputerze. Najpierw – na serwisie Bluesky pojawia się weryfikacja captcha z 9 obrazkami zwierząt. Pod nią – logo hCaptcha: biała dłoń na jasnoniebieskim tle. Następnie pojawia się biały prostokąt z tytułem „Dostępność” i czarnym tekstem. Pod tekstem – link do pobrania cookies dostępnościowego. Ostatni zrzut ekranu to panel tworzenia konta na stronie hCaptcha. To biały prostokąt z błękitnymi i czarnymi napisami.

Na koniec Adrian wraca na pełen ekran, by się pożegnać. Końcowy ekran to biało-niebieski prostokąt z dużym czerwonym przyciskiem „Subskrybuj” oraz logo Accens.





W jaki sposób osoby z niepełnosprawnościami mogą przejść weryfikację Captcha? Czy jest to możliwe i co o tym wszystkim mówi WCAG?
Zapraszamy do oglądania.

Link do artykułu W3C - https://www.w3.org/TR/turingtest/

Link do cookies dostępnościowego - https://www.hcaptcha.com/what-is-hcap...


Po treści związane z dostępnością aplikacji mobilnych zobacz -    • Dostępność Aplikacji Mobilnych  

Chcesz poznać nas lepiej? Zobaczyć czym się zajmujemy? Zobacz:    • Poznaj nas lepiej  


Chcesz się nauczyć testować dostępność aplikacji webowych? Zapraszamy na szkolenie -https://accens.pl/szkolenie-praktyczn...


Bądź na bieżąco ze światem dostępności cyfrowej. Zapisz się na listę odbiorców naszego newsletteru - https://accens.pl/newsletter/


LinkedIn -   / accens  
Facebook -   / accenspl  


#dostępność
#accessibility
#AplikacjeWebowe
#ecommerce
#WCAG
#stronyinternetowe
#IOS
#VoiceOver
#TestyZUżytkownikiem
#UX
#UI
#frontend