Jak stworzyć alternatywny tekst dla obrazów w celu ułatwienia dostępu i SEO?

Opublikowany: 2018-06-12

Jeśli tworzysz lub publikujesz jakiekolwiek treści cyfrowe, prawdopodobnie już słyszałeś coś o tym, jak ważne jest tworzenie treści dostępnych dla osób niepełnosprawnych. Tekst alternatywny (nazywany również „tekstem alternatywnym”) pomaga zapewnić osobom niewidomym, niedowidzącym lub innym niepełnosprawnym fizycznie lub poznawczo dostęp i zrozumienie treści wizualnych, takich jak obrazy, wykresy i wykresy.

W Stanach Zjednoczonych ustawa Americans With Disabilities Act (ADA) wymaga, aby wszystkie treści cyfrowe były dostępne dla osób niepełnosprawnych. Inne kraje mają swoje własne wymagania. Dla osób korzystających z czytników ekranu lub innych technologii pomocniczych w celu uzyskania dostępu do treści cyfrowych, dostęp do treści jest niezbędny, aby zapewnić im dostęp do treści i ich zrozumienie w taki sam sposób, jak osoba niewymagająca pomocy.

Czym jest tekst alternatywny?

Tekst alternatywny, w najprostszej formie, to kod tła dodany do obrazu cyfrowego, który umożliwia czytnikowi ekranu lub innej technologii pomocniczej opisanie treści i znaczenia obrazu osobom, które nie mogą go zobaczyć lub mogą nie być w stanie przetworzyć obrazu z powodu niepełnosprawność poznawcza.

Jest używany na kilka sposobów:

  • Czytniki ekranu i inne technologie wspomagające używają go do opisywania obrazu użytkownikom, aby mogli uzyskać dostęp do treści i ją zrozumieć.
  • W przeglądarkach, w których obrazy są blokowane, zamiast obrazu wyświetlany jest tekst alternatywny.
  • Wyszukiwarki używają go do określania treści i kontekstu obrazów.

Czytniki ekranu mogą stwierdzić, kiedy obraz jest obecny, ale nie mogą analizować ich zawartości. Tekst alternatywny jest odczytywany zamiast obrazu, aby umożliwić użytkownikom zrozumienie znaczenia i kontekstu obrazu.

Jak dodać tekst alternatywny do obrazów

Niestety nie ma jednego sposobu na dodanie tekstu alternatywnego. Różne platformy oprogramowania robią to na różne sposoby. Sprawdź dokumentację swojego oprogramowania lub pliki pomocy, aby uzyskać informacje na temat dodawania tekstu alternatywnego do obrazów z poziomu tej platformy.

Na przykład w programie Microsoft Word kliknij obraz prawym przyciskiem myszy i wybierz opcję Dodaj tekst alternatywny. Następnie dodaj swój tekst do okna tekstu alternatywnego na pasku bocznym, który się otworzy. Kiedy skończysz, po prostu zamknij pasek boczny, a tekst alternatywny zostanie zapisany z obrazem.

Animowany GIF przedstawiający użytkownika klikającego prawym przyciskiem myszy obraz i wypełniającego tekst alternatywny za pomocą Microsoft World

Tekst alternatywny a podpisy

Tekst alternatywny i podpisy są podobne pod wieloma względami. Oba zawierają opis obrazu i kontekst, w jaki obraz pasuje do reszty treści. Jednak tekst alternatywny jest zwykle „za kulisami”, podczas gdy podpisy są widoczne dla każdego, kto ma dostęp do strony. Ponadto podpisy nie zawsze mogą zawierać pełny opis obrazu i jego zawartości, ponieważ są one zwykle używane w celu uwydatnienia lub zapewnienia kontekstu widocznego obrazu.

Jednak podpisy mogą być bardziej przydatne do celów ułatwień dostępu. Podpisy są szczególnie przydatne w przypadku obrazów, których dokładne opisanie może wymagać dużej ilości tekstu alternatywnego. Zamiast tworzyć długi i mniej użyteczny tekst alternatywny, dłuższe opisy można tworzyć za pomocą podpisu. Następnie tekst alternatywny może zawierać krótki opis obrazu i sugerować, że użytkownik zajrzy do podpisu, aby uzyskać pełniejszy opis i/lub kontekst.

Najlepsze praktyki dotyczące tekstu alternatywnego

Tworzenie dobrego tekstu alternatywnego to nie nauka — to raczej sztuka. Zbyt krótki i może nie podawać wystarczająco dużo szczegółów. Za długo i może być nużące. Ale oto kilka rzeczy, o których należy pamiętać podczas tworzenia tekstu alternatywnego.

1. Dokładnie opisz zawartość i funkcję obrazu

Osoby korzystające z technologii pomocniczych polegają na zawartości tekstu alternatywnego, aby przekazać im nie tylko to, co zawiera obraz, ale także kontekst dla obrazu, jeśli nie jest on łatwo dostępny. W zależności od złożoności obrazu, lepiej podać kontekst w tekście treści, aby uniknąć zbyt długiego tekstu alternatywnego.

2. Im krótszy, tym lepiej, ale nie za krótki

Jednym z głównych problemów związanych z tekstem alternatywnym jest długość. Wiele czytników ekranu* odczyta cały tekst alternatywny lub go w ogóle. Innymi słowy, często nie ma możliwości, aby osoba korzystająca z technologii wspomagającej przeskoczyła do przodu w celu znalezienia bardziej odpowiednich treści lub zatrzymała się i wróciła do czegoś, czego nie rozumiała. Jeśli najtrafniejsza treść znajduje się na końcu tekstu alternatywnego, użytkownik będzie musiał wysłuchać wszystkich nieistotnych informacji, zanim odkryje, dlaczego obraz został dodany.

Podaj wystarczająco dużo szczegółów, aby dokładnie opisać obraz, ale unikaj drobnych szczegółów, które niekoniecznie podkreślają znaczenie tego, dlaczego obraz został dołączony.

Zdjęcie kodów stron zaplecza na monitorze komputera. Programista pracujący nad projektem internetowym w ruchliwym biurze. Na zdjęciu niewielka głębia ostrości. W pliku znajduje się wiele linii kodu.

Na przykład na powyższym obrazku można go opisać na kilka sposobów w zależności od tego, co próbuje przekazać w kontekście otaczającej treści.

Kuszące byłoby opisanie go po prostu jako ekran komputera. A w niektórych przypadkach może to wystarczyć. Jednak w artykule o używaniu rozmycia ekranu do ukrywania poufnych informacji może być konieczne opisanie obrazu jako ekranu komputera z zamazanym drzewem plików w celu zachowania prywatności.

Jeśli artykuł dotyczył określonego typu kodowania, a obraz próbował pokazać przykład tego kodu, konieczne może być bardziej szczegółowe omówienie kodu, który jest wyświetlany.

A może artykuł dotyczy szerokości skosu na ekranie komputera, więc zamiast tego musiałby być szczegółowy.

W tym sensie tworzenie dobrego tekstu alternatywnego jest bardziej formą sztuki niż nauką. Twój tekst alternatywny powinien być wystarczająco długi, aby dokładnie opisywać obraz, ale nie tak długi, aby był uciążliwy.

3. Używaj poprawnej interpunkcji i pisowni

Większość czytników ekranu* odczyta tekst alternatywny dokładnie tak, jak się pojawia, z uwzględnieniem błędów ortograficznych i interpunkcyjnych. W programach takich jak Microsoft Word nie ma możliwości sprawdzenia pisowni ani gramatyki tekstu alternatywnego, więc należy zachować szczególną ostrożność.

Podobnie, musisz użyć odpowiedniej interpunkcji, w przeciwnym razie tekst alternatywny może brzmieć jak naprawdę denerwujące zdanie przedłużające lub, co gorsza, w ogóle nie ma sensu.

W rzeczywistości nie jest złym pomysłem utworzenie nowego dokumentu, w którym możesz skomponować tekst alternatywny za pomocą wbudowanych modułów sprawdzania pisowni i gramatyki programu Word, a następnie, gdy będziesz zadowolony i wolny od błędów, skopiuj go i wklej do alt okno tekstowe dowolnego oprogramowania, którego używasz.

Większość nowoczesnych przeglądarek automatycznie sprawdza pisownię, więc jeśli piszesz coś w systemie zarządzania treścią (CMS) lub w Dokumentach Google, prawdopodobnie Twoja pisownia i gramatyka zostaną sprawdzone, ale mimo wszystko sprawdzanie jest dobrą praktyką.

Wskazówka dla profesjonalistów: upewnij się, że weryfikatorzy treści również sprawdzają, czy tekst alternatywny jest poprawnym opisem obrazu, ma poprawną pisownię i gramatykę oraz jest jasny i zwięzły, gdy przeglądają resztę treści.

4. Nie potrzebujesz tytułu w celu ułatwienia dostępu, ale może on być pomocny z innych powodów

Z punktu widzenia ułatwień dostępu nadawanie obrazowi tytułu nie jest konieczne. Większość czytników ekranu nawet się tym nie przejmuje. Jednak tytuł pojawi się jako podpowiedź, gdy ktoś przeglądający Twoją witrynę najedzie na obraz. Tytuł może również pomóc wyszukiwarkom lepiej zrozumieć zawartość i cel obrazu.

To powiedziawszy, nigdy nie powinieneś poświęcać jasnego i zwięzłego tekstu alternatywnego, który dokładnie opisuje obraz, na rzecz zdobycia dodatkowego punktu lub dwóch w skali SEO.

5. Nie umieszczaj „obrazu”, „zdjęcia” itp.

Gdy czytnik ekranu napotka obraz, poinformuje użytkownika, że ​​napotkał obraz. Jeśli więc tekst alternatywny zawiera frazę „obraz”, czytnik ekranu powie coś w stylu „Obraz. Obraz ekranu komputera…”

6. Jeśli Twój obraz zawiera tekst, musi być zawarty w tekście alternatywnym

Ponieważ żaden tekst w obrazie nie byłby czytelny dla czytnika ekranu, musi być zawarty w tekście alternatywnym, jeśli ma znaczenie dla znaczenia obrazu i kontekstu z otaczającą zawartością.

Znak z napisem „ZAPYTAJ WIĘCEJ PYTAŃ” wielkimi literami na ścianie między dwoma zegarami analogowymi.

Patrząc na powyższy obrazek, w zależności od kontekstu i intencji, może być konieczne opisanie w tekście alternatywnym napisu „Zadaj więcej pytań”. Jeśli warto lepiej zrozumieć intencję, być może trzeba będzie również opisać, że tekst jest pisany wielkimi literami.

Jednak w artykule o tym, jak umieścić znak na ścianie, gdzie rzeczywisty tekst znaku nie jest ważny, wystarczy opisać, że obraz przedstawia znak pośrodku dwóch zegarów ściennych.

Jak wspomniano w sekcji Tekst alternatywny a podpisy powyżej, jeśli obraz zawiera dużo tekstu, zazwyczaj lepiej jest umieścić te informacje w podpisie. Możesz również dołączyć go do otaczającej treści tekstowej. W takich przypadkach warto zaznaczyć w tekście alternatywnym, że dalsze informacje o obrazie znajdują się w podpisie lub treści tekstu.

Ze względu na wytyczne dotyczące stosunkowo krótkiego tekstu alternatywnego, w przypadku obrazów ze znacznikami i tekstem, takich jak te, które można utworzyć w Snagit, sugeruję użycie podpisu lub otaczającego tekstu, aby opisać odpowiednie znaczniki i tekst. Będzie to o wiele łatwiejsze i przydatne dla użytkowników.

7. Nie polegaj na sprawdzaniu dostępności

Wiele narzędzi do tworzenia treści, takich jak Microsoft Word i Adobe Acrobat, jest wyposażonych w przydatne narzędzia do sprawdzania dostępności. Skanują treści i szukają typowych błędów popełnianych przez twórców treści, które mogą uniemożliwić dostęp do treści. Są świetne i zdecydowanie powinieneś ich używać do sprawdzania treści.

Ale jest problem: Twój moduł sprawdzania ułatwień dostępu może sprawdzić, czy istnieje tekst alternatywny, ale nie może określić jakości tego tekstu alternatywnego. Z tego powodu dobrze jest, aby Twój recenzent treści również dwukrotnie sprawdził treść tekstu alternatywnego, aby upewnić się, że jest ona użyteczna i poprawna.

8. Obrazy z linkami muszą zawierać miejsce docelowe linku w tekście alternatywnym

Inną zasadą dostępnych treści jest to, że wszystkie hiperłącza powinny opisywać użytkownikowi, dokąd je zabierze. Z tego powodu linki takie jak „kliknij tutaj” lub „odwiedź nas” są zazwyczaj zabronione.

W ten sam sposób obraz, który działa jako link, powinien również opisywać użytkownikowi, dokąd zaprowadzi go link. Na przykład, jeśli masz na stronie przycisk z napisem „Pobierz bezpłatną wersję próbną”, tekst alternatywny powinien brzmieć mniej więcej w stylu „Link: Pobierz bezpłatną wersję próbną”.

Tekst alternatywny dla wykresów, wykresów i tabel

Wykresy, wykresy i tabele stanowią szczególnie trudny problem, jeśli chodzi o tekst alternatywny. Ponieważ mają tendencję do prezentowania stosunkowo dużej ilości informacji, każdy tekst alternatywny może być dość długi i trudny do naśladowania. W związku z tym zdecydowanie polecam użycie podpisu, który dokładnie opisuje zawartość wykresu lub wykresu i jego związek z resztą treści. Twój tekst alternatywny może wtedy po prostu opisywać tytuł wykresu i zauważyć, że pełny opis zawartości jest dostępny w podpisie lub treści tekstowej.

Jak opisałbyś powyższy wykres (z naszego ostatniego artykułu na temat naszych oryginalnych badań nad komunikacją w miejscu pracy) komuś, kto go nie widzi? Pamiętaj, że Twój tekst alternatywny (lub, co bardziej prawdopodobne, podpis lub treść treści) musiałby zawierać wszystkie istotne informacje, aby mogli je zrozumieć w taki sam sposób, jak osoba, która może je zobaczyć.

W tym artykule na blogu, ponieważ informacje na wykresie niekoniecznie odnoszą się do punktu, który staram się poruszyć, mógłbym po prostu opisać go jako złożony wykres informacji o preferencjach milenialsów dotyczących narzędzi wizualnych w pracy. Gdyby ten artykuł dotyczył badań, musiałbym opisać rzeczywistą treść w tekście alternatywnym lub bardziej odpowiednio w treści otaczającej treści.

W przeciwieństwie do obrazów większość tabel jest dostępna dla czytników ekranu. Użytkownik może poruszać się po tabeli, aby uzyskać odpowiednie informacje, jeśli chce. Jednak tekst alternatywny może zawierać krótki opis tabeli i przegląd tego, co ona zawiera, aby użytkownik mógł zdecydować, czy chce uzyskać dostęp do tabeli, czy nie.

Tekst alternatywny i SEO

Tekst alternatywny jest niezbędny do tworzenia dostępnych treści. Ma jednak bonus: może również pomóc w SEO!

To powiedziawszy, najwyższym i najlepszym celem tworzenia tekstu alternatywnego jest poprawa dostępności treści cyfrowych. Próba oszukania systemu poprzez napychanie tekstu alternatywnego nieodpowiednimi słowami kluczowymi lub innymi nieistotnymi informacjami może być w rzeczywistości szkodliwa.

W tym artykule Google o publikowaniu obrazów zauważają, że używają tekstu alternatywnego obrazu, aby zrozumieć temat obrazu i jego związek z resztą treści. Sugerują również tworzenie tekstu alternatywnego, który koncentruje się na „tworzeniu przydatnych, bogatych w informacje treści, które odpowiednio wykorzystują słowa kluczowe i są w kontekście treści strony”. Google zauważa, że ​​tekst alternatywny wypełniony nieodpowiednimi słowami kluczowymi lub tekst alternatywny, który nie ma związku z obrazem lub resztą treści strony, może spowodować, że Twoja witryna zostanie uznana za spam.

Podobnie Yoast, twórca jednej z najpopularniejszych wtyczek WordPress do SEO, zaleca, aby używać słowa kluczowego artykułu, gdy jest to możliwe i gdy jest to właściwe, ale wyraźnie mówi, aby nie umieszczać słów kluczowych w każdym kawałku tekstu alternatywnego.

Chociaż jest to dobry przegląd podstaw tworzenia alternatywnego tekstu dla obrazów i SEO, z pewnością nie jest to ostatnie słowo, a nie temat. Wiele organizacji ma własne wytyczne dotyczące tworzenia tekstu alternatywnego, podczas gdy inne mogą nawet nie zdawać sobie sprawy, że w ogóle go potrzebują!

Czy tworzysz tekst alternatywny dla obrazów zawartych w treści cyfrowej? Chętnie wysłucham twoich sugestii, pomysłów i zmagań!

*Uwaga: ze względu na różnice w sposobie, w jaki różne technologie pomocnicze obsługują obrazy i tekst alternatywny, ten artykuł nie stanowi wyczerpującego przeglądu zachowania wszystkich technologii pomocniczych. Zamiast tego rozważ sugestie zawarte w niniejszym dokumencie jako zestaw wytycznych zapewniających, aby tekst alternatywny dla obrazów był dostępny dla jak największej liczby osób.