Czy czytniki ekranu traktują obrazy SVG i rastrowe inaczej? - svg, dostępność, czytniki ekranu

W przeciwieństwie do obrazu rastrowego (np. PNG), czytnik ekranu mógłby teoretycznie odczytać i nieco zrozumieć zawartość pliku SVG. Co zazwyczaj robią czytniki ekranu, gdy napotykają obraz SVG i jak to zachowanie różni się od tego, kiedy napotykają obraz rastrowy?

Jest kilka konkretnych rzeczy, które próbuję wymyślić:

1. Czy czytnik ekranu podejmie próbę ogłoszenia czegokolwiek w SVG, na przykład treści w <svg:text> tagi (przy użyciu treści zamówienia pojawia się w SVG jako kolejność czytania)?
2. Jeśli czytniki ekranu starają się ogłosić rzeczy w SVG, czy istnieją techniki, które mogą im pomóc (na przykład sposób, aby powiedzieć im "ta ścieżka pokazuje gwiazdę")?
3. Czy czytnik ekranu będzie traktować zawartość SVG w linii wewnętrznej i <img src="/images/file.svg"/> różnie?

Odpowiedzi:

Obsługa dostępności została rozpatrywane od pierwszych wersji SVG.

Najnowsza wersja (w wersji rozwojowej) o SVG (wersja 2) ma rozszerzona sekcja na temat dostępności.

Jednak nie wiem dokładnie, jak dobrze popularne czytniki ekranu obsługują pliki SVG. Będziesz musiał sam to zbadać.

Czy czytnik ekranu podejmie próbę ogłoszenia czegokolwiek w SVG, na przykład treści w tagach (przy użyciu treści zamówienia pojawia się w SVG jako kolejność czytania)?

Czy próbowałeś?

Jeśli czytniki ekranu starają się ogłosić rzeczy w SVG, czy istnieją techniki, które mogą im pomóc (na przykład sposób, aby powiedzieć im "ta ścieżka pokazuje gwiazdę")?

Tak. używałbyś tagów ARIA. Zobacz powyższe linki.

Czy czytnik ekranu traktuje zawartość SVG w linii i jest inny?

Absolutnie. Pliki SVG załadowane jako <img> (która obejmuje również background-image itp.) są skutecznie bitmapy. Zawartość nie jest dostępna dla strony ani czytników ekranu. Jeśli chcesz, aby SVG było dostępne, musi być wbudowane. Chociaż możliwe jest również ładowanie plików SVG za pośrednictwem <object> mogą być obsługiwane przez czytniki ekranu.

Możesz wstawić tytuł wewnątrz svg głównego elementu, aby oznaczyć ten obraz, przykład:

<svg version="1.1" width="300" height="200">
<title>Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>