Skip to main content

Dostepnosc dla tworcow tresci: pisanie i tworzenie inkluzywnych tresci

Dostepnosc nie zaczyna sie od projektu i nie konczy na kodzie. Tworcy tresci — autorzy, redaktorzy, marketerzy i producenci multimediow — maja bezposredni i znaczacy wplyw na to, czy tresci cyfrowe sa uzyteczne dla wszystkich. Slowa, ktore wybierasz, struktura, ktora tworzysz, obrazy, ktore opisujesz, i media, ktore produkujesz, okreslaja doswiadczenie uzytkownikow z niepelnosprawnosciami.

Dobra wiadomosc jest taka, ze pisanie dostepne w duzej mierze oznacza pisanie dobre. Jasne, ustrukturyzowane, opisowe tresci przynosa korzysci wszystkim uzytkownikom, nie tylko tym korzystajacym z technologii wspomagajacych.

Pisanie jasnym jezykiem

Jasne, bezposrednie pisanie jest wymogiem dostepnosci, a nie tylko preferencja stylistyczna. Uzytkownicy z niepelnosprawnosciami poznawczymi, trudnosciami w uczeniu sie, takimi jak dysleksja, osoby niebedace rodzimymi uzytkownikami jezyka oraz uzytkownicy, ktorzy sa po prostu zajeci lub rozproszeni — wszyscy korzystaja z tresci latwo zrozumialych.

Pisz krotkimi zdaniami w stronie czynnej. Uzywaj powszechnych slow zamiast zargonu lub terminologii technicznej — a gdy specjalistyczne terminy sa konieczne, wyjasniaj je. Dziel dlugie fragmenty na krotsze akapity z opisowymi podnaglowkami. Uzywaj list przy prezentowaniu wielu elementow lub krokow. Unikaj idiomow, metafor i odniesien kulturowych, ktore moga sie zle tlumaczyc.

WCAG wymaga, aby tresci byly jak najbardziej czytelne, a na poziomie AAA, aby zapewnione byly tresci uzupelniajace lub alternatywna wersja, gdy tekst wymaga umiejetnosci czytania na poziomie wyzszym niz niszze szkoly srednie.

Tekst alternatywny dla obrazow

Tekst alternatywny to jedna z najwazniejszych odpowiedzialnosci zwiazanych z trescia. Kazdy obraz przekazujacy informacje potrzebuje alternatywy tekstowej, ktora komunikuje te same informacje uzytkownikom, ktorzy nie moga zobaczyc obrazu. Czytniki ekranu odczytuja tekst alternatywny na glos, a takze pojawia sie on, gdy obrazy nie moga sie zaladowac.

Pisanie dobrego tekstu alternatywnego polega na komunikowaniu celu, a nie tylko wygladu. Zadaj sobie pytanie: jaka informacje ten obraz przekazuje, ktora uzytkownik powinien znac? Zdjecie zespolu na spotkaniu moze potrzebowac tekstu alternatywnego takiego jak "Zespol wspolpracujacy nad planami projektu wokol stolu konferencyjnego" zamiast "photo.jpg" lub mglistego "zdjecie zespolu."

Rozne typy obrazow wymagaja roznych podejsc:

Obrazy informacyjne, ktore przekazuja tresc, potrzebuja opisowego tekstu alternatywnego komunikujacego informacje. Zachowaj zwiezlosc — zazwyczaj ponizej 125 znakow — ale upewnij sie, ze istotne informacje sa obecne.

Obrazy funkcjonalne, takie jak ikony uzywane jako przyciski, potrzebuja tekstu alternatywnego opisujacego funkcje, a nie wyglad. Ikona lupy w przycisku wyszukiwania powinna miec tekst alternatywny "Szukaj", a nie "lupa."

Obrazy dekoracyjne, ktore dodaja walor wizualny, ale nie niosao informacji, powinny miec pusty tekst alternatywny (alt=""), aby czytniki ekranu calkowicie je pomijaly. Zdjecia stockowe uzywane wylacznie w celach estetycznych czesto naleza do tej kategorii.

Zlozone obrazy, takie jak wykresy, grafy, infografiki lub diagramy, potrzebuja czegos wiecej niz krotki atrybut alt. Podaj krotki tekst alternatywny identyfikujacy obraz, a nastepnie dostarczoj szczegolowy opis w poblizu — jako widoczny tekst, podpis lub polaczony dlugi opis.

Tekst linkow

Linki powinny miec sens poza kontekstem. Uzytkownicy czytnikow ekranu czesto nawiguja wyswietlajac liste wszystkich linkow na stronie. Jesli kazdy link mowi "Czytaj wiecej" lub "Kliknij tutaj", taka lista jest bezuzyteczna.

Pisz tekst linkow opisujacy, dokad link prowadzi lub co robi. Zamiast "Kliknij tutaj, aby pobrac nasz przewodnik po dostepnosci", napisz "Pobierz nasz przewodnik po dostepnosci." Zamiast "Dowiedz sie wiecej", napisz "Dowiedz sie wiecej o poziomach zgodnosci WCAG."

Nigdy nie uzywaj surowego adresu URL jako tekstu linku, chyba ze sam URL jest komunikowana informacja. Adresy URL sa trudne do odczytania na glos i jeszcze trudniejsze do zrozumienia, gdy sa slyszane.

Naglowki i struktura

Uzywaj naglowkow do tworzenia znaczacej hierarchii tresci, a nie do stylowania wizualnego. Uzytkownicy czytnikow ekranu nawiguja po naglowkach, aby przegladac tresc i przechodzic do interesujacych sekcji. Naglowki musza zachowywac logiczna kolejnosc — H1 dla tytulu strony, H2 dla glownych sekcji, H3 dla podsekcji w ramach tych sekcji — bez pomijania poziomow.

Kazda strona powinna miec dokladnie jeden H1. Podnaglowki powinny byc na tyle opisowe, aby uzytkownik mogl zrozumiec tresc sekcji na podstawie samego naglowka.

Tabele

Uzywaj tabel dla danych tabelarycznych — informacji, ktore maja znaczace relacje miedzy wierszami i kolumnami. Nigdy nie uzywaj tabel do ukladu wizualnego. Gdy uzywasz tabel, dodawaj odpowiednie komorki naglowkow za pomoca elementow <th> z atrybutami scope wskazujacymi, czy sa naglowkami wierszy czy kolumn. Dla zlozonych tabel z wieloma poziomami naglowkow uzywaj atrybutow id i headers, aby jawnie powiazac komorki danych z ich naglowkami.

Dodaj podpis lub podsumowanie opisujace cel tabeli, szczegolnie dla zlozonych tabel danych.

Listy

Prezentujac grupe powiazanych elementow, uzywaj faktycznych list HTML — list uporzadkowanych (<ol>) dla elementow sekwencyjnych i list nieuporzadkowanych (<ul>) dla elementow niesekwencyjnych. Nie tworz faltszywych list za pomoca lamtow linii i myslnikow lub znakow punktorow. Prawidlowe znaczniki list informuja czytniki ekranu, ile elementow jest na liscie i gdzie uzytkownik sie na niej znajduje.

Tresci wideo i audio

Tresci multimedialne maja specyficzne wymagania dostepnosci:

Napisy musza byc zapewnione dla wszystkich nagranych wczesniej wideo z dzwiekiem. Napisy musza obejmowac wszystkie wypowiedzi, identyfikowac mowce, gdy nie jest to wizualnie oczywiste, i obejmowac znaczace efekty dzwiekowe. Napisy powinny byc zsynchronizowane z dzwiekiem i dostepne jako napisy zamkniete, ktore uzytkownicy moga wlaczac i wylaczac.

Transkrypcje musza byc zapewnione dla nagranych wczesniej tresci wylacznie audio, takich jak podcasty. Transkrypcje powinny obejmowac cala tresc mowiona, identyfikowac mowcow i opisywac istotne dzwieki niemowne.

Audiodeskrypcja musi byc zapewniona dla nagranych wczesniej wideo, w ktorych wazne informacje wizualne nie sa przekazywane przez sciezke dzwiekowa. Audiodeskrypcja opisuje znaczace elementy wizualne — akcje, zmiany scen, tekst na ekranie — podczas naturalnych przerw w dialogu.

Automatycznie odtwarzany dzwiek musi byc mozliwy do unikniecia. Jesli dzwiek odtwarza sie automatycznie przez wiecej niz trzy sekundy, zapewnij mechanizm do wstrzymania, zatrzymania lub regulacji glosnosci niezaleznie od glosnosci systemowej.

Dostepne dokumenty

Pliki PDF i inne dokumenty do pobrania rowniez musza byc dostepne. Oznacza to, ze potrzebuja prawidlowej struktury znacznikow (naglowki, listy, tabele), logicznej kolejnosci czytania, tekstu alternatywnego dla obrazow, zdefiniowanego jezyka dokumentu i zakladek nawigacyjnych w dluzszych dokumentach.

Gdy to mozliwe, udostepniaj wazne informacje jako tresci internetowe zamiast dokumentow do pobrania. Tresci internetowe sa z natury bardziej elastyczne i latwiejsze do uczynienia dostepnymi niz PDF.

Tresci w mediach spolecznosciowych

Dostepnosc obejmuje rowniez media spolecznosciowe. Dodawaj tekst alternatywny do obrazow publikowanych na platformach spolecznosciowych — wiekszosc glownych platform teraz to obsluguje. Uzywaj CamelCase w hashtagach, aby czytniki ekranu mogly je prawidlowo rozpoznac (np. #WebAccessibility zamiast #webaccessibility). Unikaj przekazywania informacji wylacznie za pomoca obrazow lub wideo bez alternatyw tekstowych.

Charakterystyki sensoryczne

Nigdy nie podawaj instrukcji polegajacych wylacznie na charakterystykach sensorycznych, takich jak ksztalt, kolor, rozmiar, polozenie wizualne, orientacja lub dzwiek. Zamiast "kliknij zielony przycisk" lub "zobacz pasek boczny po prawej", podaj dodatkowy kontekst: "kliknij przycisk Wyslij" lub "zobacz sekcje Powiazane artykuly."

Czy Twoja strona jest dostępna?

Przeskanuj swoją stronę za darmo i poznaj swój wynik WCAG w kilka minut.

Przeskanuj stronę za darmo