Request for help with an accessible app in Flet and empty elements created in complex windows.

[Ambro86]

Question

Hi everyone,
First of all, thank you for developing Flet. I really love Python, and it's amazing to be able to develop apps for iPhone and Android using this language.
I'm currently working on a text adventure RPG, fully accessible to blind users, with music, sound effects, and more. The project is free and open-source — you can check it out here:
👉 https://github.com/Ambro86/AccessibleIphoneApp/
Right now, the game is only available in Italian, but I plan to add more languages soon.
However, I'm facing an issue and hope someone here can help. When I create windows with several buttons (e.g. 6 or 7), everything works fine on Windows. But on iPhone, when using VoiceOver (the built-in screen reader), I notice that some "empty" elements are detected — meaning VoiceOver reads nothing in those spots. These empty elements appear, for example, before the screen title or between sections.
This behavior affects accessibility, which is a top priority for me as a blind developer. I’ve managed to implement everything else — music, game saving, sound effects, color changes, icons, etc. — but this issue is really blocking me.
Is there any workaround or fix to avoid these empty elements from being generated?
I’ve also opened an issue here:
👉 #5417
Thanks a lot in advance for any help you can provide! I really hope there’s a way around this.
Best regards,
Ambro

Code sample

def crea_vista_gioco(self):
        """Crea la vista principale di gioco"""
        
        # Titolo con Semantics senza label
        titolo = ft.Semantics(
            container=True,
            content=ft.Text(
                "AVVENTURA IN CORSO", 
                size=24, 
                weight=ft.FontWeight.BOLD, 
                text_align=ft.TextAlign.CENTER,
                color=ft.Colors.AMBER_400,
                style=ft.TextThemeStyle.HEADLINE_MEDIUM
            )
        )
        
        # Ottieni i valori attuali dalle variabili globali se esistono
        valore_storia = "🎮 Benvenuto nell'Avventura Incrementale!\n Compagni gatti con abilità speciali\n Raccogli risorse e costruisci\n Combatti mostri e sali di livello\n🍽️ Gestisci cibo e acqua per energia\n🎵 Audio immersivo e feedback aptico\n\nPremi 'Inizia Avventura' per cominciare!"
        if hasattr(self, 'area_storia') and self.area_storia and hasattr(self.area_storia, 'value'):
            valore_storia = self.area_storia.value
        
        valore_stats = f" Statistiche Giocatore:\n Livello {self.livello} •  {self.vita}/{self.vita_massima} HP •  {self.monete} monete\n Attacco: {self.calcola_attacco_totale()} •  Difesa: {self.calcola_difesa_totale()}\n EXP: {self.esperienza}/{self.esperienza_necessaria}"
        if hasattr(self, 'area_stats') and self.area_stats and hasattr(self.area_stats, 'value'):
            valore_stats = self.area_stats.value
        
        # Area storia come gruppo semantico
        area_storia_locale = ft.Semantics(
            container=True,
            content=ft.Container(
                content=ft.Text(
                    valore_storia,
                    size=14,
                    color=ft.Colors.AMBER_100
                ),
                bgcolor=ft.Colors.DEEP_PURPLE_900,
                border_radius=5,
                padding=10,
                expand=True
            )
        )

        # Area statistiche come gruppo semantico con TextField
        area_stats_textfield = ft.TextField(
            value=valore_stats,
            multiline=True,
            read_only=True,
            min_lines=4,
            max_lines=6,
            text_size=14,
            color=ft.Colors.CYAN_100,
            border_color=ft.Colors.TRANSPARENT,
            focused_border_color=ft.Colors.TRANSPARENT,
            bgcolor=ft.Colors.TRANSPARENT
        )
        
        area_stats_locale = ft.Semantics(
            container=True,
            content=ft.Container(
                content=area_stats_textfield,
                bgcolor=ft.Colors.BLUE_GREY_900,
                border_radius=5,
                padding=10
            )
        )
        
        # Aggiorna i riferimenti globali per mantenere la sincronizzazione
        self.area_storia = area_storia_locale
        self.area_stats = area_stats_textfield  # Punta al TextField per aggiornamenti
        
        # Pulsanti di gioco
        pulsanti_gioco = []
        
        # Elemento decorativo per evitare elemento vuoto
        elemento_decorativo = ft.Semantics(
            container=True,
            content=ft.Container(height=1, bgcolor=ft.Colors.TRANSPARENT)
        )
        pulsanti_gioco.append(elemento_decorativo)
        
        # Azioni incrementali senza Semantics
        azioni_incrementali = self.azioni_incrementali_possibili()
        for i, (testo, funzione, tooltip) in enumerate(azioni_incrementali):
            pulsante_incrementale = ft.ElevatedButton(
                text=testo,
                on_click=funzione,
                width=280,
                height=50,
                bgcolor=ft.Colors.GREEN_600,
                color=ft.Colors.WHITE,
                tooltip=tooltip,
                key=f"azione_{i}_{testo.replace(' ', '_')}"
            )
            pulsanti_gioco.append(pulsante_incrementale)
        
        # Pulsante cambio area
        if len(self.aree_sbloccate) > 1:
            pulsante_aree = ft.ElevatedButton(
                text="Cambia Area",
                on_click=lambda e: self.page.go("/aree"),
                width=280,
                height=50,
                bgcolor=ft.Colors.BLUE_600,
                color=ft.Colors.WHITE,
                tooltip="Scegli area da esplorare",
                key="btn_cambia_area"
            )
            pulsanti_gioco.append(pulsante_aree)
        
        # Pulsanti di navigazione
        pulsante_combattimento = ft.ElevatedButton(
            text="Combattimento",
            on_click=lambda e: self.page.go("/combattimento"),
            width=280,
            height=50,
            bgcolor=ft.Colors.RED_600,
            color=ft.Colors.WHITE,
            tooltip="Combatti contro i mostri"
        )
        
        pulsante_negozio = ft.ElevatedButton(
            text="Negozio",
            on_click=lambda e: self.page.go("/negozio"),
            width=280,
            height=50,
            bgcolor=ft.Colors.ORANGE_600,
            color=ft.Colors.WHITE,
            tooltip="Visita il negozio"
        )
        
        pulsante_gatti = ft.ElevatedButton(
            text="Gatti",
            on_click=lambda e: self.page.go("/gatti"),
            width=280,
            height=50,
            bgcolor=ft.Colors.PINK_600,
            color=ft.Colors.WHITE,
            tooltip="Gestisci i tuoi gatti"
        )
        
        pulsanti_gioco.extend([pulsante_combattimento, pulsante_negozio, pulsante_gatti])
        
        # Pulsante boss
        if (self.area_attuale in self.boss_aree and 
            self.boss_aree[self.area_attuale]["nome"] not in self.boss_sconfitti and
            self.progressione_area.get(self.area_attuale, 0) >= 100):
            pulsante_boss = ft.ElevatedButton(
                text="Combatti Boss dell'Area!",
                on_click=self.combatti_boss,
                width=280,
                height=50,
                bgcolor=ft.Colors.DEEP_PURPLE_600,
                color=ft.Colors.WHITE,
                tooltip=f"Affronta il boss: {self.boss_aree[self.area_attuale]['nome']}"
            )
            pulsanti_gioco.append(pulsante_boss)
        
        # Pulsante salva
        pulsante_salva = ft.ElevatedButton(
            text="Salva Partita",
            on_click=self.salva_gioco,
            width=280,
            height=50,
            bgcolor=ft.Colors.PURPLE_600,
            color=ft.Colors.WHITE,
            tooltip="Salva il tuo progresso"
        )
        pulsanti_gioco.append(pulsante_salva)
        
        # Colonna pulsanti senza Semantics per permettere accesso individuale
        lista_pulsanti = ft.Column(
            controls=pulsanti_gioco,
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            spacing=15,
            scroll=ft.ScrollMode.AUTO
        )
        
        # Controlli di gioco senza label per preservare il contenuto naturale
        gioco_controls = ft.Column([
            area_storia_locale,
            area_stats_locale,
            lista_pulsanti
        ], spacing=10, tight=False)
        
        # Pulsante menu come gruppo semantico
        pulsante_menu = ft.Semantics(
            container=True,
            content=ft.ElevatedButton(
                text="Torna al Menu",
                on_click=lambda e: self.page.go("/"),
                width=200,
                height=50,
                bgcolor=ft.Colors.GREY_600,
                color=ft.Colors.WHITE,
                tooltip="Torna al menu principale"
            )
        )
        
        # Content principale senza height fisso per evitare contenuto vuoto
        content = ft.Column([
            titolo,
            ft.Container(
                content=gioco_controls,
                bgcolor=ft.Colors.GREY_800,
                border_radius=10,
                padding=10,
                expand=True  # Usa expand invece di height
            ),
            pulsante_menu
        ], scroll=ft.ScrollMode.AUTO, spacing=30, expand=True)
        
        return ft.View(
            "/gioco",
            controls=[
                # Semantics senza label per evitare elemento vuoto ma preservare contenuto
                ft.Semantics(
                    container=True,
                    content=ft.Container(
                        content=content,
                        bgcolor=ft.Colors.GREY_900,
                        padding=20,
                        expand=True
                    )
                )
            ],
            bgcolor=ft.Colors.GREY_900
        )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.