Acessibilidade: adicionar atributos ARIA a aplicativos web personalizados

5 min de leitura
Os atributos ARIA fornecem informações adicionais sobre a semântica de elementos para tecnologias assistivas, como leitores de tela. Você pode adicionar atributos ARIA a qualquer elementos personalizados ou aplicativos em seu site.
Os atributos ARIA são importantes, pois definem maneiras pelas quais elementos e aplicativos personalizados podem se tornar acessíveis quando não é possível fazê-lo com o HTML nativo do elemento.
Importante:
Esse recurso é destinado a usuários que possuem aplicativos/elementos personalizados que requerem atributos ARIA. Se você não os possui em seu site, não precisa editar os atributos ARIA.

Adicionar atributos ARIA

Já codificamos os atributos ARIA para a maioria dos elementos em um site. No entanto, se você criou aplicativos personalizados, convém adicionar seus próprios atributos ARIA para fins de acessibilidade.
Editor do Wix Studio
Editor Wix
Editor X
Ative o modo de desenvolvedor (Velo by Wix) no Editor do Wix Studio para adicionar atributos aos elementos. O Velo permite que você adicione código, crie bancos de dados e muito mais.
  1. Selecione Código   no lado esquerdo do Editor.
  2. Selecione o aplicativo ou elemento relevante e clique no ícone Mais ações .
  3. Selecione Acessibilidade.
  4. Clique em Adicionar atributo.
  5. Selecione um atributo no menu dropdown.
  6. Insira uma etiqueta/selecione o nível ou valor.
  7. Selecione Adicionar.
O painel de acessibilidade de um elemento no Editor do Wix Studio. O cursor está clicando no botão Adicionar atributo.

Você pode adicionar atributos ARIA aos seguintes elementos:

Elemento
Propriedades
Janelas
Etiqueta
Texto
label, role [heading, status, alert], live, relevant, atomic, hidden, current, level
Caixa Contêiner
label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden
Faixa
label, tabindex, role [heading, status, alert], live, atomic, hidden, current
Repetidor
label, role [heading, status, alert]
Botão de Texto
tabindex, pressed, expanded, haspopup
Estamos trabalhando continuamente para adicionar atributos ARIA a mais elementos. Entre em contato se você tiver alguma solicitação específica sobre atributos ARIA.

Editar seus atributos ARIA

Após adicionar atributos a aplicativos personalizados, você pode editá-los e atualizá-los sempre que quiser com o ícone Acessibilidade . Esse ícone é adicionado automaticamente aos elementos aos quais você conectou atributos.

Para editar o atributo:

  1. Selecione o elemento/aplicativo no seu construtor de site.
  2. Selecione o ícone Acessibilidade .
  3. Passe o mouse sobre o atributo relevante e selecione o ícone Mais ações .
  4. Selecione Editar.
  5. Faça as alterações relevantes e selecione Salvar.

Tipos de atributos ARIA

Nome do Atributo
Categoria
Tokens
tabindex

0, -1
Função

token: de acordo com a definição no primitivo
aria-level

int
aria-live
Online
token: polite, assertive
aria-multiline 
Descrição
true, false
aria-multiselectable
Descrição
true, false
aria-pressed
Estado
true, false
aria-relevant
Online
token: all, additions, removals, text
aria-activedescendant
relacionamentos
ID_REF
aria-atomic
Online
true, false
aria-autocomplete
Descrição
true, false
aria-controls
relacionamentos
ID_REF
aria-current
Estado
step, page, true, false
aria-describedby
relacionamentos
ID_REF (itens separados por espaço)
aria-expanded

true, false
aria-haspopup
relacionamentos
dialog, menu, true, false
aria-hidden

true, false
aria-invalid
Estado
true, false
aria-label

string
aria-labelledby 
relacionamentos
ID_REF (itens separados por espaço)

Esse artigo foi útil?

|