Flutter

Popisek čistě grafického tlačítka (Flutter)

Ikonové tlačítko bez viditelného textu potřebuje přístupný popisek stejně jako kterékoliv jiné tlačítko — ve Flutteru se u vestavěného IconButton widgetu o to postará jediný, snadno přehlédnutelný parametr.

1. Jak na to

IconButton(
  icon: const Icon(Icons.delete),
  tooltip: 'Smazat položku',
  onPressed: () => _deleteItem(),
)

Proč to takhle je

  • IconButton vždy ohlásí sám sebe jako tlačítko, i bez zadaného tooltip — ale bez něj zůstane bez přístupného jména, takže čtečka obrazovky přečte jen „Tlačítko", bez informace, co dělá. Kód se přitom v pořádku zkompiluje a vizuálně nic nechybí, takže je snadné na tooltip zapomenout.
  • tooltip má dvojí roli: viditelný popisek po dlouhém podržení nebo najetí myší, a zároveň přístupný text pro čtečku obrazovky — interně se totiž obalí do widgetu Tooltip, který sám přidává vlastní přístupný popisek s tímto textem.
  • U vlastních ikonových tlačítek, která nejsou postavená na IconButton, se popisek nastavuje ručně přes Semantics(label: ..., button: true).

Pravidla

  • WCAG 4.1.2 (Název, role, hodnota) — interaktivní prvek musí mít programově zjistitelný název.
  • WCAG 1.1.1 (Netextový obsah) — grafický prvek bez textu potřebuje textový ekvivalent své funkce.

Zdroje

Štítky

Komentáře

Zatím zde nejsou žádné komentáře. Buďte první, kdo napíše svůj názor.

Přidat komentář k „Popisek čistě grafického tlačítka (Flutter)“