Piktogramy dostępności: skąd wziąć, jak podpisać, jak osadzić

Bezpłatny zestaw 22 piktogramów SVG, które oznaczają udogodnienia na wydarzeniach i w kulturze. Pokazujemy, jak ich użyć zgodnie z licencją i z WCAG.

Skąd wziąć

Zestaw jest w repozytorium piktogramy-dostepnosci na GitHubie. Możesz pobrać pojedyncze pliki SVG albo cały zestaw w pliku ZIP (SVG i licencja).

Kto jest kim:

  • Autor piktogramów: Tomasz Grabowski.
  • Prawa autorskie: Fundacja Kultury Bez Barier.
  • Opracowanie plików SVG: Jacek Zadrożny. Dodał tytuły, opisy, metadane i atrybuty ARIA, kształtów nie zmieniał.

Piktogramy są jednokolorowe (ciemne, prawie czarne), mają rozmiar 48 na 48 i skalują się bez utraty jakości.

W zestawie są: audiodeskrypcja, audioprzewodnik, ciche godziny, dostępność dla osób w spektrum autyzmu, dostępność dla osób z niepełnosprawnością intelektualną, dostępność dla osób z niepełnosprawnością ruchową, dostępność, ETR (tekst łatwy do czytania i zrozumienia), lektor polski, materiały dotykowe, miejsce wyciszenia, napisy angielskie, napisy dla niesłyszących, napisy na żywo, napisy polskie, pętla indukcyjna, prowadzenie w PJM, przedprzewodnik, słuchawki wyciszające, system FM, tłumaczenie na język obcy i tłumaczenie na PJM.

Przykład: tak oznaczamy dostępność naszych szkoleń.

  • Napisy na żywo
  • Dostępne materiały

Piktogramy nie są naszym projektem. Na tej stronie opisujemy, jak z nich korzystać.

Jak podpisać

Piktogramy są na licencji Creative Commons Uznanie autorstwa, Na tych samych warunkach 4.0 (CC BY-SA 4.0). Możesz ich używać bez opłat, także komercyjnie, na przykład w płatnym szkoleniu albo w materiałach dla klienta. W zamian musisz spełnić kilka warunków.

Co musisz zrobić

  • Podaj autorstwo: autora, właściciela praw i licencję z linkiem. Wymień też opracowanie SVG, bo licencja każe zachować informację o wcześniejszych zmianach.
  • Oznacz swoje zmiany: jeśli zmieniasz kolor, kształt albo łączysz piktogramy, napisz, co zmieniłeś.
  • Udostępnij przeróbkę na tej samej licencji: zmieniony piktogram też musi być na CC BY-SA 4.0. Sam niezmieniony piktogram na Twojej stronie czy slajdzie nie zmienia licencji całej strony ani prezentacji.
  • Nie zamykaj piktogramów: nie zabraniaj innym ich dalszego użycia. Płatny dostęp do kursu jest w porządku, zakaz kopiowania samych piktogramów już nie.
  • Nie sugeruj poparcia: nie pisz ani nie dawaj do zrozumienia, że autor lub fundacja polecają Twoją firmę czy wydarzenie.

Logotyp Fundacji Kultury Bez Barier nie jest objęty tą licencją. Nie używaj go razem z piktogramami bez zgody fundacji.

Gotowy podpis na stronę internetową

Wstaw pod piktogramami albo w stopce strony, z linkami:

Piktogramy: Tomasz Grabowski, prawa autorskie: Fundacja Kultury Bez Barier, opracowanie SVG: Jacek Zadrożny, licencja CC BY-SA 4.0.

Jeśli zmieniasz piktogram, dopisz na przykład: „Zmiany: kolor dopasowany do szablonu strony”.

Gotowy podpis na plakat lub ulotkę

Na papierze linki nie działają, więc wpisz krótkie adresy:

Piktogramy: Tomasz Grabowski, © Fundacja Kultury Bez Barier, oprac. SVG: Jacek Zadrożny. CC BY-SA 4.0: creativecommons.org/licenses/by-sa/4.0, github.com/JacZad/piktogramy-dostepnosci

Na slajdach podpis może stać na slajdzie z piktogramem albo na slajdzie ze źródłami na końcu prezentacji.

Jak osadzić na stronie

Najważniejsza zasada: piktogram zawsze z podpisem tekstowym obok. Część piktogramów nie jest powszechnie znana (na przykład przedprzewodnik, ciche godziny, system FM), więc sam obrazek nie wystarczy nikomu, nie tylko osobom z czytnikiem ekranu.

Piktogram z podpisem obok: pusty alt

Gdy obok ikony stoi tekst o tym samym znaczeniu, ikona jest ozdobą. Daj jej pusty alt, żeby czytnik ekranu nie przeczytał nazwy dwa razy.

<li>
  <img src="/piktogramy/napisy-na-zywo.svg" alt="" width="48" height="48">
  Napisy na żywo
</li>

Sam piktogram bez podpisu: alt ze znaczeniem

Jeśli wyjątkowo ikona stoi sama (na przykład w wąskiej kolumnie tabeli), w alt wpisz, co oznacza, a nie jak wygląda. Skróty rozwiń.

<img src="/piktogramy/etr.svg"
     alt="Tekst łatwy do czytania i zrozumienia (ETR)">

Tytuł i opis zapisane wewnątrz pliku SVG nie są odczytywane, gdy wstawiasz plik przez <img>. Liczy się tylko alt.

SVG wklejone w kod strony

  • Plik ma już role="img" i nazwę z elementu <title>. To wystarcza jako nazwa dostępna.
  • Plik ma też aria-describedby z opisem wyglądu, na przykład „Prostokątny dymek napisów z napisem LIVE”. Na stronie usługowej to zwykle zbędny szum. Możesz usunąć ten atrybut.
  • Jeśli podpis stoi obok, dodaj do <svg> atrybut aria-hidden="true".
  • Ten sam piktogram wklejony dwa razy na jednej stronie powiela identyfikatory id. Przy wielu użyciach wybierz <img>.

Kontrast i rozmiar

  • Ciemny piktogram na białym tle ma bardzo wysoki kontrast. Na ciemnym albo kolorowym tle zniknie: daj pod nim jasne tło.
  • Gdy piktogram jest jedynym nośnikiem informacji, musi mieć kontrast co najmniej 3:1 z tłem.
  • Wymiary ikony ustaw w jednostkach rem lub em, wtedy rośnie razem z tekstem przy powiększeniu.
  • Zmiana koloru to zmiana utworu: oznacz ją w podpisie.

Źródła

Piktogramy na tej stronie: Tomasz Grabowski, prawa autorskie: Fundacja Kultury Bez Barier, opracowanie SVG: Jacek Zadrożny, licencja CC BY-SA 4.0.

Stan na .

Więcej o tekstach alternatywnych i kontraście znajdziesz w WCAG prostym językiem.