Rótulos e relações ARIA

Usar rótulos ARIA para criar descrições de elementos acessíveis

Alice Boxhall

Dave Gash

Meggin Kearney

Rótulos

ARIA fornece vários mecanismos para adicionar rótulos e descrições aos elementos. Na verdade, ARIA é a única maneira de adicionar texto acessível de descrição ou ajuda. Vejamos as propriedades que ARIA usa para criar rótulos acessíveis.

aria-label

aria-label permite especificar uma string a ser usada como o rótulo acessível. Isso substitui qualquer outro mecanismo de rotulagem nativo, como um elemento label. Por exemplo, se um button tiver conteúdo de texto e um aria-label, somente o valor aria-label será usado.

Você pode usar um atributo aria-label quando tem algum tipo de indicação visual da finalidade de um elemento, como um botão que usa um gráfico em vez de texto, mas ainda precisa esclarecer essa finalidade para qualquer pessoa que não possa acessar a indicação visual, como um botão que usa apenas uma imagem para indicar a finalidade.

aria-labelledby

aria-labelledby permite especificar o ID de outro elemento no DOM como o rótulo de um elemento.

Isso é muito parecido com usar um elemento label, com algumas diferenças importantes.

1. aria-labelledby pode ser usado em qualquer elemento, não apenas em elementos rotuláveis.
2. Enquanto um elemento label se refere ao que ele rotula, a relação é revertida no caso de aria-labelledby: o que está sendo rotulado se refere ao que ele rotula.
3. Somente um elemento de rótulo pode ser associado a um elemento rotulável, mas aria-labelledby pode usar uma lista de IDREFs para compor um rótulo usando vários elementos. O rótulo será concatenado na ordem em que os IDREFS são fornecidos.
4. Você pode usar aria-labelledby para se referir a elementos que estão ocultos e que não estariam na árvore de acessibilidade. Por exemplo, você pode adicionar um span oculto ao lado de um elemento que você quer rotular e fazer referência a ele com aria-labelledby.
5. No entanto, como ARIA só afeta a árvore de acessibilidade, aria-labelledby não oferece o comportamento conhecido de clique no rótulo obtido ao usar um elemento label.

É importante ressaltar que aria-labelledby substitui todas as outras origens de nome de um elemento. Por exemplo, se um elemento tiver um aria-labelledby e um aria-label, ou um aria-labelledby e um label HTML nativo, o rótulo aria-labelledby sempre terá precedência.

Relacionamentos

aria-labelledby é um exemplo de um atributo de relacionamento. Um atributo de relacionamento cria uma relação semântica entre elementos na página, independentemente da relação do DOM. No caso de aria-labelledby, essa relação é "esse elemento é rotulado por esse elemento".

A especificação ARIA lista oito atributos de relação (link em inglês). Seis deles, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby e aria-owns, fazem referência a um ou mais elementos para criar um novo link entre os elementos na página. A diferença em cada caso é o que esse link significa e como ele é apresentado aos usuários.

proprietários de aria

aria-owns é uma das relações ARIA mais utilizadas. Esse atributo permite informar à tecnologia adaptativa que um elemento separado no DOM precisa ser tratado como um filho do elemento atual ou reorganizar os elementos filhos existentes em uma ordem diferente. Por exemplo, se um submenu pop-up estiver posicionado visualmente perto do menu pai, mas não puder ser um filho do DOM do pai porque afetaria a apresentação visual, você poderá usar aria-owns para apresentar o submenu como filho do menu pai a um leitor de tela.

aria-activedescendente

aria-activedescendant desempenha um papel relacionado. Assim como o elemento ativo de uma página é o que está em foco, definir o descendente ativo de um elemento permite informar à tecnologia adaptativa que um elemento precisa ser apresentado ao usuário como o foco quando o pai realmente está em foco. Por exemplo, em uma caixa de listagem, convém manter o foco da página no contêiner da caixa de listagem, mas manter o atributo aria-activedescendant atualizado para o item da lista selecionado no momento. Isso faz com que o item selecionado apareça para a tecnologia assistiva como se fosse o item em foco.

aria-describeby

aria-describedby fornece uma descrição acessível da mesma forma que aria-labelledby fornece um rótulo. Assim como aria-labelledby, a aria-describedby pode referenciar elementos que não estão visíveis de outra forma, estejam ocultos do DOM ou ocultos para usuários de tecnologia adaptativa. Essa é uma técnica útil quando há algum texto explicativo extra que um usuário pode precisar, seja para aplicar apenas a usuários de tecnologia adaptativa ou a todos os usuários.

Um exemplo comum é um campo de entrada de senha acompanhado por um texto descritivo que explica os requisitos mínimos de senha. Ao contrário de um rótulo, essa descrição pode ou não ser apresentada ao usuário. Ele pode ter a escolha de acessá-la, ou ela pode vir depois de todas as outras informações ou pode ser antecipada por outra coisa. Por exemplo, se o usuário estiver inserindo informações, a entrada dele será ecoada e poderá interromper a descrição do elemento. Assim, uma descrição é uma ótima maneira de comunicar informações complementares, mas não essenciais. Ela não atrapalha informações mais críticas, como o papel do elemento.

aria-posinset e aria-setsize

Os atributos de relação restantes são um pouco diferentes e funcionam juntos. aria-posinset ("posição no conjunto") e aria-setsize ("tamanho do conjunto") servem para definir uma relação entre elementos irmãos em um conjunto, como uma lista.

Quando o tamanho de um conjunto não pode ser determinado pelos elementos presentes no DOM, como quando a renderização lenta é usada para evitar uma lista grande no DOM de uma só vez, a aria-setsize pode especificar o tamanho real do conjunto, e a aria-posinset pode especificar a posição do elemento no conjunto. Por exemplo, em um conjunto que pode conter 1.000 elementos, você pode dizer que um determinado elemento tem um aria-posinset de 857, mesmo que ele apareça primeiro no DOM, e depois usar técnicas de HTML dinâmico para garantir que o usuário possa explorar a lista completa sob demanda.