Niektóre osadzone pliki lub multimedia nie mają opisu tekstowego

Treść osadzona za pomocą znacznika <object>, np. tabela rozmiarów w PDF, katalog, interaktywna przeglądarka lub starsze multimedia, nie ma tekstu, który wyjaśnia, czym jest.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Osoby korzystające z czytników ekranu nie słyszą nic przydatnego, więc mogą nie wiedzieć, że na stronie jest tabela rozmiarów, katalog lub film, i pominąć zawarte w nich informacje.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby, których przeglądarka nie wyświetla osadzonej treści

Jak to naprawić

Każdy element <object> powinien mieć alternatywę tekstową: aria-label lub title opisujący treść, aria-labelledby wskazujący widoczny nagłówek albo tekst zastępczy wewnątrz elementu <object>. Przy dokumentach, takich jak tabela rozmiarów w PDF, warto dodać też zwykły link do pliku, a najlepiej umieścić najważniejsze informacje na stronie jako tekst HTML. Jeśli obiekt jest czysto dekoracyjny, należy nadać mu role="presentation" lub role="none".

W Shopify

W obecnych motywach rzadko; zwykle to PDF lub multimedia wklejone na stronę lub do opisu produktu albo osadzenie dodane przez aplikację. Należy dodać title lub aria-label w tym HTML albo zastąpić osadzenie linkiem do pliku.

W Shoptet (CZ)

Rzadko; zwykle HTML wklejony do opisu produktu lub artykułu. Należy dodać title lub zastąpić osadzenie linkiem do pobrania; w sprawie kodu szablonu warto zwrócić się do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle osadzenie na stronie CMS lub w opisie produktu albo starszy moduł motywu. Należy dodać title lub tekst zastępczy w edytorze treści albo w szablonie .tpl modułu.

W WooCommerce

Zwykle wtyczka do wyświetlania PDF lub osadzania albo HTML wklejony do opisu produktu lub bloku kreatora stron. Warto sprawdzić w ustawieniach wtyczki pole tytułu lub dodać aria-label w kodzie osadzenia.

Normy

Normy
Norma	Punkt
WCAG 2.2	1.1.1 (A) Non-text Content
WCAG 2.1	1.1.1 (A) Non-text Content
WCAG 2.0	1.1.1 (A) Non-text Content
EN 301 549 4.1.1	9.1.1.1
EN 301 549 3.2.1	9.1.1.1
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.1.1.1

Automatyczny test: reguła axe-core object-alt. dequeuniversity.com, github.com, www.w3.org

Strona sama się odświeża lub przekierowuje
WCAG 2.2.1 A
Zdjęcia nie mają opisu tekstowego
WCAG 1.1.1 A
Lista nazw i wartości jest zbudowana nieprawidłowo
WCAG 1.3.1 A
Użytkownicy klawiatury nie mogą dotrzeć do osadzonej treści
WCAG 2.1.1 A

Wszystkie reguły, które sprawdzamy