[{"data":1,"prerenderedAt":23},["ShallowReactive",2],{"articolo-accessibilita-in-flutter-rendere-le-app-inclusive-con-semantics":3,"comments-article-accessibilita-in-flutter-rendere-le-app-inclusive-con-semantics":22},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},24,"Accessibilità in Flutter: rendere le app inclusive con Semantics","accessibilita-in-flutter-rendere-le-app-inclusive-con-semantics","Scopri come rendere le tue app Flutter accessibili a tutti gli utenti, inclusi quelli con disabilità. Una guida pratica al widget Semantics, agli screen reader e alle best practice per l'accessibilità.","## Perché l'accessibilità conta\n\nL'accessibilità (spesso abbreviata in **a11y**) non è un optional, ma un requisito fondamentale per costruire applicazioni davvero inclusive. Milioni di persone usano lettori di schermo, comandi vocali o controlli di ingrandimento per interagire con i dispositivi. In molti paesi, inoltre, l'accessibilità è un obbligo di legge (si pensi all'European Accessibility Act).\n\nLa buona notizia è che Flutter offre un solido supporto all'accessibilità out-of-the-box. La maggior parte dei widget Material e Cupertino è già correttamente etichettata per gli screen reader come **TalkBack** (Android) e **VoiceOver** (iOS). Tuttavia, quando creiamo widget personalizzati o gestiamo interazioni complesse, dobbiamo intervenire manualmente.\n\n## L'albero della semantica\n\nFlutter mantiene un **Semantics tree**, un albero parallelo al widget tree che descrive il significato dell'interfaccia ai servizi di accessibilità del sistema operativo. Ogni nodo semantico può contenere informazioni come l'etichetta, il valore, lo stato (selezionato, disabilitato) e le azioni disponibili.\n\nPer ispezionare questo albero durante lo sviluppo puoi usare il **Flutter DevTools**, che dispone di un visualizzatore dedicato, oppure attivare il debug visivo:\n\n```dart\nimport 'package:flutter\u002Frendering.dart';\n\nvoid main() {\n  \u002F\u002F Mostra i confini semantici a schermo\n  debugPaintSizeEnabled = false;\n  WidgetsApp.debugAllowBannerOverride = true;\n  runApp(const MyApp());\n}\n```\n\nIn alternativa, dal pannello DevTools puoi attivare **\"Highlight Semantics\"** per vedere come Flutter interpreta la UI.\n\n## Il widget Semantics\n\nIl widget `Semantics` è lo strumento principale per arricchire o correggere le informazioni di accessibilità. Immaginiamo un'icona cliccabile che funge da pulsante \"preferiti\":\n\n```dart\nSemantics(\n  label: 'Aggiungi ai preferiti',\n  button: true,\n  child: GestureDetector(\n    onTap: _toggleFavorite,\n    child: Icon(\n      _isFavorite ? Icons.favorite : Icons.favorite_border,\n    ),\n  ),\n)\n```\n\nSenza l'annotazione `Semantics`, uno screen reader leggerebbe semplicemente \"icona\" senza spiegarne la funzione. Con essa, l'utente sente \"Aggiungi ai preferiti, pulsante\".\n\n### Aggiornare il valore dinamicamente\n\nQuando lo stato cambia, è importante comunicarlo. Usa la proprietà `value` per dati variabili e `liveRegion` per notificare aggiornamenti automatici:\n\n```dart\nSemantics(\n  label: 'Volume',\n  value: '$volume percento',\n  liveRegion: true,\n  child: Slider(\n    value: volume.toDouble(),\n    max: 100,\n    onChanged: (v) => setState(() => volume = v.round()),\n  ),\n)\n```\n\n## Nascondere ed escludere nodi\n\nA volte alcuni elementi sono puramente decorativi e creerebbero solo confusione se letti. Possiamo escluderli con `ExcludeSemantics` o nascondere quelli figli con `excludeSemantics`:\n\n```dart\nExcludeSemantics(\n  child: Image.asset('assets\u002Fdecorazione.png'),\n)\n```\n\nAl contrario, per **unire** più widget in un unico nodo semantico (utile per una card composta da titolo e sottotitolo che vogliamo venga letta come un blocco unico) usiamo `MergeSemantics`:\n\n```dart\nMergeSemantics(\n  child: Row(\n    children: [\n      Text('Messaggi'),\n      Text('3 non letti'),\n    ],\n  ),\n)\n```\n\nIn questo modo lo screen reader leggerà \"Messaggi, 3 non letti\" come un'unica frase.\n\n## Etichette e ordine di lettura\n\n### Tooltip e label sui campi\n\nI campi di testo dovrebbero sempre avere un'etichetta chiara. L'attributo `labelText` di un `InputDecoration` viene già esposto correttamente, ma per gli `IconButton` ricordati di valorizzare `tooltip`:\n\n```dart\nIconButton(\n  icon: const Icon(Icons.delete),\n  tooltip: 'Elimina elemento',\n  onPressed: _delete,\n)\n```\n\n### Ordine di attraversamento\n\nGli screen reader seguono l'ordine dei widget. Se il layout visivo non corrisponde all'ordine logico, puoi forzare la sequenza con `Semantics(sortKey: OrdinalSortKey(...))`:\n\n```dart\nSemantics(\n  sortKey: const OrdinalSortKey(1),\n  child: primoElemento,\n)\n```\n\n## Contrasto e dimensioni: oltre lo screen reader\n\nL'accessibilità non riguarda solo i lettori di schermo. Considera anche:\n\n- **Contrasto del colore**: rispetta un rapporto minimo di 4.5:1 per il testo normale (linee guida WCAG AA).\n- **Dimensione dei target touch**: i tappabili dovrebbero misurare almeno 48x48 dp. Material applica già questa regola, ma verificala sui widget custom.\n- **Scalabilità del testo**: non bloccare il `textScaleFactor`. Usa unità relative e testa l'app con dimensioni del font aumentate dalle impostazioni di sistema.\n\n```dart\n\u002F\u002F Rispetta le impostazioni di sistema invece di forzare un valore\nMediaQuery(\n  data: MediaQuery.of(context).copyWith(\n    textScaler: MediaQuery.textScalerOf(context),\n  ),\n  child: child,\n)\n```\n\n## Testare l'accessibilità\n\nFlutter permette di scrivere test automatici sulla semantica. Le `Guidelines` integrate verificano contrasto, dimensione dei target e presenza di etichette:\n\n```dart\ntestWidgets('rispetta le linee guida di accessibilità', (tester) async {\n  final handle = tester.ensureSemantics();\n\n  await tester.pumpWidget(const MyApp());\n\n  await expectLater(tester, meetsGuideline(textContrastGuideline));\n  await expectLater(tester, meetsGuideline(androidTapTargetGuideline));\n  await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));\n\n  handle.dispose();\n});\n```\n\nOltre ai test automatici, **non sottovalutare il test manuale**: attiva TalkBack o VoiceOver e prova a navigare la tua app solo con l'audio. È il modo più efficace per scoprire problemi reali.\n\n## Conclusioni\n\nRendere accessibile un'app Flutter richiede attenzione, ma gli strumenti messi a disposizione dal framework rendono il lavoro gestibile. Inizia annotando i widget personalizzati con `Semantics`, escludi gli elementi decorativi, garantisci contrasti e target adeguati e integra i test di accessibilità nella tua pipeline. Il risultato sarà un'applicazione utilizzabile davvero da tutti — e spesso migliore anche per gli utenti senza disabilità.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F354b6a2d-018e-4526-9f5e-d9e7d73707d7.jpg",null,"published","2026-06-28T04:00:43+00:00","Accessibilità in Flutter con Semantics: guida pratica","Come rendere le app Flutter accessibili e inclusive: widget Semantics, screen reader, contrasto, target touch e test automatici di accessibilità.",{"id":16,"name":17,"slug":18},3,"Best practice","best-practice",{"id":20,"name":21},1,"Flutter Bot",[],1785219604417]