Kolejna część poradnika wyjaśniającego, jak umieszczać dostępne treści na stronie internetowej. Tym razem pokażemy jak wstawiać w treści odnośniki i tabele. Odnośniki (ang. link) to, obok tekstu, absolutna podstawa publikacji internetowych. Tak naprawdę to właśnie one budują cały Internet!
Ciekawostka: Pewnie wiesz, że wszystkie strony (i nie tylko) zbudowane są w języku HTML. Czy wiesz, co ten skrót oznacza?
HTML – HyperText Markup Language. Czyli język znaczników hipertekstu. Brzmi to niezbyt zrozumiale.
Co to jest hipertekst? Podamy proste, choć nie wyczerpujące tematu wyjaśnienie.
To słowo oznacza sposób zorganizowania tekstu lub wielu tekstów. Pozwala on przemieszczać się w tekście nie tylko po kolei jak w książce, gdy czytamy kolejne akapity, rozdziały itd. Hipertekst pozwala przeskakiwać elastycznie pomiędzy treściami za pomocą hiperłączy. Znowu dziwne słowo.
Hiperłącze to inaczej odnośnik (ang. hyperlink, link).
To znaczy, że podstawą istnienia stron, aplikacji, galerii i właściwie niemal wszystkiego w cyfrowych publikacjach są właśnie te łączniki, czyli nasze linki.
Linki zawsze znajdziemy na stronach, w wiadomościach e-mail, w dokumentach Worda, czy PDF. Mają duży wpływ na czytelność i łatwość uzyskania informacji przez użytkowników. Poprawnie i mądrze umieszczone odnośniki mogą też poprawić pozycję twojej treści w wyszukiwarkach.
Tabele to z kolei wygodny element do pokazania informacji w sposób uporządkowany. Strony uczelni i instytucji zawierają ich zwykle dużo. Pokażemy, jak sprawić, żeby stały się naprawdę przydatne dla osób niewidomych. Przy okazji staną się zrozumiałe również dla wyszukiwarek internetowych. Pokażemy też, kiedy nie warto używać tabel i czym je zastąpić na przykładzie WordPressa.
Jakie linki tu opisujemy
Odnośniki pełnią wiele funkcji na stronach internetowych. Mogą być np. elementami menu, czy innych, aktywnych obszarów budujących stronę. Nas głównie interesują te linki, które możemy wstawiać w publikowanych treściach. Większość redaktorów stron ma dostęp tylko do tej części, a zresztą to właśnie treść najczęściej zawiera interesujące czytelników informacje. Reszta linków na stronach pełni zwykle funkcje użytkowe.
Linki można podzielić w zależności od:
- rodzaju zasobu, do którego prowadzą: inne teksty, inne strony, pliki do pobrania,
- rodzaju prezentacji samego linku: link tekstowy, link graficzny.
Na stronach, w tekstach artykułów znajdziesz każdy z tych rodzajów linków.
Dlaczego treść linku ma znaczenie? Użytkownicy czytników ekranu, osoby niewidome i słabowidzące często chcą szybko przejrzeć linki na stronie. Czytniki umożliwiają więc skakanie po linkach w obrębie strony i zapoznanie się z nimi. Osoba widząca skanuje wzrokiem cały ekran i od razu może wychwycić interesujące elementy. Chcemy, żeby każdy, niezależnie od stanu zdrowia, mógł ocenić, czy warto dalej czytać cały tekst. Dobrze opisane odnośniki ułatwiają zapoznanie się nim. Poprawnie nazwane linki są też bardziej estetyczne i nie psują wyglądu tekstu.
Jak poprawnie wstawić linki.
Treść linku opisuje, dokąd ten link prowadzi.
Ta zasada brzmi rozsądnie i wydaje się oczywista. W końcu idea odnośnika to: „Tu masz element, który musisz kliknąć, jeśli chcesz poczytać na dany temat”. Tymczasem niezwykle często wpadamy w pułapkę podczas redagowania tekstu. Nagle okazuje się, że gdzieś trzeba dodać link. Więc dodajemy go na końcu zdania, a powinniśmy go wkomponować w treść. Czasem wychodzi nieźle, ale nieraz — całkiem fatalnie. Zwłaszcza że przyzwyczailiśmy się do nie najlepszych wzorców.
Oto kilka prostych reguł poprawnej treści linków. Podajemy przykłady błędów i od razu propozycję poprawnego rozwiązania.
W linkach opisuj: „co zobaczymy” a nie „gdzie to jest”
Fragment artykułu „Wywiad z prof. Alojzym Z. Nowakiem, rektorem UW”:
Cały wywiad można przeczytać na stronie XYZ.pl >>
Problem: Treść odnośnika to „stronie XYZ.pl większe większe”. Osobie korzystającej z technologii wspomagających nie mówi to nic na temat treści, którą znajdziemy pod tym linkiem. Dodatkowo dodano znaki matematyczne zamiast strzałki. Są one odczytywane.
Propozycja poprawy:
Cały wywiad z prof. Alojzym Z. Nowakiem znajduje się na stronie XYZ.pl
Treść linków jednoznacznie wyróżnia je spośród innych.
Fragment strony jednej ze specjalizacji na Uniwersytecie:
- weź udział w rekrutacji na studia II stopnia na kierunku filologia polska na Wydziale Polonistyki UW (więcej informacji),
- weź udział w egzaminie z kultury języka polskiego i redakcji tekstów (więcej informacji).
Problem: W obu przypadkach treść linku to „więcej informacji” . Niestety, oderwane od reszty zdania, to nic nie znaczy. Na dodatek obydwa linki brzmią identycznie, mimo że prowadzą w różne miejsca.
Propozycja poprawy:
Treść linków przekazuje konkretną informację.
Podobnie na stronie jednego z wydziałów — jeden wielu z takich samych odnośników w rozwijanym FAQ:
Gdzie znajdę listę wymaganych dokumentów?
Lista jest dostępna tutaj.Jakie dokumenty muszę złożyć, jeśli jestem obcokrajowcem albo rekrutuję się na podstawie dyplomu wydanego za granicą?
Lista jest dostępna tutaj.
Problem: Treść linków to „tutaj” i nic nie oznacza bez przeczytania treści obok.
Propozycja poprawy:
Zamiast na siłę robić pytanie i odpowiedź, można prościej:
- Lista wymaganych dokumentów.
- Dokumenty, które musisz złożyć, jeśli jesteś obcokrajowcem albo rekrutujesz się na podstawie dyplomu wydanego za granicą.
Treść nie powinna być adresem w internecie. Chyba że to powszechnie rozpoznawany, krótki adres (na przykład www.gov.pl).
Przykład z informacji na temat programu Erasmus+ na jednym z wydziałów:
Pytania proszę zgłaszać przez formularz czynny do północy 28 stycznia: https://forms.gle/HmsewLwausv1taAB
Problem. Ta treść nie powie użytkownikom czytników ekranu, co jest celem tego odnośnika.
Propozycja poprawy.
Pytania proszę zgłaszać przez formularz czynny do północy 28 stycznia.
Podaj, w jakim formacie jest plik do pobrania.
Dlaczego to jest ważne? Użytkownicy technologii wspomagających dostaną informację, czy potrzebny jest dodatkowy program do odczytania tego pliku. Szczególnie przydatna jest, gdy zamieszczamy kilka wersji, np. DOCX, PDF. Wtedy łatwo zdecydować, który plik będzie najłatwiej odczytać, a który wydrukować. Różne formaty plików oferują też różną dostępność.
Ciekawostka. Jaki format pliku wybrać, żeby umieścić go w internecie? Dlaczego PDFy są naprawdę złe?
Dzisiejsze przeglądarki łatwo otwierają większość plików PDF. Spotkaliśmy się z podejściem, że zamiast tworzyć nową stronę, wstawiany jest link do pliku w tym formacie. To fatalna pomyłka.
Najbardziej dostępnie: HTML. Jeśli tekst dokumentu jest stosunkowo krótki i nie trzeba go drukować w konkretnym formacie, to skopiuj go i wklej na stronę lub do artykułu. Najlepsze rezultaty osiągniesz, kopiując tekst z plików DOCX, ODF. Najwięcej pracy będzie po wklejeniu treści z PDF.
Całkiem dostępnie: Dokumenty z edytorów tekstu, np. Microsoft Word, Open Office itp. Niezłe sa też pliki arkuszy kalkulacyjnych (XLSX). Te pliki są zwykle dostępne i łatwe do odczytania, mimo że wymagają dodatkowego oprogramowania. Taką treść można wyświetlić sobie w powiększeniu, dobrze wyświetli się na każdym urządzeniu, niezależnie od wielkości ekranu. Zawiera semantyczne znaczniki podobne do HTML. Łatwo można je odczytać programami z syntezą mowy (TTS — text to speech). Można je konwertować i przyzwoicie drukować.
Ostateczna, niezalecana opcja: Pliki PDF stosuj tylko, gdy wymagany jest ich wydruk. Mało kto pamięta, do czego, tak naprawdę, służą te pliki. Często panuje błędne przekonanie, że taki dokument jest ważniejszy, bo zawiera np. skan podpisu dyrektora. Co prawda przeglądarki wyświetlają je, ale bardzo źle sformatowane. Adobe Acrobat Reader też nie zapewnia łatwego odczytu technologiom wspomagającym. Przyczyna jest prosta — dokumenty PDF firma Adobe stworzyła do ich drukowania, nie, czytania. Publikacje w tym formacie mają ściśle określony rozmiar kartki, informacje o spadach, liniach cięcia arkuszy, polach wydruku, nawet o ilości farby dla maszyny drukarskiej do uzyskania koloru. Dlatego dokument PDF ze stronami wielkości A4 wyświetlony na ekranie telefonu jest albo malutki, albo widzimy tylko jego fragment. Po skopiowaniu i wklejeniu każda linijka będzie osobnym akapitem, bo PDF dokładnie określa niezmienny wygląd drukowanej strony.
Dlaczego PDF jest tak wszechobecny? Z przyzwyczajenia i oszczędności. Producenci urządzeń, wydawcy publikacji, prawnicy, urzędy itp. drukowali kiedyś wszystko. Potem, wraz z rozwojem i powszechnością internetu, umieścili te same treści w wersji cyfrowej, do pobrania. Wszyscy mieli już gotowe dokumenty PDF. Zamiast je konwertować, czy publikować jako HTML najłatwiej było po prostu dać ludziom już istniejący format. W końcu dawało się je jako tako przeczytać, choć niewygodnie i niedostępnie. Zalew PDF w sieci spowodował wrażenie, że tak właśnie trzeba robić.
Informacja o formacie pliku może być krótka. Jeśli możesz, podaj też wielkość pliku. To czasem ułatwi decyzję o jego pobraniu, zwłaszcza na słabszym łączu internetowym. Poniżej przykłady:
Pobierz instrukcję obsługi. – tak wygląda nieopisany link. Musieliśmy podać oszukany adres, bo nasza strona automatycznie dodaje informacje do odnośników.
Pobierz instrukcję obsługi. – to jest link poprawiony automatycznie przez naszą stronę. Zawiera element graficzny z napisami oraz ukryty tekst dla czytników ekranu. Osoba niewidoma przeczyta „pobierz instrukcję obsługi, format docx, wielkość pliku 13kb”.
Pobierz instrukcję obsługi (DOCX). – po prostu na końcu dodaliśmy krótką informację o formacie. To zwykle wystarczy.
Obrazki, które są linkami. Nie opisuj ich wyglądu.
Obrazki z linkiem też mogą mieć treść i wstawiamy ją w tekście alternatywnym. Ten tekst jest niewidoczny na ekranie, ale usłyszą go użytkownicy czytników ekranu. Dokładny opis i zasady podaliśmy już w poradniku o publikowaniu dostępnych obrazów. Tu przypomnimy.
Nieważne, jaka jest treść obrazka. Ważne, do czego prowadzi jego link. Czyli obrazek z logo Uniwersytetu Warszawskiego, prowadzący do głównej strony uniwersyteckiej opisujemy jako „Uniwersytet Warszawski — strona główna”, zamiast „logotyp UW”. Użytkownik nie jest kierowany do logotypu tylko na stronę UW i taką informację powinien usłyszeć.
Tabele na stronie internetowej. Kiedy i jak ich używać.
Tabele pomagają prezentować uporządkowane treści i dane. Istnieją w języku HTML niemal od samego początku. Spotykamy je bardzo często w następujących przypadkach:
- przedstawienie wyników badań;
- harmonogram zadań i miejsc;
- spisy pracowników i sal;
- kalendarze;
- tabele do pozycjonowania innych elementów, żeby układały się równo na stronie – to błąd! Nie rób tego! Pokażemy, czym zastąpić tabelę.
Zaletą tabel jest ich czytelność i uporządkowanie.
Wadą tabel jest ich mała elastyczność w wyświetlaniu na ekranie. Często zdarza się, że szeroka tabela nie mieści się w widoku. Dotyczy to szczególnie urządzeń z wąskim ekranem jak smartfony. Edytory, które pozwalają wstawiać tabelę, zwykle wstawiają domyślnie jej najprostszą, niezgodną z WCAG wersję. Na szczęście mają też narzędzia do poprawnego oznaczenia prostych tabel.
Prawidłowo zbudowana, prosta tabela.
Zdarzają się bardzo skomplikowane układy tabel, wielokrotnie zagnieżdżone, o wielu kierunkach odczytu. To już jest wyższa szkoła jazdy. Zwykle wymaga ją one znajomości HTML i atrybutów tabeli oraz jej komórek. Jednak każda tabela, nieważne, czy prosta, czy skomplikowana powinna zawierać komórki nagłówkowe. To absolutna podstawa, wymagana w specyfikacji WCAG, kryterium 1.3.1 – Informacje i Relacje. Zobacz poprawny przykład.
| Pracownik | Sala | Godziny dyżuru |
|---|---|---|
| Adam Zmyślony | 21 | 09:00 – 11:00 |
| Emilia Nieprawdziwa | 33 | 12:00 – 14:00 |
| Zygmunt Przypadkowy | 5 | 15:00 – 17:00 |
Ta tabelka składa się z 4 rzędów. Ma zdefiniowany wiersz komórek nagłówka oraz trzy wiersze z komórkami danych. Właśnie taka jest logika budowy tabel w HTML. Edytory pozwalają ustawić liczbę wierszy i kolumn, ale finalny kod, to tylko wiersze (<tr> – table row) i w nich podstawowe komórki nagłówków (<th> – table heading) lub treści/danych (<td> – table data). Kolumny pokazywane są na podstawie tych podstawowych elementów.
Dlaczego koniecznie wstawiamy nagłówki tabel? Wyobraźmy sobie, jak tabelę czyta osobie niewidomej czytnik ekranu. Jeżeli powyższa tabela nie miałaby określonego nagłówka, tylko wizualnie wyróżnione opisy kolumn to wyglądałaby tak:
Przykład niepoprawny.
| Pracownik | Sala | Godziny dyżuru |
| Adam Zmyślony | 21 | 09:00 – 11:00 |
| Emilia Nieprawdziwa | 33 | 12:00 – 14:00 |
| Zygmunt Przypadkowy | 5 | 15:00 – 17:00 |
Tak niestety najczęściej wstawiane są tabele. Osoba niewidoma czyta po kolei komórki od góry, rzędami od lewej do prawej. Usłyszy wtedy:
- tabela z 4 wierszami i 3 kolumnami, linia 1 – znaleziono tabelę;
- kolumna 1, Pracownik;
- kolumna 2, Sala;
- kolumna 3, Godziny dyżuru;
- linia 2, kolumna 1, Adam Zmyślony – tu jeszcze może pamiętamy, że to pracownik;
- kolumna 2, 21 – tu już nie wiadomo, co oznacza „21”;
- kolumna 3, od dziewiątej do jedenastej – tu słychać tylko zakres godzin, ale nie wiemy, czego dotyczy.
Poprawna wersja.
Jeżeli istnieje w kolumnie komórka nagłówka, to odczytywana jest przed wartością tej komórki, czyli na przykład:
- „kolumna 2, Sala, 21” – wiadomo, że „21” to numer sali;
- „kolumna 3, Godziny dyżuru, od dziewiątej do jedenastej” – wszystko jest jasne.
To logiczne powiązanie pomiędzy zawartością komórki a jej opisem w nagłówku. Co ciekawe wyszukiwarka Google też tak samo analizuje tabele i jeśli treść jest istotna, może ją wyświetlić jako odpowiedź na wyszukiwanie.
Tytuł całej tabeli — dodatkowy, niestety zaniedbywany element.
Język HTML przewiduje dla tabel element <caption>, który jest powiązany logicznie z tabelą tak jak nagłówki kolumn lub wierszy z komórkami. To dodatkowa łatwo dostępna informacja dla technologii wspomagających i wyszukiwarek.
| Pracownik | Sala | Godziny dyżuru |
|---|---|---|
| Adam Zmyślony | 21 | 09:00 – 11:00 |
| Emilia Nieprawdziwa | 33 | 12:00 – 14:00 |
| Zygmunt Przypadkowy | 5 | 15:00 – 17:00 |
Problemem w WordPressie i niektórych innych edytorach jest brak obsługi tego nagłówka tabeli. Trzeba wstawić go ręcznie, edytując tabelę w HTML. Nie jest to trudne, ale edytor blokowy WordPressa wyświetli błąd i trzeba będzie przekształcić całą tabelę na HTML, co potem utrudnia jej edytowanie.
Wstawianie elementu <caption> w kodzie tabeli w edytorze WodPressa
Na pasku narzędzi powyżej tabeli wybierz ostatni przycisk — trzy kropeczki i w rozwiniętym menu wybierz „Edytuj w HTML”. Wyświetlony zostanie nieco odstraszający kod. Na szczęście musimy go tylko troszeczkę zmienić. Poszukaj znacznika <table> i bezpośrednio za nim wpisz następujący fragment:
<caption>Tytuł naszej tabeli</caption>To wszystko, teraz możesz powyżej na pasku narzędzi wybrać „Edytuj wizualnie” i… zobaczysz błąd wyświetlenia bloku. Możesz to tak zostawić lub wybrać opcję „Przekształć na HTML”. W każdym przypadku nad tabelą wyświetli się przeglądającym stronę tytuł tabeli, logicznie z nią powiązany.
Jak w WordPressie ustawić tabelę z nagłówkiem
Po zaznaczeniu bloku tabeli w bocznym pasku wyświetlone są jej właściwości. Wystarczy włączyć opcję „Sekcja nagłówka” i na górze tabeli pojawi się pierwszy wiersz z miejscem do wstawienia nagłówków kolumn.
Niestety w styczniu 2026 nadal nie ma tam opcji dodania tytułu tabeli.
Zaawansowane tabele w WordPressie i innych systemach.
Czasem potrzebujesz bardziej rozbudowanej tabeli. Nagłówki mogą być nie tylko w pierwszym wierszu, ale i w kolumnie. Zdarzają się też tabele z połączonymi komórkami, tabele zagnieżdżone itp. Poszukaliśmy sposobu na łatwe tworzenie takich tabel. Przejrzeliśmy wtyczki WordPress i narzędzia online. Niestety, ich twórcy skupili się głównie na ładnym wyglądzie tabel, nie na ich faktycznej użyteczności i dostępności.
Co możesz zrobić, jeśli nie kodujemy, a potrzebujemy tabeli o mniej typowym układzie?
- Nauczyć się HTML i właściwości oraz atrybutów tabel. Potem pisać lub poprawiać kod tabeli ręcznie. To oczywiście dobre wyjście, ale wymaga czasu i często powoduje błędy, bo kod tabeli jest zagmatwany.
- Poprosić narzędzie AI o wygenerowanie tego kodu!
Współczesne wielkie modele językowe (ChatGPT, Gemini itd.) generują bardzo dobre tabele bez znajomości kodowania. Wystarczy tylko znać odpowiednie polecenie. Oto ono:
Przekonwertuj wklejoną tabelę na semantyczną i dostępną tabelę HTML, gotową do wklejenia do bloku „Własny HTML” w WordPressie. Wyświetl kod tabeli i instrukcję wstawienia w bloku „Własny HTML”.
Tabelę umieść wewnątrz elementu <figure class=”wp-block-table”>.
Czy dodać nagłówek tabeli <caption>: TAK, treść <caption>: Dyżury kocich opiekunów
Pierwszy wiersz nagłówkowy: TAK
Pierwsza kolumna nagłówkowa: TAK
tabela do konwersji:
TU WKLEJ SWOJĄ TABELĘ
Zastąp pogrubione fragmenty swoimi ustawieniami.
- Podaj czy chcesz nagłówek tabeli i jaka jest jego treść.
- Zdecyduj, gdzie mają być nagłówki tabeli — mogą być i w wierszu i w kolumnie naraz.
- Wklej tabelę. Możesz ją napisać w WordPressie albo Excelu.
- Uruchom polecenie (prompt).
- Otrzymasz kod tabeli i instrukcję, jak go umieścić na stronie. To jest naprawdę proste.
Zobaczmy rezultat. Google Gemini — tabelka z WordPressa i ChatGPT — tabelka z Excela wygenerowały identyczny kod, który wstawiliśmy w bloku „Własny HTML”. Jest łatwo, jest dostępnie.
| Opiekun | Poniedziałek | Wtorek | Środa |
|---|---|---|---|
| Adam Nieprawdziwy | 09:00 – 15:00 | 12:00 – 18:00 | 09:00 – 15:00 |
| Amelia Zmyślona | 12:00 – 18:00 | 09:00 – 15:00 | 12:00 – 18:00 |
Tabele do pozycjonowania wizualnie treści. Błąd, którego można uniknąć.
Często zdarza się, że tabele są tylko po to, żeby rozmieścić jakieś elementy na stronie. To niedobre rozwiązanie. Nie jest responsywne, czyli nie układa się dobrze na mniejszych ekranach. Dodatkowo tabele są użyte wtedy niesemantycznie. Może to utrudnić użytkownikom zapoznanie się z umieszczoną w nich treścią.
Poniżej tabela, która służy do równego rozłożenia elementów. Zobacz ją na telefonie albo zmniejsz okno przeglądarki. Te elementy stają się nieczytelne, poupychane na siłę.
| Dla kogo piszemy? | Dla ciebie! |  |
Jak ustawiać treści na stronie w WordPress? Użyj zamiast tabeli bloku „Kolumny„. Ten blok tworzy zupełnie inną strukturę, ma też opcje wyświetlania zawartości wierszy w pionie, jeśli przestają się mieścić na ekranie. Innymi, prostymi w użyciu blokami są „Grupa”, „Wiersz” i „Stos”. Można je wstawiać jeden wewnątrz drugiego i tak ustalać pozycję naszych elementów. Zobacz, jak zawija się blok kolumn:
Dla kogo piszemy?
Dla ciebie!
Bywa, że wstawiona tabelka jest bardzo prosta. Jeśli tabela zawiera tylko dwie kolumny, łatwo zastąpić ją listą.
W kolejnym artykule poradnika przedstawimy ważną technikę dostępności. Ma ona zaskakująco wielki wpływ na każdego użytkownika. Nawet specjalistyczne strony mogą być atrakcyjne i zrozumiałe.
Prosty język (wbrew nazwie – finezyjny i wymagający) na dostępnych stronach internetowych już wkrótce.