Označení obrázku jako dekorativního (Flutter)

Flutter sám od sebe nepozná, jestli je obrázek dekorativní, nebo nese informaci — a pokud se o to nepostaráte sami, obrázek skončí v přístupnostním stromu jako nepojmenovaný „obrázkový" uzel, který čtečka obrazovky stejně ohlásí, jen bez popisu.

1. Jak na to — Image.excludeFromSemantics

Image.asset(
  'assets/oddelovac.png',
  excludeFromSemantics: true,
)

2. Jak na to — ExcludeSemantics pro cokoliv jiného než Image

ExcludeSemantics(
  child: CustomPaint(painter: DecorativePainter()),
)

ExcludeSemantics se hodí, když dekorativní obsah není jeden Image widget, ale třeba vlastní kresba (CustomPaint), SVG, nebo celá skupina widgetů dohromady.

Proč to takhle je

• Nenastavený (null) popisek obrázek sám o sobě nevyloučí. Pokud necháte excludeFromSemantics na výchozí hodnotě false, Image widget i tak obalí obsah do sémantického uzlu s příznakem „toto je obrázek" a prázdným popiskem — čtečka obrazovky na něj narazí, jen jí nic neřekne.
• ExcludeSemantics s excluding: true (výchozí) znamená, že se do celého podstromu vůbec nezanoří při skládání přístupnostního stromu — je to skutečné úplné odstranění, ne jen „prázdný" uzel.
• Image.excludeFromSemantics je jen pohodlná zkratka pro Image konkrétně — dělá to samé, navíc automaticky ignoruje semanticLabel, kdyby byl omylem nastavený zároveň.

Pravidla

• WCAG 1.1.1 (Netextový obsah) — čistě dekorativní obsah nemá mít přístupné jméno vůbec, ne prázdné nebo zavádějící.