`-`

> For the complete documentation index, see [llms.txt](https://docs.emaillabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/tworzenie-inkluzywnych-e-maili-dostepnosc-eaa.md).

# Tworzenie Inkluzywnych E-maili (Dostępność / EAA)

Dostępność cyfrowa (ang. *Accessibility*) to projektowanie treści w taki sposób, aby mogły z nich swobodnie korzystać osoby z różnymi niepełnosprawnościami, np. wzroku, słuchu, ruchu czy poznawczymi. Jest to nie tylko dobra praktyka, ale także wymóg prawny, regulowany m.in. przez Europejski Akt o Dostępności (EAA), którego wymagania weszły w życie w czerwcu 2025 roku.

Tworzenie dostępnych e-maili zapewnia, że Twoje komunikaty dotrą do jak najszerszego grona odbiorców i świadczy o profesjonalizmie marki. Poniżej znajdują się kluczowe zasady, o których należy pamiętać.

### Używaj Semantycznego HTML i Atrybutów `role`&#x20;

Stosuj znaczniki HTML zgodnie z ich przeznaczeniem: nagłówki (`<h1>`-`<h6>`) do strukturyzowania treści, paragrafy (`<p>`) do tekstu, a listy (`<ul>`, `<ol>`) do wyliczeń. Pomaga to w nawigacji użytkownikom czytników ekranu. Jeśli używasz tabel do budowy layoutu, dodaj do tagu `<table>` atrybut `role="presentation"`, aby czytnik ekranu nie traktował go jako tabeli z danymi.

### Zadbaj o Kontrast Kolorów&#x20;

Upewnij się, że istnieje wystarczający kontrast między kolorem tekstu a tłem. Według standardu WCAG, minimalny stosunek kontrastu to 4.5:1 dla zwykłego tekstu. Użyj narzędzi online do sprawdzania kontrastu i nigdy nie przekazuj kluczowych informacji wyłącznie za pomocą koloru.

### Opisuj Grafiki (Atrybut `alt`)&#x20;

Każda grafika, która niesie ze sobą istotną informację, musi mieć opisowy atrybut `alt`. Tekst alternatywny zostanie odczytany przez czytniki ekranu lub wyświetlony, gdy obraz się nie załaduje. Jeśli grafika jest czysto dekoracyjna, użyj pustego atrybutu: `alt=""`.

### Projektuj Czytelne Teksty i Linki

* **Tekst Linku:** Unikaj generycznych zwrotów typu "Kliknij tutaj". Tekst linku powinien jasno opisywać, dokąd prowadzi (np. "Zobacz regulamin promocji").
* **Wyróżnienie Linku:** Upewnij się, że linki są odróżnione od reszty tekstu nie tylko kolorem, ale również podkreśleniem.
* **Wyrównanie Tekstu:** Unikaj justowania tekstu. Wyrównanie do lewej strony jest najbardziej czytelne i nie tworzy problematycznych odstępów między wyrazami.

### Zapewnij Czytelność Czcionki i Układu&#x20;

Wybieraj proste, bezszeryfowe kroje pisma (np. Arial, Helvetica, Verdana). Zadbaj o odpowiedni rozmiar czcionki (minimum 16px dla tekstu głównego) oraz interlinię (odstęp między wierszami) o wartości ok. 1.5, co znacząco ułatwia czytanie.

### Zachowaj Logiczną Kolejność Czytania&#x20;

Upewnij się, że treść w kodzie HTML ma logiczny porządek, który będzie poprawnie odczytany przez czytniki ekranu. W układach opartych na tabelach, kolejność elementów w kodzie (`<td>`) ma kluczowe znaczenie.

### Ustaw Atrybut Języka&#x20;

W tagu `<html>` na początku dokumentu ustaw atrybut `lang`, który określa główny język treści (np. `<html lang="pl">`). Pomaga to czytnikom ekranu w użyciu poprawnej wymowy i akcentu.

### Unikaj Migających Treści&#x20;

Animacje (np. GIFy) nie powinny migać częściej niż 3 razy na sekundę. Szybkie, intensywne migotanie może wywoływać ataki epilepsji fotogennej.