Tworzenie treści dostępnych cyfrowo - wymagania dla stron internetowych
Obowiązek zapewnienia dostępności cyfrowej dotyczy treści internetowych (tekstowych, graficznych, multimedialnych):
- publikowanych na bieżąco - wszystkich wytwarzanych w PRz;
- multimediów - wszystkich opublikowanych po 23 września 2020 r. (z wyjątkiem nadawanych na żywo);
- opublikowanych po 23 września 2019 r. i prezentowanych w intranecie lub ekstranecie - jeśli były po tej dacie zmieniane;
- opublikowanych po 23 września 2018 r. - wszystkich;
- opublikowanych przed 23 września 2018 r. - tylko w przypadku, kiedy nadal obowiązują.
Wytyczne przygotowano w oparciu o serwisy systemu portalowego PRz (OPTIcms).
Oznaczenia i skróty:
- PPM - prawy przycisk myszy
- -> - oznaczenie ścieżki dostępu do danej opcji
Tytuł strony
- Należy wprowadzić go w polu Nazwa podczas dodawania nowej strony. Ten tytuł będzie widoczny w nazwie karty/okna z otwartą stroną.
- Tytuł powinien być możliwie najkrótszy, ale wskazujący na zawartość strony.
- Powinien być unikalny w danym zbiorze stron.
Język treści
- Jeśli w treści występują wyrazy lub fragmenty tekstu w języku innym niż podstawowy, należy ustawić właściwy dla nich język - zaznaczyć tekst, kliknąć zakładkę Format -> Wersja językowa i wybrać właściwy język z listy.
Kontrast
- Minimalny wymagany kontrast pomiędzy tekstem/grafiką tekstową (np. banner) w stosunku do tła to 4,5:1 (poziom AA).
Przykład: kolor czarny na białym tle - kontrast 21:1 - wystarczający.
Przykład: kolor Red (Kolor tekstu) na białym tle - kontrast 4:1 - zbyt niski! - Minimalny wymagany kontrast pomiędzy elementami nietekstowymi istotnymi dla odbiorcy (np. obramowania tabel, punktory list, ikony przenoszące znaczenie) to 3,0:1 w stosunku do koloru przylegającego (najczęściej tła).
- Wymagania minimalnego kontrastu nie dotyczą logo, znaków firmowych itp.
- Narzędzie do sprawdzenia kontrastu - prosty, darmowy program Colour Contrast Analyser (pobierz ze strony producenta).
Kontrast należy sprawdzać, najeżdżając na centralną część elementu - tam, gdzie kolor jest najbardziej jednolity.
Akapity/paragrafy
- Czcionka:
- Zalecamy używanie domyślnych ustawień edytora.
- Rodzaj/krój czcionki: bezszeryfowa (zalecana Arial, Calibri).
- Rozmiar czcionki: 12 px na stronach.
- Kolor czcionki: należy zachować odpowiedni kontrast czcionki w stosunku do tła. Zalecany kolor czcionki - czarny (automatycznie ustawiany), tło białe. W przypadku konieczności użycia innego koloru czcionki, należy sprawdzić kontrast - patrz wyżej. Wymagany minimalny kontrast tekstu w stosunku do tła to 4,5:1 (poziom AA).
- Wyrównanie: do lewej krawędzi (bez justowania).
- Odstępy:
- Zalecamy używanie domyślnych ustawień edytora.
- Nie należy używać Enter lub Shift+Enter w celu ustawienia odstępów w pionie.
- Nie zaleca się stosowania wcięcia na początku nowego akapitu.
- Wyróżnienie treści:
- Zalecane: wyróżnienie przez pogrubienie lub zmianę wielkości czcionki.
- Wyróżnienie kolorem: konieczne użycie drugiego atrybutu (oprócz koloru), np. pogrubienia. W przypadku wyróżniania kolorem należy sprawdzić kontrast (patrz wyżej).
- Nie należy używać dla całych bloków tekstu: kursywy, wersalików.
- Nie należy używać podkreśleń w celu wyróżnienia tekstu - podkreślenie zarezerwowane jest dla linków.
Linki/hiperłącza:
- Linki/hiperłącza muszą posiadać podkreślenie.
- Linki/hiperłącza należy umieszczać pod zrozumiałą, znaczącą treścią. Należy zwrócić uwagę na poprawność umieszczanego linku/hiperłącza. Nie należy używać w treści linku sformułowań "więcej", "kliknij tu" itp.
Błędny zapis: Projekt zarządzenia Rektora wymaga umieszczenia go tutaj.
Błędny zapis: Projekt zarządzenia Rektora wymaga umieszczenia go w systemie https://eod.prz.edu.pl/zr/aktywne/SitePages/Strona%20g%C5%82%C3%B3wna.aspx.
Poprawny zapis: Projekt zarządzenia Rektora wymaga umieszczenia go w systemie Elektronicznego Obiegu Dokumentów.
Nagłówki/śródtytuły
- Nagłówki najwyższego poziomu są zajęte przez system. W systemie portalowym PRz w treści strony można użyć nagłówków h3 i niższych (odpowiednia informacja znajduje się nad edytorem).
- Do tworzenia nagłówków należy stosować style nagłówkowe wbudowane w edytor tekstu - Format -> Formaty -> Nagłówki -> wybrać nagłówek odpowiedniego poziomu.
- Treść na każdej strona musi zawierać przynajmniej jeden nagłówek.
- Ilość nagłówków zależy od struktury i treści dokumentu - dzielą one dokument na logiczne części. Dostępne są nagłówki do poziomu 6.
- Należy zachować właściwą hierarchię nagłówków w ramach strony - np. po nagłówku poziomu 2 powinien pojawić się nagłówek poziomu 3, a nie 4.
- Treść nagłówków powinna być możliwie najkrótsza i nie powinna się powtarzać w ramach strony.
- Pomiędzy nagłówkami powinna znajdować się treść - strona nie może składać się z samych nagłówków.
- Nie należy stosować nagłówków w celu wyróżnienia treści (np. powiększenia tekstu).
Listy elementów (numerowane, wypunktowane)
- Należy używać do wykazów, list, spisów itp.
- Lista musi mieć co najmniej dwa elementy.
- Listy należy tworzyć za pomocą dedykowanych funkcji w edytorze. Nie należy tworzyć pseudolist, tzn. ręcznie wpisywać cyfr lub punktorów przed elementem.
- Można stosować listy zagnieżdżone.
- Przejście do nowej linii - Shift+Enter. Użycie samego Entera spowoduje zakończenie bieżącej listy i rozpoczęcie nowej.
Tabele
- Tabel należy używać wyłącznie do danych tabelarycznych. Nie należy korzystać z tabel w celu rozmieszczenia elementów treści strony.
- Tabele muszą mieć obramowania. Kolor obramowania musi mieć odpowiedni kontrast względem tła (patrz wyżej). Zalecany kolor obramowań: czarny.
- Należy dodać nazwę tabeli - zakładka Tabela -> Właściwości tabeli -> zaznaczyć opcję Tytuł.
- Tabele muszą mieć komórki nagłówkowe - Tabela -> Wiersz -> Właściwości wiersza -> Typ wiersza -> wybrać opcję Nagłówek. Zawartość komórek nagłówkowych powinna być wyróżniona, zalecany sposób: pogrubienie tekstu. W przypadku użycia koloru należy sprawdzić kontrast wszystkich kolorów przylegających względem siebie.
- Tabele powinny być regularne, tzn. w każdym wierszu powinno być tyle samo kolumn. Należy unikać łączenia komórek.
Treści nietekstowe (obrazy, grafiki, zdjęcia, mapy, wykresy, schematy)
- Treści nietekstowe dzielą się na przenoszące znaczenie i dekoracyjne.
- Dla treści nietekstowych przenoszący znaczenie należy dodać tekst alternatywny w polu Opis obrazka (Wstaw -> Wstaw/edytuj obrazek).
- Tekst alternatywny powinien być możliwie krótki, ale opisujący zawartość ważną dla zrozumienia treści.
- Logo (np. PRz lub Unii Europejskiej) przenosi znaczenie - należy zapewnić tekst alternatywny.
- Dla treści nietekstowych pełniących funkcje dekoracyjne pole Opis obrazka należy pozostawić puste.
Treści multimedialne (audio i wideo)
- Wszystkie multimedia muszą posiadać opisy alternatywne opisujące zawartość.
- Materiały wideo powinny posiadać napisy.
- Materiały audio powinny posiadać transkrypcję tekstową, umieszczoną na stronie internetowej lub w dokumencie cyfrowym.
Dodawanie plików graficznych i tekstowych
- Należy korzystać z dedykowanych zakładek na karcie Edycja wpisu (nad edytorem tekstu).
- Podczas dodawania grafiki (zakładka Zdjęcia) należy w polu Tytuł dodać tekst alternatywny (patrz wyżej).
- Podczas dodawania pliku tekstowego (zakładka Pliki) należy w polu Tytuł wprowadzić krótką nazwę pliku za pomocą zrozumiałego tekstu (np. Zarządzenie nr 112/2020 z dnia 10 listopada 2020), a w polu Opis można wpisać dodatkowe informacje (np. zmieniające zarządzenie nr 5/2018 Rektora Politechniki Rzeszowskiej im. Ignacego Łukasiewicza z dnia 12 lutego 2018 r. w sprawie zasad korzystania z miejsc parkingowych ogólnodostępnych oraz w strefach ograniczonego parkowania na terenach Politechniki Rzeszowskiej).
- Nie należy zamieszczać na stronach plików tekstowych w postaci skanów. Jeśli zachodzi konieczność zamieszczenia skanu - należy zapewnić dla niego wersję dostępną cyfrowo.
Inne zalecenia:
- Treści na stronach internetowych należy sporządzać prostym do zrozumienia językiem. Należy unikać rozbudowanych zdań.
- Należy objaśniać znaczenie skrótów użytych w treściach internetowych.
- Należy unikać dzielenia wyrazów.
- Należy unikać zamieszczania na stronach internetowych migających elementów.
