Dostępne strony internetowe

Zalecenia dotyczące przygotowywania oraz publikowania treści na stronach internetowych Politechniki Białostockiej

Poniżej zestawiono podstawowe zasady, którymi powinni kierować się administratorzy oraz redaktorzy serwisów internetowych PB w zakresie przygotowywania oraz publikowania treści na stronach internetowych Politechniki Białostockiej celem zapewnienia dostępności cyfrowej.

Przedstawione zasady wynikają z Wytycznych dostępności treści internetowych 2.1 (WCAG 2.1, Web Content Accessibility Guidelines 2.1), dobrych praktyk oraz wewnętrznych ustaleń Politechniki Białostockiej.

Pełny tekst wytycznych WCAG 2.1 został zamieszczony w Konfigurowalnym przewodniku po wymaganiach i technikach Wytycznych dostępności treści internetowych (WCAG).

Wytyczne dostępności treści internetowych 2.1 (WCAG 2.1) – angielska wersja językowa.

1. Dokumenty do pobrania

Lorem Ipsum dostępny cyfrowo (PDF, wersja dostępna cyfrowo, 184 KB)

Lorem Ipsum niedostępny cyfrowo (PDF, wersja skanowana, 108 KB)

Lorem Ipsum dostępny cyfrowo (DOCX, 16 KB)
 

Instrukcja obsługi dodawania plików do pobrania (PDF, wersja dostępna cyfrowo, 721 KB)

 
Dokument do pobrania z informacją o języku:

Konkurs wygrał wiersz Casa vazia (pol. Pusty dom) (PDF, 68 KB)

Konkurs wygrał wiersz <a class="pdf" title="Otworzy się w nowej karcie" href="https://pb.edu.pl/wp-content/uploads/2020/08/Lorem-ipsum-dostepny.pdf" target="_blank" rel="noopener noreferrer" data-id="766"><span lang="pt">Casa vazia</span> (pol. Pusty dom) (PDF, 68 KB)</a>

Kody wersji językowych

Lub do znacznika a dodajemy atrybut:
aria-label=”
Pobierz plik test.pdf
Rozmiar: 68 KB
Format: pdf
Język: portugalski”

 

2. Linki do stron www

A. Link do strony www otwieranej w nowym oknie / karcie
W atrybucie title wstawiamy: Otworzy się w nowej karcie:

Opis alternatywny infografiki

<a title="Otworzy się w nowej karcie" href="https://www.premier.gov.pl/wydarzenia/aktualnosci/kancelaria-premiera-w-social-media-2013-infografika.html">Opis alternatywny infografiki</a>

B. Link do strony www otwieranej w tym samym oknie / karcie
Dodajemy atrybut title np. przejdź do strony głównej

Politechnika Białostocka

<a title="przejdź do strony głównej" href="https://pb.edu.pl/">Politechnika Białostocka</a>

Jeżeli cel linku jest opisany w zdaniu / opisie poprzedzającym lub w linku, to title nie musimy podawać, czyli. np.:

Ważne informacje znajdziesz na stronie głównej Politechniki Białostockiej.
 

C. Zrozumiałe linki
Linki są zrozumiałe, gdy osoba słysząca tylko ich opis, jest w stanie powiedzieć, dokąd prowadzą i co się wydarzy po kliknięciu w nie.

Prawidłowy linki:
Szczegółowe informacje o seminarium „Edukacja XYZ” znajdziesz w serwisie Ministerstwa Edukacji Narodowej.

Nieprawidłowy linki:
Szczegółowe informacje o seminarium znajdziesz w serwisie men.gov.pl.

 

3. Opisy alternatywne do fotografii oraz grafik

Zasady tworzenia opisów alternatywnych – http://akceslab.pl/poradnik/

3.1. Galeria zdjęć

W galerii z dużą liczbą zdjęć nie jesteśmy w stanie przygotować szczegółowych opisów (w atrybucie alt) pod wszystkie zdjęcia.
W takim przypadku opis należy umieścić przed galerią tak, by był dostępny dla każdego, czyli np.:

Zapraszamy do obejrzenia 45 zdjęć z konferencji MSM2020. Na zdjęciach przedstawiono uczestników konferencji podczas obrad komitetu naukowego. Obrady odbywały się w auli Wydziału Mechanicznego. Obradom przewodniczył prof. Tomasz Kowalewski:
galeria zdjęć

W atrybucie alt wstawiamy jeden wspólny opis (np. alt=”Uczestnicy konferencji MSM2020 podczas obrad komitetu naukowego”). Opis powinien zawierać informację o tym co przedstawia galeria, a informacja ta powinna być jak najbardziej szczegółowa.
 

3.2. Ikona jako link

Strona otwiera się w nowym oknie / karcie:

  • w atrybucie title wstawiamy: Otworzy się w nowej karcie,
  • w atrybucie alt wstawiamy: przejdź do facebook Politechniki Białostockiej

przejdź do facebook Politechniki Białostockiej

<a title="Otworzy się w nowej karcie" href="https://pl-pl.facebook.com/politechnikabialostocka/" target="_blank" rel="noopener noreferrer"><img src="https://pb.edu.pl/wp-content/uploads/2020/07/PB_socialicon_fb.png" alt="przejdź do facebook Politechniki Białostockiej"></a>  

Strona otwiera się w tym samym oknie / karcie:

  • atrybutu title nie wstawiamy,
  • w atrybucie alt wstawiamy: przejdź do facebook Politechniki Białostockiej

przejdź do facebook Politechniki Białostockiej

<a href="https://pl-pl.facebook.com/politechnikabialostocka/"><img src="https://pb.edu.pl/wp-content/uploads/2020/07/PB_socialicon_fb.png" alt="przejdź do facebook Politechniki Białostockiej"></a>  

3.3. Boxy

A. Box jest linkiem graficznym:

  • w atrybucie alt dodajemy to co jest napisane w boxie, czyli: Zarządzenia i komunikaty Rektora Politechniki Białostockiej,
  • atrybut title nie jest konieczny,
  • oczywiście jeżeli strona otwiera się w nowym oknie, to w title wstawiamy opis: Otworzy się w nowej karcie.
Zarządzenia i komunikaty Rektora Politechniki Białostockiej
Zarządzenia i komunikaty Rektora Politechniki Białostockiej
 

 
<a class="alfa" href="https://pb.edu.pl/koronawirus-informacje-i-zalecenia/zarzadzenia-i-komunikaty-rektora-pb/"><img src="https://pb.edu.pl/wp-content/uploads/2020/03/box1-pb_zarzadzenia_komunikaty_rektora_ikonka.jpg" alt="Zarządzenia i komunikaty Rektora Politechniki Białostockiej"></a> <a class="alfa" title="Otworzy się w nowej karcie" href="https://pb.edu.pl/koronawirus-informacje-i-zalecenia/zarzadzenia-i-komunikaty-rektora-pb/" target="_blank" rel="noopener noreferrer"><img src="https://pb.edu.pl/wp-content/uploads/2020/03/box1-pb_zarzadzenia_komunikaty_rektora_ikonka.jpg" alt="Zarządzenia i komunikaty Rektora Politechniki Białostockiej"></a>

 
B. Box jest linkiem graficznym + tekstowym:

  • atrybut alt zostawiamy pusty,
  • atrybut title nie jest konieczny,
  • oczywiście jeżeli strona otwiera się w nowym oknie, to w title wwstawiamy opis: Otworzy się w nowej karcie.

 
<a class="button yellow-box" style="width: 100%; padding: 0px 5px 10px 5px;" href="/zmieniajwszystko/rekrutacja-na-studia/"><img src="https://pb.edu.pl/zmieniajwszystko/wp-content/uploads/sites/48/2020/07/2020_06_PB_www_zmieniaj_wszystko_box1_rekrutacja_na_studia.jpg" alt="">Rekrutacja na studia</a> <a class="button yellow-box" style="width: 100%; padding: 0px 5px 10px 5px;" title="Otworzy się w nowej karcie" href="https://irk.pb.edu.pl/"><img src="https://pb.edu.pl/zmieniajwszystko/wp-content/uploads/sites/48/2020/07/2020_06_PB_www_zmieniaj_wszystko_box3_IRK.jpg" alt=""><span class="title-box">Internetowa Rejestracja Kandydatów</span></a>

 
W atrybucie alt możemy dodać informację uzupełniającą (szczegółową) do tej zawartej w linku tekstowym:

 
<a class="button" style="width: 100%; padding: 0px 5px 10px 5px; border: solid 1px #fff;" href="/liceum-ogolnoksztalcace/rekrutacja/harmonogram-rekrutacji/"><img class="aligncenter size-full wp-image-4597" src="https://pb.edu.pl/liceum-ogolnoksztalcace/wp-content/uploads/sites/10/2020/05/rekrutacja-box-harmonogram.jpg" alt="Harmonogram rekrutacji do Liceum Ogólnokształcącego Politechniki Białostockiej"><span class="lead"><strong>Rekrutacja krok po kroku</strong></span></a>

 

4. Dostępne treści

Podstawowe zalecenia, którymi powinni kierować się redaktorzy tekstów serwisów internetowych:
Dębski J.: 25 zaleceń dla redaktorów serwisów internetowych, dostęp on-line:
http://dostepnestrony.pl/artykul/25-zalecen-dla-redaktorow-serwisow-internetowych/

 

5. Serwisy archiwalne

Opis widoczny na wszystkich stronach serwisu:

Archiwalny serwis www
może zawierać elementy, które nie są dostępne dla szerokiego grona odbiorców ze szczególnym uwzględnieniem osób z niepełnosprawnościami

 

6. Wyróżnianie zdań

Znaczniki nagłówka h1, h2, h3 itd. nie mogą być wykorzystywane do wyróżniania zdań. Służą do ostylowania podtytułów na stronach www. Znaczki h1 jest zarezerwowany dla tytułu strony.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate orci ac diam interdum, nec tristique ipsum cursus. Curabitur et lorem egestas, vehicula orci posuere, tincidunt odio. Morbi mollis aliquet arcu et tincidunt.

Do tego celu należy wykorzystywać style (formaty): Styl ‚Nagłówek 1’, Styl ‚Nagłówek 2’ itd.:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate orci ac diam interdum, nec tristique ipsum cursus. Curabitur et lorem egestas, vehicula orci posuere, tincidunt odio. Morbi mollis aliquet arcu et tincidunt.

 
<div class="h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate orci ac diam interdum, nec tristique ipsum cursus. Curabitur et lorem egestas, vehicula orci posuere, tincidunt odio. Morbi mollis aliquet arcu et tincidunt.</div>

 

Instrukcja obsługi wyróżniania zdań (PDF, wersja dostępna cyfrowo, 413 KB)
 

6.1. Wyróżnianie linków

Dostępność cyfrowa
 
<a class="h4" href="/dostepnosc-cyfrowa/">Dostępność cyfrowa</a>

 

7. Deklaracja dostępności

Warunki techniczne publikacji oraz struktura dokumentu elektronicznego „Deklaracji Dostępności”

Deklaracja dostępności – Jak napisać deklarację dostępności?
 

Deklaracja dostępności PB

Deklaracja dostępności serwisu internetowego pb.edu.pl

Ważne
W każdej opracowywanej deklaracji dostępności:

  • należy zaktualizować kluczowe opisy, w tym: Informacje zwrotne i dane kontaktowe, Dostępność architektoniczna, niezgodności i wyłączenia,
  • w kodzie html nie można kasować identyfikatorów kluczowych elementów (atrybut id) ułatwiających robotom ich odnalezienie.

Ponadto zgodnie z warunkami technicznymi publikacji oraz struktura dokumentu elektronicznego „Deklaracji Dostępności” dobrą praktyką jest umieszczenie w nagłówku (head) wszystkich stron serwisu internetowego metatagu zawierającego link do Deklaracji Dostępności, według poniższego wzoru:

<meta name="deklaracja-dostępności" content="https://xxx" />

gdzie xxx jest adresem internetowym Deklaracji dostępności serwisu internetowego.

 

8. Informacje dodatkowe

Przedstawione powyżej zasady nie wyczerpują wszystkich zagadnień związanych z dostępnością.
Wiedzę na temat dostępności można wzbogacić także w oparciu o poniższe pozycje:

  1. Ciborowski M.: Tworzenie dostępnych cyfrowo stron www i aplikacji mobilnych Politechniki Białostockiej. Materiały szkoleniowe, 2020 r.
  2. Dębski J.: 25 zaleceń dla redaktorów serwisów internetowych, dostęp on-line:
    http://dostepnestrony.pl/artykul/25-zalecen-dla-redaktorow-serwisow-internetowych/
  3. Woźniak P.: Jak zbudować dostępną tabelę na stronie internetowej?, dostęp on-line:
    http://dostepnestrony.pl/artykul/jak-zbudowac-dostepna-tabele-na-stronie-internetowej/
  4. Gajda M.: Sześć grzechów głównych wobec niewidomych, dostęp on-line:
    http://dostepnestrony.pl/artykul/szesc-grzechow-glownych-wobec-niewidomych/
  5. Ciborowski M.: Czy materiały dźwiękowe i filmowe są dostępne?, dostęp on-line:
    http://dostepnestrony.pl/artykul/czy-materialy-dzwiekowe-i-filmowe-sa-dostepne/
  6. Pietrasiewicz A.: Aurea mediocritas, czyli złoty środek, dostęp on-line:
    http://dostepnestrony.pl/artykul/aurea-mediocritas-czyli-zloty-srodek/
  7. Chodź opisz nasz świat – poradnik dla redaktorów stron www… , dostęp on-line:
    http://akceslab.pl/poradnik/
  8. Paszkiewicz D., Dębski J.: Dostępność serwisów internetowych Dobre praktyki w projektowaniu serwisów internetowych dostępnych dla osób z różnymi rodzajami niepełnosprawności, dostęp on-line:
    https://www.power.gov.pl/media/13588/Dostepnosc-serwisow-internetowych-Dominik-Paszkiewicz-Jakub-Debski.pdf
Na skróty
× W ramach naszego serwisu www stosujemy pliki cookies zapisywane na urządzeniu użytkownika w celu dostosowania zachowania serwisu do indywidualnych preferencji użytkownika oraz w celach statystycznych.
Użytkownik ma możliwość samodzielnej zmiany ustawień dotyczących cookies w swojej przeglądarce internetowej.
Korzystając ze strony wyrażają Państwo zgodę na używanie plików cookies, zgodnie z ustawieniami przeglądarki.