Zalecenia dotyczące publikowania treści na stronach internetowych UG

Zgodnie z ustawą z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych serwis WWW musi być dostosowany do reguł dostępności. Twórcy serwisów internetowych, ich administratorzy i edytorzy treści muszą zwracać uwagę na odpowiednią jakość czcionki, kontrast strony, opisy elementów graficznych, opisy pól formularzy i wyszukiwarek, poprawny kod źródłowy i wiele innych elementów zawartych w wytycznych WCAG 2.0 (Web Content Accessibility Guidelines). Stosując zawarte w tym dokumencie wskazówki tworzy się strony z informacjami dostępnymi dla wszystkich, a szczególnie dla osób z dysleksją czy niedowidzących, przyjazne odbiorcom i nowoczesne w wyglądzie.

1. Formatowanie tekstu

Każdy opracowywany tekst powinien być wcześniej przemyślany. Istotne jest podzielenie go na logiczne części tworzące niezbyt długie akapity. Nie należy wyrównywać do prawej zamieszczanej treści - utrudnia to czytanie niektórym osobom z dysleksją. Można zaznaczać np. pogrubieniem najważniejsze i kluczowe słowa. Ułatwia to orientację i powrót do przerwanego czytania.

Nadużywanie kursywy i zbyt długie teksty pisane w ten sposób stają się nieczytelne dla osób z dysleksją. Przy cytatach należy pamiętać o cudzysłowach.

Nie należy pisać WIELKIMI LITERAMI całych akapitów. Nie powinno się używać kapitalików bez potrzeby, również w nagłówkach. Utrudnia to czytanie tekstu, a w Internecie traktowane jest jako krzyk. Do formatowania tekstu jako nagłówek stosuje się nagłówki odpowiedniego rzędu: Nagłówek 1, Nagłówek 2, Nagłówek 3.... Poprawia to nawigowanie po tekście. Zwłaszcza dla osób niewidomych ich obecność jest fundamentalna.

Używanie tabel powinno mieć miejsce tylko wtedy kiedy jest to rzeczywiście niezbędne. Korzystanie z rozbudowanych i złożonych tabel to zmora osób z niepełnosprawnością wzroku. Nie należy stosować ich do formatowania tekstu, np. tak, by obrazek był z lewej lub prawej strony. Tabela to informacja tabelaryczna, nie formatka definiująca układ na ekranie. Pierwszy wiersz lub kolumna tabeli zawsze powinna być nagłówkiem tabeli – zamiast znacznika TD występuje znacznik TH w kodzie HTML. Użycie tej opcji jest możliwe w edytorze wizualnym (we właściwościach tabeli należy wybrać opcję pierwszy wiersz/kolumna jako nagłówek).

2. Odnośniki - linki - hiperłącza

Wszystkie odnośniki w serwisie powinny być prezentowane w ten sam sposób, np. podkreślenie + inny kolor niż tekst. Każdy link w serwisie powinien być unikatowy. Nie należy stosować odnośników typu: „czytaj więcej” czy „kliknij tutaj”. Wielokrotne zamieszczenie tak opisanego łącza na stronie utrudnia orientację osobom niewidomym i niedowidzącym korzystającym z czytników głosowych. Wystarczy, że odnośnikiem będzie fraza opisująca dokąd prowadzi łącze, np. link do identyfikacji wizualnej uczelni powinien wyglądać tak:

„(…) Stosuj się do zasad opracowanych w Identyfikacji wizualnej uczelni (…)”

Źle

„(…) Stosuj się do zasad opracowanych w Identyfikacji wizualnej uczelni: http://www.ug.edu.pl/media/biuro_promocji/ksiega_identyfikacji_wizualnej_ug (…)”.

Nie ma potrzeby prezentowania w treści adresu dokąd prowadzi odnośnik. Wystarczy, że będzie można w niego kliknąć oraz czytnik głosowy zinterpretuje go jako odnośnik. Literowanie adresu http://www.ug... jest niewygodne i niepotrzebne dla słuchacza.

3. Obrazki i teksty alternatywne (znacznik ALT)

Publikowane obrazki powinny być oszczędne w style i ozdobniki z edytorów typu Word. Nie należy stosować ramek czarnych lub wytłoczonych ani cieni dookoła ilustracji. Ramki nie powinny być też elementem zapisanym w obrazku - przy zmianie stylu strony obrazki przestają pasować do szablonu.

Grafiki typu diagramy należy przygotowywać w kolorach pastelowych lub zbliżonych do tych z identyfikacji wizualnej Uniwersytetu Gdańskiego. Zbędnymi są wytłoczenia, artystyczne ramki, cienie. Im prościej, tym lepiej.

Zabronione jest zniekształcanie i zmiana logo UG. Należy stosować się do zasad opracowanych w Identyfikacji wizualnej uczelni: http://www.ug.edu.pl/media/biuro_promocji/ksiega_identyfikacji_wizualnej_ug. Każdy wydział ma swój kolor i można ich używać w odpowiednich miejscach i kontekście.

Dlaczego stosujemy teksty alternatywne obrazków?

Konieczność istnienia tekstów alternatywnych dla obrazków wynika przede wszystkim z konieczności dostosowania strony internetowej do potrzeb osób niewidomych i niedowidzących, co z kolei jest narzucone przez odpowiednie rozporządzenie Rady Ministrów. Inne sytuacje, w jakich teksty alternatywne są wykorzystywane, to m.in:

• gdy obrazki w przeglądarce są wyłączone. Może to mieć miejsce np. podczas korzystania z telefonu komórkowego. Poprzez odpowiednią konfigurację możliwe jest zablokowanie pobierania obrazków. Przyspiesza to ładowanie się stron internetowych oraz obniża liczbę przesyłanych danych komórkowych (obrazków) jako płatny transfer.
• gdy naszą stronę robot wyszukiwarki, np. Google - dzięki odpowiednim opisom obrazków jest w stanie zrozumieć treść ilustracji i następnie przedstawić ją w wynikach wyszukiwania.
• gdy oglądamy stronę za pomocą przeglądarek tekstowych, np. Lynx lub Links.

Tekst alternatywny nie jest widoczny na ekranie, gdy oglądamy stronę w standardowy sposób, tj. przez osobę widzącą poprawnie z włączonymi obrazkami.

Jak pisać teksty alternatywne?

Tekst alternatywny powinien opisywać to, co się znajduje na obrazku lub określać funkcję obrazka w publikowanej treści. Powinien być on krótki: do 250 znaków. Im krócej tym lepiej - należy pamiętać, że osoba niewidoma musi tych wszystkich informacji wysłuchać, co zabiera jej czas. Co więcej, tekst alternatywny powinien być w miarę możliwości unikatowy. Wyjątkiem są tutaj galerie zdjęć.

W przypadku kiedy obrazek zawiera tekst, powinno się ten tekst przepisać jako właśnie tekst alternatywny. W przypadku poniższej ilustracji może być on następujący:

„Rozmowa dwóch studentów:
- Czy wiesz, że Margaret Thatcher, Radosław Sikorski i inni wzięli udział w tutoringu na swoich uczelniach?
- Rozwinę się i swoje zainteresowania naukowe!”

lub można zastosować opis np. „Historyjka nt. tutoringu” lub "Karykatura dwóch studentów rozmawiających o tutoringu".

„Historyjka nt. tutoringu”

Gdy obrazek zawiera dużo tekstu, np. jest to plakat z dużą ilością treści, można napisać: "Plakat wydarzenia", a poniżej wymienić szczegóły dotyczące wydarzenia. Np.:

„Plakat Chińskiego Nowego Roku”
 

W przypadku obrazka, który nie zawiera tekstu opisujemy to, co na nim się znajduje, np.:

„Świątynia Tempietto w Rzymie”

Jak sprawdzić, czy teksty alternatywne istnieją?

W tym celu należy wyłączyć pokazywanie obrazków w przeglądarce:

• Mozilla Firefox: Narzędzia — Opcje — Treść –Pobieraj obrazki automatycznie
• Internet Explorer: Narzędzia — Opcje internetowe — Zaawansowane — Pokaż obrazy
• Opera: Widok — Obrazki — Bez obrazków

Można również kliknąć na określony obrazek prawym przyciskiem myszy i sprawdzić w właściwościach obrazka, czy dany tekst jest podany.

4. Pliki do pobrania - załączniki

Dodając pliki do pobrania należy pamiętać o ich właściwym i unikatowym nazwaniu. Nazwa musi w pełni odpowiadać zawartości. W odnośniku, który pozwala pobrać dokument ze strony należy podać typ załącznika (np. PDF) i jaki ma rozmiar w KB, np. „Zasady rekrutacji, [PDF, 606kB]”.

Tworząc i zamieszczając w serwisie dokumenty DOC powinno się pamiętać o ich odpowiednim sformatowaniu (np. używanie styli nagłówka do określenia głównych punktów tekstów, a nie tylko pogrubienia i powiększenia czcionki) – zapewni to czytelność materiału dla osób korzystających z czytników ekranu.

Dokumenty w formacie PDF najlepiej tworzyć na podstawie odpowiednio sformatowanych plików tekstowych (np. DOC). Tylko wtedy będą one możliwe do odczytania przez czytniki ekranu. Zamieszczanie skanów wydrukowanych dokumentów jest sprzeczne z zasadami dostępności – są one zupełnie nieczytelne i niedostępne dla osób niewidomych i niedowidzących.

Dodając filmy lub pliki audio należy pamiętać o osobach niesłyszących. Materiał wideo powinien być wzbogacony o napisy lub przynajmniej krótki opis tego, co się w nim znajduje. Podobnie z plikiem dźwiękowymi, np. jeśli jest to wywiad to oprócz samego nagrania powinien być opublikowany jego stenogram. Nigdy nie zamieszczaj kluczowych informacji wyłącznie w wersji audio lub wideo. Jeśli umieszczasz informacje o wydarzeniu w postaci plakatu, napisz słownie kluczowe informacje na nim zawarte – inaczej osoba niewidoma nie będzie wiedziała, gdzie i kiedy odbywa się wydarzenie.