Um olhar sobre os padrões da ARIA na Web e acessibilidade aos aplicativos HTML
Uma Web verdadeiramente aberta e inclusiva precisa de tecnologias que permitam aos usuários com deficiência contar com tecnologias assistivas para aproveitar o conteúdo dinâmico da Web e aplicativos modernos da Web. Os padrões da web de acessibilidade da W3C têm como objetivo preencher a web com ARIA (Accessible Rich Internet Applications), que usuários com deficiências podem usar com eficiência.
O ARIA é um dos inúmeros padrões e diretrizes de acessibilidade publicados pela Web Accessibility Intitiative (WAI). Ele fornece uma marcação adicional que pode ser facilmente inserida em documentos HTML. O WAI-ARIA é uma solução interplataforma de vários dispositivos que tem como alvo a Open Web Platform, portanto, não pense apenas em websites, mas também em jogos, entretenimento digital, saúde, dispositivos móveis e outros tipos de aplicativos..
Neste post vamos dar uma olhada em como você pode adicionar acessibilidade aos seus documentos HTML com a ajuda dos padrões WAI-ARIA.
O ARIA Framework
A sintaxe do HTML nem sempre permite que os desenvolvedores descrevam elementos adequadamente, identifiquem suas funções e especifiquem os relacionamentos entre eles. Embora isso raramente seja um problema para os visitantes que estão em plena posse de seus sentidos, isso pode impedir que os usuários de tecnologia assistencial entendam o que está acontecendo na tela e explorem suas opções..
Este é o ponto onde ARIA vem em nossa ajuda, pois permite definir o propósito de diferentes elementos com a ajuda de papéis de referência, e descrever sua natureza com atributos prefixados por aria. Os atributos prefixados por ária possuem dois tipos: propriedades que descrevem recursos que são menos propensos a mudar ao longo do ciclo de vida da página, e estados que fornecem informações sobre coisas que podem mudar com frequência devido à interação do usuário.
Papéis de Marco
Papéis de referência são as formas mais conhecidas do Modelo de Funções do ARIA (outras são as Funções Abstratas, as Funções de Widget e os Papéis da Estrutura do Documento). As funções de referência permitem que os desenvolvedores identifiquem regiões perceptíveis na página da web que os usuários de tecnologia assistencial podem querer acessar rapidamente.
Existem 8 tipos de funções de marco ARIA, e eles precisam ser adicionados como atributos para as tags HTML relacionadas.
role =”bandeira”
A função de banner destina-se a ser usada principalmente para conteúdo relacionado a todo o site, não apenas a páginas individuais. Geralmente é adicionado como um atributo ao cabeçalho principal do site para o logotipo e outras informações importantes em todo o site. É importante que você possa usar a função de banner apenas uma vez em qualquer documento ou aplicativo HTML.
role =”a Principal”
O principal papel de referência está relacionado ao conteúdo principal do documento. Não pode ser usado mais de uma vez em qualquer página HTML. Geralmente segue o A função de navegação deve ser usada para indicar uma área que contém elementos de navegação, como links e listas em um site. O papel de referência complementar descreve conteúdo adicional relacionado ao conteúdo principal do site. Ele precisa ser colocado no nível semelhante na hierarquia DOM A função contentinfo informa aos agentes do usuário sobre a presença de uma região onde diferentes tipos de metadados, como informações sobre direitos autorais, declarações legais e de privacidade, podem ser encontrados. É normalmente usado para o rodapé de um site. A função de referência do formulário indica um formulário aguardando a entrada do usuário. Para formulários de pesquisa, você deve usar A função de pesquisa é bastante auto-explicativa, destina-se a ajudar tecnologias assistivas a identificar a funcionalidade de pesquisa de um site. Você pode usar a função de ponto de referência do aplicativo para uma região que deseja declarar como um aplicativo da Web, em vez de um documento da Web. Não é recomendável incluí-lo em sites tradicionais, pois sugere tecnologias assistivas para alternar do modo de navegação normal para o modo de navegação de aplicativos. Você só deve usar este papel de referência com muito cuidado. Enquanto as funções permitem definir o significado das tags HTML, os estados e as propriedades fornecem ao usuário informações adicionais sobre como interagir com eles. Ambos os estados e propriedades são marcados com atributos prefixados por aria com a sintaxe ária-*. Os atributos ARIA mais conhecidos são provavelmente a propriedade exigida pela aria e o estado verificado pela aria. Aria-required é um propriedade porque é um recurso permanente de um elemento de entrada (ou seja, o usuário deve preenchê-lo), enquanto a verificação da aria é um Estado porque uma caixa de seleção pode freqüentemente alterar seu valor devido à interação do usuário. Estados e propriedades às vezes usam valores de token (um conjunto limitado de valores predefinidos), por exemplo, a propriedade aria-live pode ter 3 valores diferentes: fora, educado, assertivo. A sintaxe neste exemplo é assim: Em outros casos, os valores dos atributos prefixados por aria são representados por cordas, números, inteiros, Referências de ID ou verdadeiro falso valores. Use atributos de relacionamento para indicar relacionamentos entre elementos diferentes em seu site, que não podem ser determinados de outra forma a partir da estrutura do documento. Por exemplo, o Depois de definir uma função de ponto de referência ARIA para uma área perceptível em sua página HTML, ela pode ajudar muito as tecnologias de assistência se você alterar os estados e as propriedades dos elementos-filhos ARIA-prefixados de acordo com os eventos que ocorrem na tela. Isso pode ser crucial quando os usuários precisam interagir com o site, por exemplo, preenchendo um formulário ou executando uma consulta de pesquisa.. A regra geral do design de acessibilidade é que o estado atual da interface do usuário sempre precisa ser percebido pelas tecnologias assistivas. Por exemplo, se o usuário escolhe uma opção em um formulário, ela também precisa aparecer selecionada para tecnologias assistivas. Isso pode ser facilmente alcançado utilizando o estado selecionado por aria com a seguinte sintaxe: A diretriz de práticas de criação WAI-ARIA do W3C pode fornecer muitas outras ótimas ideias sobre como harmonizar adequadamente as interfaces visuais e acessíveis de seu site. O uso de funções e atributos do ARIA às vezes pode ser redundante. Quando você usa tags semânticas de HTML5, como Por exemplo, é desnecessário usar o Formato papel de referência para definir o Então, se você já adicionou o escondido Atributo HTML para uma entrada de formulário, não é necessário adicionar aria escondido estado, como o navegador inclui por padrão.. Este último foi adicionado às especificações do W3C com o objetivo de mapear a Principal Função de marco ARIA para um elemento HTML semântico. role =”navegação”
role =”complementar”
role = "main". Posts relacionados, artigos populares, os últimos comentários são exemplos típicos de conteúdo complementar autônomo.role =”contentinfo”
role =”Formato”
role = "search" em vez de.role =”procurar”
role =”aplicação”
Estados e Propriedades
A sintaxe de atributos prefixados por Aria
Como fazer uso dos estados ARIA e propriedades
1. Construa relacionamentos entre elementos com atributos de relacionamento
aria-labelledby property identifica o elemento que rotula o elemento atual.aria-labelledby - entre muitas outras coisas - pode vincular cabeçalhos às regiões de referência da ARIA da seguinte maneira:Este é um título
Conteúdo principal… 2. Sincronizar estados e propriedades com o ciclo de vida do elemento
3. Combine o Visual e as Interfaces Acessíveis
.Não use excessivamente ARIA
ou , Navegadores da Web modernos adicionam a semântica ARIA apropriada por padrão. Neste caso, não faz sentido definir separadamente as funções de marco ARIA. elemento. Ao invés de sintaxe é perfeitamente o suficiente para usar apenas . Também é supérfluo usar os atributos nativos do HTML junto com o atributo ARIA apropriado.
