--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: 'Uczyń strony dostępnymi | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:35:27+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Każdemu obrazowi nadajesz opis, dbasz o kolejność nagłówków i o czytelność tekstu na kolorze, aby użytkownicy czytników ekranu i klawiatury mogli korzystać ze stron. Ta strona wymienia to, co kreator DXPR robi za ciebie, co dodajesz samodzielnie i jak sprawdzasz wynik przed publikacją. tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:35:27+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Uczyń strony dostępnymi' description: |- Każdemu obrazowi nadajesz opis, dbasz o kolejność nagłówków i o czytelność tekstu na kolorze, aby użytkownicy czytników ekranu i klawiatury mogli korzystać ze stron. Ta strona wymienia to, co kreator DXPR robi za ciebie, co dodajesz samodzielnie i jak sprawdzasz wynik przed publikacją. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:35:27+0000' dateModified: '2026-10-24T11:35:27+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: |- Każdemu obrazowi nadajesz opis, dbasz o kolejność nagłówków i o czytelność tekstu na kolorze, aby użytkownicy czytników ekranu i klawiatury mogli korzystać ze stron. Ta strona wymienia to, co kreator DXPR robi za ciebie, co dodajesz samodzielnie i jak sprawdzasz wynik przed publikacją. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Help Center](/pl/hc)/[Documentation](/pl/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Uczyń strony dostępnymi. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [Skróty klawiaturowe.](/pl/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Zapora sieciowa i przechowywanie danych](/pl/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) Każdemu obrazowi nadajesz opis, dbasz o kolejność nagłówków i o czytelność tekstu na kolorze, aby użytkownicy czytników ekranu i klawiatury mogli korzystać ze stron. Ta strona wymienia to, co kreator DXPR robi za ciebie, co dodajesz samodzielnie i jak sprawdzasz wynik przed publikacją. ## Co kreator robi za ciebie - **Prawdziwa struktura tekstu.** Element Text używa CKEditor 5 z prawdziwymi nagłówkami (od **Heading 1** do **Heading 6**), akapitami i listami. - **ARIA na elementach interaktywnych.** Karty mają `role="tablist"`i `role="tab"`. Paski postępu i liczniki kołowe mają `role="progressbar"` z wartością minimalną, maksymalną i bieżącą. Tytuły paneli zwijanych to przyciski zgłaszające, czy ich panel jest otwarty. - **Dostępne okna edytora.** Każde okno ustawień to `role="dialog"` z `aria-modal` i tytułem. - **Dostęp klawiatury w edytorze.** **Enter** otwiera ustawienia elementu, **Escape** zamyka panel albo odznacza element, a **Ctrl** (**Cmd**na Macu) ze strzałką przenosi elementy. Zobacz [ściągę skrótów klawiaturowych](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts). Elementy układu (sekcje, wiersze i kolumny) to zwykłe elementy `div`. Struktura ogłaszana przez czytnik ekranu pochodzi z twoich nagłówków. ## Dodawanie tekstu alternatywnego do obrazu 1. Wskaż obraz i kliknij **More** > **Settings**. 2. Otwórz panel **SEO**. 3. Wpisz opis w polu **Alt attribute**: co obraz pokazuje i po co jest na stronie, w jednym lub dwóch zdaniach, bez „image of”. 4. Kliknij **Save** w oknie, potem **Save** na pasku kontenera. Gdy **Alt attribute** jest puste, element Image nie zapisuje wcale `alt`, a czytniki ekranu mogą odczytać nazwę pliku. Do obrazu czysto dekoracyjnego użyj zamiast tego **Background image** sekcji w panelu **Style**; czytniki ekranu pomijają tła. Karuzela obrazów używa jednego **Alt attribute** dla wszystkich obrazów, więc opisz zestaw. Obrazy generowane przez AI startują z twoim promptem jako tekstem alternatywnym. Edytuj go tak, aby opisywał wynik, a nie żądanie. Zobacz [tekst alternatywny obrazu](/hc/documentation/learn-dxpr-builder/ai/image-alt-text). ## Zachowaj kolejność nagłówków 1. Daj stronie jeden Heading 1. Większość motywów pokazuje tytuł strony jako Heading 1, więc nie dodawaj drugiego w kreatorze. W CMS DXPR możesz zamiast tego ukryć ten tytuł na jednej stronie: w jej formularzu edycji otwórz **DXPR Theme Settings** i zaznacz **Page Title** w **DXPR Hide Regions**. 2. Na pasku narzędzi elementu Text użyj listy nagłówków, aby oznaczyć tytuły sekcji jako **Heading 2**, a podsekcje jako **Heading 3**. Nie pomijaj poziomów. 3. Do list używaj przycisków list na pasku narzędzi zamiast wpisywanych myślników. Trzy elementy mają stały poziom nagłówka. **Title** elementu Jumbotron to zawsze Heading 1, **Title** karty to zawsze Heading 5, a każdy **Toggle title** panelu zwijanego to Heading 2. ## Sprawdź kontrast kolorów Próbniki kolorów oferują paletę motywu, ale nie mierzą kontrastu, więc sprawdź go samodzielnie: | Tekst | Minimalny stosunek (WCAG AA) | |---|---| | Tekst podstawowy | 4,5:1 | | Duży tekst (24 px albo około 19 px pogrubiony) | 3:1 | Przy tekście na zdjęciu przyciemnij zdjęcie, aby stosunek trzymał się na całym obrazie. W panelu **Background effects** sekcji ustaw **Background effect**na **Gradient** z półprzezroczystym ciemnym **Start color**i **End color**. [Tła](/hc/documentation/learn-dxpr-builder/element-settings/background)pokazują kroki. ## Używaj opisowych linków i przycisków Elementy Button i Link pokazują wpisany przez ciebie tekst jako tekst linku. Napisz, co link robi („Zarejestruj się na dzień otwarty”), a nie „kliknij tutaj”. Element Link ma też **Title attribute** w panelu **SEO** na dłuższy opis. ## Co widzisz 1. Ustaw **View mode** na pasku kontenera na **Preview**, aby żadne kontrolki edytora nie przeszkadzały. 2. Naciśnij Tab, aby przejść przez stronę. Każdy przycisk, link i karta są osiągalne i pokazują widoczny pierścień fokusu. 3. Automatyczny kontroler, na przykład audyt dostępności przeglądarki albo rozszerzenie axe, nie zgłasza błędów dla treści kreatora na opublikowanej stronie. ## Jeśli nie widzisz czystego raportu - **Kontroler zgłasza obraz bez tekstu alternatywnego.** Pole **Alt attribute** elementu Image jest puste. Wypełnij je albo przenieś dekoracyjny obraz do tła sekcji. - **Kontroler zgłasza dwa Heading 1.** **Title** elementu Jumbotron to zawsze Heading 1, obok tytułu strony twojego motywu. Użyj zamiast tego elementu Text z Heading 2. - **Kontroler zgłasza pominięty poziom nagłówka.** **Title** karty to zawsze Heading 5. Zostaw je puste i zacznij kartę nagłówkiem elementu Text na właściwym poziomie. - **Kontroler zgłasza niski kontrast tekstu na zdjęciu.** Dodaj opisany wyżej gradient albo wybierz ciemniejsze tło tekstu. ## Co dalej? - [Skróty klawiaturowe](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts): pełna lista skrótów edytora. - [Zapora sieciowa i rezydencja danych](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall): pozostałe tematy zgodności.