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.
Więcej informacji można znaleźć w Polityce Prywatności
Korzystając ze strony wyrażają Państwo zgodę na używanie plików cookies, zgodnie z ustawieniami przeglądarki.
Akceptuję Politykę prywatności i wykorzystania plików cookies w serwisie.

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, 184 KB, otworzy się w nowej karcie)

Lorem Ipsum niedostępny cyfrowo (PDF, 108 KB, otworzy się w nowej karcie)

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

Instrukcja dodawania plików do pobrania (PDF, 373 KB, otworzy się w nowej karcie)

 
Dokument do pobrania z informacją o języku:

Konkurs wygrał wiersz Casa vazia (pol. Pusty dom) (PDF, 68 KB, otworzy się w nowej karcie)

Konkurs wygrał wiersz <a class="pdf" 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, otworzy się w nowej karcie)</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

Ostrzeżenia przed otwarciem nowego okna/ karty przeglądarki dodawane w atrybucie title nie są dostępne dla wszystkich użytkowników, tj. użytkowników korzystających z:

  • klawiatury,
  • dużego powiększenia ekranu,
  • urządzeń mobilnych.

W związku z tym, najlepiej zrezygnować z otwierania łączy w nowym oknie, pozostawiając wybór użytkownikowi.

A. Link do strony www otwieranej w tym samym oknie / karcie:
Politechnika Białostocka

<a href="https://pb.edu.pl/">Politechnika Białostocka</a>

B. 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.

<a href="https://pb.edu.pl/">stronie głównej Politechniki Białostockiej</a>

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:
W serwisie Ministerstwa Edukacji Narodowej znajdziesz szczegółowe informacje o seminarium „Edukacja XYZ”.

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:
Dostępne dokumenty:
Instrukcja tworzenia dokumentów dostępnych cyfrowo w PB – str. 19.

3.1. Galeria zdjęć

W atrybucie alt każdego zdjęcia należy wstawiać opis informujący o tym co przedstawia dane zdjęcie. Informacja ta powinna być jak najbardziej szczegółowa.

Widok zaplecza systemu CMS ilustrujący dodawanie alternatywnych opisów w galerii zdjęć
 

3.2. Ikona jako link

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>  
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>  

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 karciezgodnie z punktem 2 najlepiej zrezygnować z otwierania łączy w nowym oknie, pozostawiając wybór użytkownikowi.
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="https://irk.pb.edu.pl/pl/"><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>

 
C. Box jest linkiem graficznym + tekstowym:

 
[boxlink url="#info" title="Tu wstawiamy tytuł" subtitle="Tu wstawiamy podtytuł" class=""]<img class="aligncenter wp-image-534 size-full" src="https://pb.edu.pl/wp-content/uploads/2017/06/1i2stopien.png" alt="">[/boxlink]  
[boxlink url="#info" title="Tu wstawiamy tytuł" subtitle="" class=""]<img class="aligncenter wp-image-534 size-full" src="https://pb.edu.pl/wp-content/uploads/2017/06/1i2stopien.png" alt="">[/boxlink]

 

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.

Do wyróżniania zdań 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