Uczyń strony dostępnymi.

Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken

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.

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.

Panel SEO elementu Image z tekstem alternatywnym Orange painting of a face in profile, obok tego obrazu i podpisu Spring exhibition

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.

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 pokazują kroki.

Panel efektów tła sekcji z wybranym gradientem, ciemnymi półprzezroczystymi próbkami pod Start color i End color oraz kierunkiem 180, obok przyciemnionego zdjęcia biurka pod białym nagłówkiem

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?