Nome Accessibile Significativo

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Assicurati che i nomi accessibili non siano ridondanti

Not for use with personal data

Cosa Verifichiamo

Il nome accessibile di un elemento non dovrebbe includere il suo tratto di accessibilità. VoiceOver annuncia automaticamente il tratto, quindi includerlo nel nome provoca una doppia lettura.

Questa regola impone una best practice stabilita dalle Linee guida per l'interfaccia umana di Apple. Puoi disattivare questa regola dal Dashboard Mobile o ignorare la regola nei test scritti per iOS.

Esempio Errato ❌

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a red focus ring. VoiceOver speech bubble displays the announcement with the element name and trait: 'Like button, Button'.

VoiceOver announces: „Pulsante Mi piace, pulsante“

La parola „pulsante“ è inclusa nel nome accessibile and annunciata nuovamente come tratto, creando un annuncio ridondante che può confondere gli utenti del lettore di schermo

Esempio Corretto ✅

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a green focus ring. VoiceOver speech bubble displays the announcement with the element name and trait - 'Like this article, button'

VoiceOver announces: „Mi piace questo articolo, Pulsante“

Il nome accessibile - „Mi piace questo articolo“ - non include il tratto dell'elemento

VoiceOver aggiunge automaticamente il tratto, quindi gli utenti sentono ogni informazione esattamente una sola volta

A Colpo d'Occhio

Questa regola ha un impatto minore per gli utenti
Il nome accessibile di un elemento non dovrebbe ripetere il suo tratto di accessibilità - VoiceOver annuncia automaticamente il tratto
Ad esempio, un pulsante con il nome „Pulsante Avanti“ provoca un annuncio ridondante da parte di VoiceOver: „Pulsante Avanti, pulsante“

Impatto sugli Utenti

Gli utenti VoiceOver sono quelli più colpiti. Quando un nome accessibile include il tratto dell'elemento, VoiceOver annuncia il tratto due volte - ad esempio, „Pulsante Avanti, pulsante“ invece di „Avanti, pulsante.“ Questo è ridondante e può essere fonte di confusione o distrazione per gli utenti del lettore di schermo.

Conferma Problema di Nome Accessibile Significativo

Attiva VoiceOver
Concentrati sull'elemento
Accadrà una delle seguenti cose:
- Inaccessibile: VoiceOver annuncia il tratto di accessibilità dell'elemento due volte - come parte del nome accessibile, e poi ancora come tratto (ad esempio, „Pulsante Avanti, pulsante“)
- Accessibile: VoiceOver annuncia il nome accessibile, seguito dal tratto (ad esempio, „Avanti, pulsante“)

Risolvi Problemi

Per risolvere un problema di Nome Accessibile Significativo, assicurati che il nome accessibile non contenga il tratto di accessibilità dell'elemento. VoiceOver aggiunge automaticamente il tratto, quindi includerlo nel nome risulta in un annuncio ridondante.

UIKit

Per correggere in Storyboard:

Seleziona l'elemento con un problema MeaningfulAccessibleName.
Assicurati che il Pannello degli Ispettori sia visibile.
Seleziona l'Ispettore Identità.
Sotto Accessibilità, inserisci un'etichetta che corrisponda al testo visibile e non includa il tratto di accessibilità dell'elemento.

Per correggere nel codice, assicurati che il valore dell'etichetta di accessibilità corrisponda o contenga tutto il testo visibile sull'elemento, e non includa il suo tratto di accessibilità:

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

Imposta un'etichetta di accessibilità che contenga il testo visibile e non includa il tratto di accessibilità dell'elemento:

Button(action: {
    openMenu()
}) {
    Text("Next")
}.accessibility(label: Text("Next"))

React Native

Assicurati che l'accessibilityLabel dell'elemento non contenga il valore di accessibilityRole dell'elemento:

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>

Flutter

I nomi accessibili devono descrivere lo scopo dell'elemento. Evita nomi generici come „pulsante“ o „immagine“, e non includere il ruolo nel nome. Il lettore di schermo annuncia il ruolo separatamente.

  // Failing — name includes the role, screen reader says "Search button, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search button',
    onPressed: () {},
  )

  // Passing — name describes the action, screen reader says "Search, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Posso Ignorare Questa Regola?

Nome Accessibile Significativo ha un Impatto minore per gli utenti e impone una best practice di Apple piuttosto che un requisito rigoroso WCAG. Puoi disattivare completamente questa regola dal Dashboard Mobile, o ignorare i singoli risultati nei tuoi test iOS. Scopri di più su ignorare regole.