Texto Associado

Um controle deve obter seu nome acessível de um rótulo próximo disponível para tecnologias assistivas, como o VoiceOver e o Controle por Voz.

Impacto

Pessoas que usam o VoiceOver são as mais impactadas. Um controle que está visualmente vinculado a um elemento descritivo deve também transmitir essa relação através do texto para a tecnologia assistiva.

Confirmação

1. Ative o VoiceOver
2. Foque no controle
3. Uma das seguintes situações acontecerá:
   • Inacessível: Não anunciará o rótulo associado como o nome do controle, apenas seu papel e valor, se presente.
   • Acessível: Anunciará o rótulo associado como o nome do controle com o VoiceOver.

Como Corrigir

UIKit

Para corrigir um problema encontrado por esta regra, adicione um accessibilityLabel ao controle com o descritor vizinho.

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Para corrigir um problema encontrado por esta regra, adicione um accessibilityLabel ao controle com o descritor vizinho.

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibility(label: Text(sliderLabel))
    }
}

React Native

Garanta que o texto visível que acompanha um controle seja incluído na accessibilityLabel prop do controle:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Quando o texto visível e um controle estão agrupados dentro de uma visão contendo focalizável, garanta que o texto visível seja incluído na accessibilityLabel prop da visão contenedora:

 <View
  accessible={true} 
  accessibilityElementsHidden={false} 
  accessibilityLabel='Light Level'
>
   <Text 
     style={{ color: 'black', fontSize: 22 }} 
     accessible={false}
   > 
     Light Level 
   </Text>
   <Slider accessible={false}/>
</View>