Tem Papel de Acessibilidade Válido

ID da Regra: tem-papel-de-acessibilidade-válido

WCAG 2.0 (A) 4.1.2

accessibilityRole comunica o propósito de um componente para o usuário de tecnologia assistiva.

accessibilityRole pode ser um dos seguintes:

• adjustable Usado quando um elemento pode ser "ajustado" (por exemplo, um controle deslizante).
• alert Usado quando um elemento contém texto importante a ser apresentado ao usuário.
• button Usado quando o elemento deve ser tratado como um botão.
• checkbox Usado quando um elemento representa uma caixa de seleção que pode ser marcada, desmarcada ou ter um estado misto.
• combobox Usado quando um elemento representa uma caixa de combinação, que permite ao usuário selecionar entre várias opções.
• header Usado quando um elemento atua como cabeçalho para uma seção de conteúdo (por exemplo, o título de uma barra de navegação).
• image Usado quando o elemento deve ser tratado como uma imagem. Pode ser combinado com um botão ou link.
• imagebutton Usado quando o elemento deve ser tratado como um botão e também é uma imagem.
• keyboardkey Usado quando o elemento atua como uma tecla de teclado.
• link Usado quando o elemento deve ser tratado como um link.
• menu Usado quando o componente é um menu de escolhas.
• menubar Usado quando um componente é um contêiner de vários menus.
• menuitem Usado para representar um item dentro de um menu.
• none Usado quando o elemento não possui papel.
• progressbar Usado para representar um componente que indica o progresso de uma tarefa.
• radio Usado para representar um botão de rádio.
• radiogroup Usado para representar um grupo de botões de rádio.
• scrollbar Usado para representar uma barra de rolagem.
• search Usado quando um campo de texto também deve ser tratado como campo de busca.
• spinbutton Usado para representar um botão que abre uma lista de escolhas.
• summary Usado quando um elemento pode ser utilizado para fornecer um resumo rápido das condições atuais no aplicativo quando ele é iniciado pela primeira vez.
• switch Usado para representar um interruptor que pode ser ligado e desligado.
• tab Usado para representar uma aba.
• tablist Usado para representar uma lista de abas.
• text Usado quando o elemento deve ser tratado como texto estático que não pode ser alterado.
• timer Usado para representar um temporizador.
• togglebutton Usado para representar um botão de alternância. Deve ser usado com accessibilityState para indicar se o botão está ativado ou desativado.
• toolbar Usado para representar uma barra de ferramentas (um contêiner de botões de ação ou componentes).
• grid Usado com ScrollView, VirtualizedList, FlatList, ou SectionList para representar uma grade. Adiciona os anúncios de entrada/saída de grade ao GridView do Android.

Por que Isso Importa

Elementos designados com valores de papel inválidos não são interpretados pela tecnologia assistiva conforme pretendido pelo desenvolvedor.

Quando leitores de tela e outras tecnologias assistivas não sabem o papel de cada elemento, eles não conseguem interagir com ele de forma inteligente, nem conseguem comunicar o papel ao usuário. As características de um elemento, suas propriedades e métodos de transmissão de informações para e/ou do usuário não podem ser comunicados via tecnologias assistivas quando um valor de papel é inválido.

Como Corrigir o Problema

Certifique-se de que o valor de accessibilityRole seja um papel válido.

Exemplos de Sucesso

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Exemplos de Falha

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Recursos

• React Native accessibilityRole