Jak poprawnie zaprojektować MENU zgodne z WCAG?

Описание: Audiowstę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 "Menu". Poniżej logo Accens. Po prawej krótki film animowany – trzy postacie dodają różne elementy, takie jak komentarze i obrazki, na ekran monitora, gdzie wyświetla się strona internetowa.

W tym filmiku obraz wypełnia kamera z Adrianem Oraz okno nagrywające ekran komputera. Na początku i końcu filmu kamera z Adrianem wypełnia cały ekran. Adrian ma białą koszulę w kropki na głowie czarne, nauszne słuchawki. Przed nim czarny mikrofon na statywie. Siedzi w jasnym pokoju. Za nim czarna sofa. Gdy pojawia się nagranie ekranu, kamera z Adrianem zmniejsza się i zajmuje lewy lub prawy górny róg ekranu.

W momencie opowiadania o wymogach WCAG kamera znajduje się w lewym górnym rogu. Na prawo zrzuty ekranu z wymogami WCAG ze strony W3C. Strona jest po angielsku. Ma białe tło oraz niebieskie i czarne napisy opisujące dane kryterium.

Pierwsza strona to strona GOV.pl. Kamera znajduje się w prawym górnym rogu ekranu. Strona ma białe tło. Górną jej część wypełnia niebieskie tło z mało widocznym zdjęciem. Na nim białe napisy. Niżej niebieskie napisy i piktogramy odpowiadające różnym kategoriom. To między innymi samochód - kategoria kierowcy i pojazdy. Urna to kategoria Meldunek i wybory. Pod nimi czarne teksty. Menu to czarne napisy na szarym tle.

Druga strona to strona kolei dolnośląskich. Kamera znajduje się w lewym górnym rogu ekranu. Strona u samej góry ma biały pasek z menu. To czarne napisy odpowiadające różnym kategoriom. Tylko kategoria utrudnienia jest w kolorze czerwonym. Niżej duże zdjęcie hali dworcowej. Na niej żółty prostokąt z czarnym napisem i białym paskiem wyszukiwania. Niżej białe prostokąty z czarnymi i czerwonymi napisami. Menu po rozwinięciu to niebieskie napisy na białym tle.

Trzecia strona to strona Accens. Kamera znajduje się w lewym górnym rogu. U góry biały poziomy pasek z niebieskimi napisami. To menu. Reszta strony ma ciemne, niebieskie tło i białe napisy. Menu po rozwinięciu to podłużny, biały prostokąt z niebieskimi napisami. Podstrona “jak pracujemy” ma białe tło i czarne napisy.

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.



Kolejny element na Twojej stronie który musi być dostępny to MENU. Zobacz co Adrian ma do powiedzenia i pokazania w tym temacie.

Zapraszamy do oglądania.


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