Скачать или смотреть Jak dobrze pisać teksty alternatywne?

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: „Alternatywa tekstowa”. Poniżej – logo Accens. Po prawej – grafika monitora komputera z żółtym napisem alt tekst.

Na filmie – okienko z Adrianem uchwyconym od piersi w górę oraz okna z nagraniem ekranu. Okienko z Adrianem będzie albo wypełniać cały ekran, albo znajdować się w prawym lub lewym górnym rogu. Podczas filmu Adrian przetestuje dwie strony.

Film zaczyna się od okienka z Adrianem wypełniającym ekran. Adrian ma zieloną koszulę w kratkę i granatowy sweter zapinany na zamek. Na głowie ma duże, czarne, nauszne słuchawki. Siedzi na szarym krześle. Przed jego twarzą – szary mikrofon na statywie.

Przy omawianiu kryterium WCAG okienko z Adrianem zmniejsza się i przechodzi do lewego górnego rogu. Resztę ekranu wypełniają dwa 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.

Następnie okienko z Adrianem wypełnia lewą połowę ekranu. Na prawo pojawiają się czarne napisy na białym tle. Najpierw napis alt tekst. Następnie tekst: alt=”tekst alternatywny”.

Przy omawianiu powodów użycia alt tekstów pojawia się biały napis na niebieskim tle: Po co te alty? Niżej trzy akapity z białym tekstem na czarnym tle. To: Zapewniamy pełny opis tego co znajduje się na obrazie. Prawidłowo dostarczony alt tekst wpływa na lepsze pozycjonowanie strony. Wymogi prawne i zgodność z WCAG.

Następnie tekst na niebieskim tle zmienia się w: Zasady dobrego tekstu alternatywnego. Następnie kolejne 5 paragrafów na czarnym tle: 1. Opisz, dlaczego dany obraz jest na stronie i co chcesz nim przekazać. 2. Napisz jaką funkcję spełnia obraz a nie jakie ma parametry. 3. Przekaż tylko to co jest istotne. Zachowaj zwięzłość. 4. Nie pisz “obraz zawiera”. 5. Obrazy dekoracyjne oznacz jako puste alt teksty, alt=””.

Następnie tekst na niebieskim tle zmienia się na: Czego unikać przy tworzeniu alt tekstów? Poniżej 3 kolejne paragrafy na czarnym tle. To: 1. W alt tekstach nie umieszczaj nazwy pliku. 2. Zawsze dodawaj tekst alternatywny. 3. Unikaj zbyt dokładnych i za długich opisów.

Następnie Adrian testuje swoją stronę z grafikami przygotowanymi przez AI. Okienko z Adrianem jest w lewym górnym rogu. Stron ma białe tło i czarne napisy i różne grafiki. To czerwony samochód wyścigowy oraz czarne gwiazdki.

Podczas testu sklepu Ikea okienko z Adrianem jest w prawym górnym rogu. Strona ma białe tło, czarne i białe napisy. U góry strony menu z różnymi kategoriami. To między innymi: Ogród i balkon, meble do przechowywania czy dzieci i niemowlęcia. Na środku banner ze zdjęciami czytanymi przez czytnik ekranu. Strona produktu ma białe tło. Na środku zdjęcie produktu – to brązowy wiklinowy kosz z białym materiałowym workiem w środku. Na prawo czarne napisy z opisem produktu i jego ceną.

Na koniec okienko z Adrianem 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.




Bez tego ani rusz - alternatywy tekstowe. Dziś Adrian pokazuje, tłumaczy i testuje sklep internetowy właśnie pod względem tak zwanych altów.

Koniecznie obejrzyjcie by nauczyć się jak pisać dobre teksty alternatywne.



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