Znaczenie dostępności stron internetowych
Kiedy wiele osób słyszy słowo "dostępność", myśli o tekście "alt" i niewiele więcej. Prawda jest taka, że podczas tworzenia strony internetowej, dostępność powinna być brana pod uwagę na każdym kroku. Według WHO (w 2023 r.) Szacuje się, że 1,3 miliarda ludzi jest niepełnosprawnych, co odpowiada 1 na 6 osób. Oznacza to, że 1 na 6 osób odwiedzających Twoją witrynę może potrzebować zmian w dostępności, aby móc ją przeczytać lub zrozumieć.
Ważna informacja:
Od 28 czerwca zacznie obowiązywać EAA (European Accessibility Act), co oznacza, że większość stron internetowych (zwłaszcza tych sprzedających towary lub usługi) musi być prawnie zgodna ze standardami dostępności opartymi na WCAG 2.1 Poziom AA. Więcej informacji można znaleźć na stronie Poziom dostępu.
Zawartość
TogglePoziomy dostępności (WCAG)
WCAG to skrót od Web Content Accessibility Guidelines. Opracowany przez World Wide Web Consortium w celu zwiększenia dostępności treści cyfrowych dla osób niepełnosprawnych.
- A (Podstawowe) - Minimalne wymagania (np. tekst alternatywny, nawigacja za pomocą klawiatury).
- AA (Standard) - zalecane dla większości stron internetowych (np. kontrast kolorów, przejrzysta nawigacja).
- AAA (Rozszerzony) - Najwyższy poziom, ale nie zawsze praktyczny (np. język migowy, wiele opcji nawigacji).
Dlaczego dostępność jest ważna?
Wyobraź sobie, że patrzysz na stronę internetową i nie możesz jej odczytać, ponieważ kolory są okropne, a słowa wyglądają dziwnie. Teraz wyobraź sobie, że każda strona internetowa, na którą patrzysz, zmaga się z tymi samymi problemami - poważnie utrudniłoby to korzystanie z Internetu. Ślepota barw dotyka około 1 na 12 mężczyzn (8%) i 1 na 200 kobiet. Ponadto w Wielkiej Brytanii około 10% populacji ma dysleksję.
Upewnienie się, że marka i strona internetowa mają wysoce kontrastujące kolory oznacza, że będzie ona znacznie łatwiejsza do odczytania dla rozsądnej części odwiedzających witrynę.
Jeśli jednak chodzi o rodzaj i rozmiar czcionki, nie ma naprawdę jasnych wytycznych dotyczących dostępności. Jednak ogólną zasadą jest, aby zacząć od 16 pikseli lub większych dla tekstu głównego. Staraj się unikać bardziej wyszukanych czcionek, takich jak czcionki skryptowe, np. Pacifico lub Homar (przykład poniżej) lub kursywą ponieważ mogą być trudniejsze do odczytania.
W przypadku niepełnosprawności takich jak dysleksja, można również pomóc w optymalizacji witryny, pisząc używając głosu czynnego, a nie biernego i utrzymując zwięzłość zdań. Unikaj również długich akapitów i niepotrzebnych "gofrów", jeśli możesz temu zaradzić. Używaj ciemnego tekstu na tle, które nie jest białe, i regularnie rozbijaj tekst za pomocą H2 i H3, aby umożliwić użytkownikom sprawdzenie, co zawiera tekst, bez konieczności czytania go w całości. W przypadku użytkowników niewidomych na kolory unikaj kolorów takich jak zielony, różowy i czerwony, ponieważ są to najczęstsze kolory, z którymi ludzie mają trudności.
Znaczenie tekstu alternatywnego
Wielu marketerów zdaje sobie sprawę z istnienia tekstu ALT (tekst alternatywny) z punktu widzenia SEO i może wykorzystywać to miejsce do umieszczania słów kluczowych w celu zwiększenia możliwości indeksowania strony przez boty wyszukiwarek. Jednak niewiele osób bierze pod uwagę fakt, że tekst alternatywny jest tam, aby czytniki stron internetowych i ekranów mogły go odczytać i nadać kontekst stronie. Umożliwia to osobom z wolnymi prędkościami Internetu i tym, którzy mają trudności z interpretacją obrazów, nadal rozumieć, co zawiera obraz, zwiększając dostępność witryny.
Najlepsze praktyki dotyczące tekstu alternatywnego.
Najlepszym sposobem na zoptymalizowanie tekstu alternatywnego pod kątem dostępności (ale także SEO) jest napisanie jasnego opisu obrazu i naturalne włączenie słowa kluczowego. W przypadku obrazów dekoracyjnych, które nie wymagają słów kluczowych w tekście alternatywnym, nie pozostawiaj ich pustych. Zamiast tego podaj "atrybut Null", aby czytniki ekranu wiedziały, że mają pominąć obraz.
Przykład atrybutu null:
<img src="”insertimagetitlehere.jpg”" alt="""">
Najlepszą praktyką jest pisanie tekstu alternatywnego dla ważnych obrazów, jeśli to możliwe. Na przykład słowo kluczowe to "Macbook", więc chcesz je wpisać w tekście alternatywnym, ale tekst alternatywny musi mieć również sens. Nie powinieneś też pisać zbędnego tekstu, tekst alternatywny nie powinien wyjaśniać, że jest to obraz (na przykład zdjęcie zawiera obraz).
Tekst alternatywny dla tego obrazu powinien brzmieć: "Osoba ubrana w żółty sweter i złote bransoletki, siedzi przy biurku pisząc na Macbooku".
Aplikacje i dodatki:
Otwarta czcionka dysleksji
Niektórzy dyslektycy używają rozszerzenia Dyslektyk otwarty aby zmienić czcionkę w przeglądarce na czcionkę zaprojektowaną specjalnie dla osób z dysleksją. Testując kompatybilność swojej witryny z tym rozszerzeniem i budując ją z myślą o tym, możesz upewnić się, że Twoja witryna jest tak przyjazna i dostępna dla dyslektyków, jak to tylko możliwe.
Colourblindly i Colourcontrast.CC.
Colourblindly to kolejne rozszerzenie do Chrome, które tym razem symuluje wygląd witryny dla osób z różnymi rodzajami ślepoty barw. Klikając na poszczególne typy ślepoty barw, możesz zobaczyć, jak Twoja witryna jest oglądana w czasie rzeczywistym. W połączeniu z Colourcontrast.cc to idealne połączenie, aby upewnić się, że Twoja witryna i branding jest jak najbardziej dostępna.
Tekst alternatywny AI:
Jeśli masz trudności z pisaniem tekstu alternatywnego, istnieją narzędzia AI, które mogą ci pomóc. Alttext.AI "czyta" obraz i generuje odpowiedni podpis. Pamiętaj, aby upewnić się, że sprawdziłeś to dwukrotnie i pamiętaj o dodaniu słowa kluczowego (tak płynnie, jak to możliwe) dla celów SEO.
Inne sposoby zapewnienia dostępności strony internetowej.
- Elementy interaktywne powinny być łatwe do zauważenia - Obejmuje to upewnienie się, że linki mają inny kolor i są podkreślone, a przyciski łatwo wyróżniają się na tle. Użyj narzędzi takich jak Colourcontrast.cc, aby sprawdzić dostępność kolorów i upewnić się, że kolory są kompatybilne. Unikaj kombinacji kolorów, takich jak szary i żółty oraz różowy i czerwony.
- Upewnij się, że witryna jest dostępna z klawiatury - Niektóre niepełnosprawności, takie jak dystrofia mięśniowa, mogą utrudniać korzystanie z myszy lub gładzików, więc użytkownicy polegają na nawigacji za pomocą klawiatury. Upewnienie się, że witryna może być nawigowana za pomocą klawiatury lub innych urządzeń ułatwiających dostęp, jest ważnym czynnikiem podczas jej tworzenia. Użycie klawisza tabulacji powinno prowadzić do każdego elementu strony internetowej, na którym można skupić uwagę.
- Elementy, na których należy się skupić, obejmują (ale w żadnym wypadku nie ograniczają się do): Wezwanie do działania Przyciski, Podsumowania oraz sterowanie audio i wideo.
- Projektowanie do użytku mobilnego - Niektórym osobom trudno jest korzystać z laptopa, więc polegają na telefonach komórkowych lub urządzeniach z ekranem dotykowym, takich jak iPady, aby poruszać się po stronach internetowych. Upewnienie się, że witryna ma responsywny wygląd i jest zoptymalizowana pod kątem urządzeń mobilnych, to świetny sposób na zwiększenie jej dostępności. Zwłaszcza, że obecnie około 9 na 10 osób korzysta z Internetu za pośrednictwem urządzeń mobilnych.
- Opisowy tekst zakotwiczenia. Znany również jako tekst linku, tekst kotwicy to klikalny tekst, który odsyła do innego miejsca (zwykle innej witryny lub strony). Upewnienie się, że jest on opisowy i jasny, zapewnia kontekst użytkownikom, szczególnie tym korzystającym z czytników ekranu lub z małą prędkością Internetu, którzy nie mogą kliknąć linku.
Idź naprzód i optymalizuj!
Teraz masz wszystkie narzędzia i informacje, aby zobaczyć, jak ważna jest dostępność strony internetowej. kiedy projektowanie strony internetowejUpewnienie się, że bierzesz pod uwagę, w jaki sposób wszyscy użytkownicy mogą wchodzić w interakcje z Twoją witryną, może również zwiększyć jej zdolność do indeksowania, wydłużyć czas trwania sesji i skrócić czas odrzuceń; wszechstronna wygrana. Jeśli chodzi o dostępność, perfekcja jest prawie niemożliwa. Nie oznacza to jednak, że akceptowalne jest przyznanie się do porażki przy pierwszej przeszkodzie. Zoptymalizuj swoją witrynę najlepiej jak to możliwe, weź pod uwagę wszystkie powyższe kwestie i bądź na bieżąco z nowymi sposobami optymalizacji witryny pod kątem dostępności.
Niezależnie od potrzeb w zakresie projektowania cyfrowego, jesteśmy tutaj, aby pomóc.
Masz ochotę na kawałek tortu? Niezależnie od tego, czy budujesz nową stronę internetową, planujesz nową kampanię marketingową, czy nawet rebranding swojej firmy, skontaktuj się z nami już dziś.
Powiązane posty
Rola kolorów i typografii w projektowaniu stron internetowych
W świecie projektowania stron internetowych kolor i typografia są czymś więcej niż tylko elementami dekoracyjnymi. Mają one kluczowe znaczenie dla sposobu, w jaki użytkownicy korzystają z witryny i wchodzą z nią w interakcję.
Jak zmaksymalizować korzyści z cyfrowego kierownika projektu?
Kierownik ds. projektów cyfrowych (DPM) jest odpowiedzialny za nadzorowanie i zarządzanie projektami cyfrowymi, zwykle od ich powstania do ukończenia. W Fresh Pies nasi DPM nadzorują takie działania, jak tworzenie stron internetowych, drukowanie i marketing.