Pomagamy poprawić dostępność i użyteczność serwisów internetowych

Chcemy wspólnie stworzyć w polskim Internecie modę na dostępność

Chcemy uczynić strony instytucji publicznych wzorcami dostępności

Nowiny Kuźni Dostępnych Stron

Widok strony startowej pakietu JKultura

WWW ośrodka kultury zgodnie z WCAG 2.0

Stworzenie dostępnej strony internetowej może kosztować miejski dom kultury czy gminny ośrodek kultury 0 złotych. Wystarczy skorzystać z pakietów startowych udostępnionych przez projekt Kuźnia Dostępnych Stron. Publikujemy przedostatni już komplet...

Widok strony startowej pakietu JSzkoła

Szkolna witryna zgodna z WCAG 2.0

Pobierz i zainstaluj najnowszy startowy pakiet instalacyjny witryny szkoły zgodnej z wymogami WCAG 2.0. Przekonaj się, że strona Twojej szkoły może być atrakcyjna, nowoczesna, bogata w treści i dostępna dla...

Widok strony startowej pakietu JPrzedszkole

Dostępny serwis www i BIP dla przedszkola

Czy Twoje przedszkole ma stronę internetową? Czy ta strona jest dostępna? A może szukasz rozwiązania serwisu www przedszkola z Biuletynem Informacji Publicznej? Projekt Kuźnia Dostępnych Stron udostępnia kolejny komplet startowych pakietów...

Potęgą Sieci jest jej uniwersalność.
Istotnym aspektem jest dostęp do Sieci dla wszystkich
bez względu na rodzaj niepełnosprawności.

Tim Berners-Lee,Dyrektor W3C i twórca World Wide Web

Od kwietnia 2012 roku strony internetowe podmiotów realizujących zadania publiczne powinny spełniać wymagania WCAG 2.0, z uwzględnieniem poziomu AA.

Rozporządzenie Rady Ministrów… w sprawie Krajowych Ram Interoperacyjności…

Listy i inne

Siatka typograficzna, nagłówki i tekst główny

Skala typograficzna

Cała siatka typograficzna opiera się na dwóch zmiennych less zdefiniowanych w naszym pliku variables.less: @baseFontSize@baseLineHeight. Pierwsza z nich jest bazowym rozmiarem czcionki (font-size) stosowanym w całej witrynie, druga wyznacza odstęp międzywierszowy (line-height).

Nagłówki

Nagłówki opisują strukturę zawartości stron. Nagłówki I i II poziomu generowane są przez system, w dodawanej zawartości używamy ich wyjątkowo. Do oznaczenia śródtytułów w artykułach i innych treściach stosujemy nagłówki h3, h4, h5h6. Nagłówka <h3> używamy też do oznakowania tytułów modułów, generowanych automatycznie. W tytułach modułów dodatkowym wyróżnikiem nagłówka bywa kolor czcionki, niekiedy tło.

Przykładowy tekst główny

Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. Nazywał się dziś nagodzi do domu, pragnął go grzecznie, na siano. w końcu zażył. kichnął, aż u Woźnego lepiej zna się jako po.

Po cóż te łupy zdobyte. Tuż stało się. już składać zaczęto kopę żyta, niepełne jadą do domu, fortuny szczodrot objaśniają wrodzone wdzięki i zdrowie.

Przykłady nagłówków

h1. Nagłówek 1

h2. Nagłówek 2

h3. Nagłówek 3

h4. Nagłówek 4

h5. Nagłówek 5
h6. Nagłówek 6

Wyróżnienia, adresy i skróty

ElementStosowanieOpcja
<strong> Podkreśla ważny fragment tekstu nie ma
<em> Wzmacnia, podkreśla emocjonalność fragment tekstu nie ma
<abbr> Obejmuje skróty i akronimy, by wyświetlić rozwiniętą wersję po najechaniu wskaźnikiem myszki

Umieść opcjonalny atrybut title, aby objaśnić tekst.

Umieść opcjonalny atrybut lang, aby wskazać język skrótu.

Użyj klasy .initialism w przypadku skrótów i akronimów pisanych wielkimi literami, aby zmniejszyć nieco rozmiar fontów i uzyskać bardziej harmonijny wygląd.
<address> Dane kontaktowe autora elementu będącego najbliższym przodkiem (np. sekcji, artykułu) lub całej strony Zachowaj formatowanie, kończąc każdy wiersz znacznikiem <br>

Używanie wyróżnień (wzmocnienia)

Oto tekst wyróżniony pogrubieniem oraz tekst wyróżniony pochyleniem.

Uwaga: Zapraszamy do korzystania ze znaczników <b> oraz <i>. W HTML5 ich znaczenie zostało nieco zmienione. Element <b> wyróżnia tekst bez nadawania mu szczególnej ważności. Element <i> sygnalizuje np. termin techniczny, frazę idiomatyczną z innego języka, itp.

Przykłady skrótów

HTML jest najlepszą rzeczą od czasu krojonego chleba.

Skrótem słowa atrybut jest attr.

Skróty opatrzone w znaczniku otaczającym atrybutem title są podkreślone cienką przerywaną linią i wyróżniane kursorem pomocy, gdy ustawimy nad nimi wskaźnik myszki. Jest to dla użytkowników dodatkowa wskazówka, że mają do czynienia ze skrótem lub akronimem.

Formatowanie bloków cytatów zostało zdefiniowane w arkuszach stylów odziedziczonych z ram projektowych Bootstrap. Z artykułu dowiesz się, jak znakować bloki cytatów, aby uzyskać zaprojektowany w szablonach wygląd.

Lista definicji (opisów)

Według specyfikacji W3C listy definicji można stosować dla dowolnych typów danych, które są ze sobą powiązane bezpośrednią relacją typu nazwa::wartość lub nazwa::opis, a więc powiązanych w ten sposób, że treść elementu definiujacego (opisującego) <dd> jest w relacji z treścią elementu definiowanego (opisywanego) <dt>. Elementy <dt> nie mogą zawierać elementów blokowych, np. nagłówków <h3>.

Aby wyświetlić listę definicji w układzie poziomym, użyj znacznika <dl> z atrybutem klasy: <dl class="dl-horizontal">.

Pionowa lista opisów

<dl>

Lista opisów
Lista opisów jest doskonałym rozwiązaniem dla definicji terminów i innych par typu nazwa::wartość lub nazwa::opis.
Element opisywany
Pierwszy człon opisu elementu opisywanego; pierwsze znaczenie.
Drugi człon opisu elementu opisywanego, drugie znaczenie.
Trudne słowo
Objaśnienie trudnego słowa.

Pozioma lista opisów

<dl class="dl-horizontal">

Lista opisów
Lista opisów jest doskonałym rozwiązaniem dla definicji terminów i innych par typu nazwa::wartość lub nazwa::opis.
Element opisywany, termin
Pierwszy człon opisu elementu opisywanego; pierwsze znaczenie
Drugi człon opisu elementu opisywanego, drugie znaczenie
Rok 2015
Pierwsze ważne wydarzenie.
Drugie ważne wydarzenie.
Trudne słowo
Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa.

Uwaga! W liście opisów ułożonej poziomo zbyt długie elementy opisywane zostaną skrócone dzięki właściwości text-overflow i  zmieszczą się w lewej kolumnie. Na węższych ekranach urządzeń wyświetlających elementy zostaną ułożone w domyślny układ - w stos, jak w standardowej liście pionowej


Działania Kuźni Dostępnych Stron

Kogo zapraszamy?

urzędy, instytucje, organizacje, które:

  • wydają serwis oparty na CMS Joomla!
  • chcą stworzyć nowy dostępny serwis
  • chcą poprawić dostępność swojego serwisu

Jakie zadania przed nami?

  • szerzyć wiedzę o dostępności
  • promować dostępne strony
  • dostarczać wydawcom dobre rozwiązania
  • kreować społeczność rzeczników dostępności
  • pomagać rozwiązywać problemy z dostępnością
Logo Ministerstwa Administracji i Cyfryzacji Logo Spółzoelni FADO Logo Fundacji PCJ

Projekt współfinansowany ze środków Ministerstwa Administracji i Cyfryzacji