Dostępne strony internetowe

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.

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)

Kody wersji językowych

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

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

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.

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.

Zasady tworzenia opisów alternatywnych:
Dostępne dokumenty:
Instrukcja tworzenia dokumentów dostępnych cyfrowo w PB – str. 19.

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.

Strona otwiera się w tym samym oknie / karcie:

• atrybutu title nie wstawiamy,
• w atrybucie alt wstawiamy: 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

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 – zgodnie z punktem 2 najlepiej zrezygnować z otwierania łączy w nowym oknie, pozostawiając wybór użytkownikowi.

 

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

Rekrutacja na studia

Internetowa Rejestracja Kandydatów

 

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

Rekrutacja krok po kroku

 

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

Tu wstawiamy tytułTu wstawiamy podtytuł

Tu wstawiamy tytuł

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

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/

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

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

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

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

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

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

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