Nome da Vista Ativa
Qualquer vista interativa deve ter um nome acessível disponível para tecnologias assistivas como o TalkBack e o Acesso por Voz.
Impacto
As pessoas que usam o TalkBack são as mais afetadas. A incapacidade de focar em uma vista ou de ter o nome da vista anunciado através do TalkBack cria uma experiência inacessível.
A versão do Android, dispositivo e fabricante podem desempenhar um papel na detecção de problemas.
Confirmação
- Ative o TalkBack
- Tente focar o controle
- Um dos seguintes acontecerá:
- Inacessível: Incapaz de focar no controle.
- Inacessível: Focado, mas não anunciado com o TalkBack.
- Acessível: Focado e anunciado no TalkBack.
Como corrigir
XML
Utilize a propriedade de texto de um controle ou a descrição de conteúdo de uma vista para garantir que o TalkBack tenha informações precisas para compartilhar.
Button button = .......
button.setText("Button's Name");
ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");Compose
Combine botões de imagem com uma descrição de conteúdo ou texto para indicar seu propósito.
@Composable
fun EmailIconButton() {
IconButton(
onClick = { … },
) {
Icon(
painter = painterResource(id = R.drawable.email_icon),
contentDescription = “Send an Email”
)
}
}Botões que não sejam de imagem devem fornecer texto para o TalkBack.
@Composable
fun EmailButton() {
Button(
modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
onClick = { … },
) {
Text(
text = “Email”
)
}
}React Native
Para corrigir um problema encontrado por esta regra, adicione um accessibilityLabel ao componente de controle.
<TextInput
...
accessibilityLabel="First Name"
/>Quando elementos estão agrupados juntos dentro de uma vista contenedora, adicione a accessible prop, e a accessibilityLabel prop à vista contenedora:
<View
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel={"Dark Mode"}
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}
>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
ios_backgroundColor={'lightgray'}
thumbColor={'white'}
onValueChange={ () => {
setIsEnabled(!isEnabled)
}}
value={isEnabled}
accessibilityElementsHidden={true}
/>
</View>