Crie interfaces de usuário com marcação semântica

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Explicar por que a marcação semântica é necessária para tornar o conteúdo acessível.
• Definir os três tipos de atributos em ARIA.

Introdução

Muitos fatores entram na criação de interfaces de usuário acessíveis e, de modo geral, quanto mais complexa a interface, mais fatores devem ser considerados. Por exemplo, uma publicação de blog simples ou um artigo de notícias apresenta menos considerações de acessibilidade do que um artigo de notícias com comentários, recursos de mídias sociais ou outros recursos interativos. Um aplicativo da web complexo, como um criador de relatório ou painel, um editor de layout de página ou até mesmo um modo de exibição de lista no estilo Kanban, apresenta necessidades ainda maiores em termos de acessibilidade.

Quanto mais complexa for a página ou aplicativo da web, mais precisará ser feito para garantir que seja acessível aos usuários com deficiência. Dito isso, para que qualquer página da web ou aplicativo seja acessível, você precisa começar com o básico. 

Vamos falar de marcação semântica

A marcação semântica está na base de toda a acessibilidade. O conteúdo que aparece em uma página da web deve ser apresentado utilizando a marcação que representa o tipo de conteúdo que está sendo apresentado. Por exemplo, os dados tabulares devem ser apresentados utilizando a marcação baseada em <table>, as listas devem ser apresentadas utilizando a marcação baseada em <ul>, os cabeçalhos visuais devem usar marcas de cabeçalho e assim por diante.

A marcação semântica torna o conteúdo legível e compreensível por máquinas e softwares — especificamente, tecnologias assistenciais —, o que é necessário para que o conteúdo seja acessível. Um usuário cego pode utilizar um leitor de tela para navegar por um criador de relatórios criado com elementos de HTML <table> devidamente formados. No entanto, esse mesmo usuário não pode navegar corretamente ou entender o mesmo item marcado usando elementos <div>, mesmo que possam ser parecidos com os usuários avistados.

A estrutura HTML de páginas da web e aplicativos confere ao seu conteúdo significado para tecnologias assistenciais e usuários que dependem de tecnologias assistenciais. Recomendamos que você use elementos semânticos do HTML5 sempre que possível e que valide sua marcação utilizando um verificador, como o Verificador de Nu HTML.

Introdução ao ARIA

ARIA, que significa Accessible Rich Internet Applications, é uma extensão de HTML que reconhece que as páginas da web são usadas para muito mais do que para fins de marcação ou exibição. ARIA entende que a web é uma plataforma para criar aplicativos complexos e oferece opções para comunicar interações muito mais avançadas aos usuários com deficiência, por meio de tecnologias assistenciais.

ARIA funciona pela aplicação de atributos especiais a Nodes de DOM HTML. Existem três tipos de atributos disponíveis em ARIA: papéis, estados e propriedades.

Papéis

Os papéis são uma maneira de atribuir significado semântico a elementos HTML que tradicionalmente não apresentam significado semântico, como <div> ou <span>. Por exemplo, você pode usar papéis ARIA para identificar um conjunto de elementos não semânticos como um botão ou um link, ou até componentes mais complexos, como menus, ComboBoxes, modais ou grades interativas. 

Os papéis consistem em uma promessa aos usuários. Se você adicionar um papel ARIA a um elemento, como adicionar role = "button" a uma <>div, você está dizendo à <div> para se identificar como um botão. Essa <div> agora aparece na árvore de acessibilidade do navegador como um <botão>. A árvore de acessibilidade do navegador consiste em um instantâneo das informações que são apresentadas ao leitor de tela. Isso significa que você também deve fornecer toda a funcionalidade que um botão tem para essa <div>. Isso inclui estados de foco, interatividade de teclado, interatividade de mouse e assim por diante. Chamar uma <div> de botão, mas não fazê-la funcionar como um botão, consiste em romper a promessa aos usuários.

Estados

Os estados são atributos que descrevem o status de um componente ARIA na árvore de acessibilidade de um navegador. Um estado descreve se um menu suspenso é expandido, se seu tipo de entrada está desativado ou é exibido no modo somente leitura, se uma caixa de seleção estiver marcada, se um item em uma ListBox estiver selecionado e assim por diante. Ao criar componentes complexos com o ARIA, é essencial atualizar seus vários estados com precisão por meio de uma operação de controle. Isso tudo faz parte do cumprimento da promessa feita aos usuários ao usar um atributo de função. 

Propriedades

O W3C define as propriedades do ARIA como “atributos que são essenciais à natureza de determinado objeto ou que representam um valor de dados associado ao objeto”. Esses são atributos que descrevem a natureza de um objeto. Considere a diferença entre um elemento <>select com o atributo multiple e um elemento <>select sem o atributo multiple. O primeiro é uma ComboBox em que se pode fazer várias seleções, enquanto a última é aquela em que um usuário precisa clicar no estado em colapso para abrir a caixa e selecionar um único item. Neste caso, multiple é uma propriedade de nosso elemento <select> nativo. 

Da mesma forma, ARIA possui muitos atributos de propriedade que são usados para descrever objetos, mas não necessariamente mudam regularmente para atualizar o estado de um objeto.

Saber quais, quando e como usar os atributos ARIA pode ser muito complicado. Em geral, recomendamos que siga nossos Planos do componente no Salesforce Lightning Design System (SLDs). O SLDS contém mais de 900 modelos de HTML, com diretrizes de acessibilidade detalhadas para marcação, atributos e interações de teclado. Esses projetos incluem todos os papéis, propriedades e estados corretos do ARIA, nos lugares corretos. Além disso, nossos planos incluem informações de acessibilidade, detalhando como associar e gerenciar os estados e as propriedades dos componentes que você está criando. 

Os planos do componente ARIA no SLDS foram testados com tecnologia de assistência e se baseiam nas Diretrizes de práticas de criação de ARIA. Esse documento é atualizado regularmente e é a fonte confiável atual para ARIA e muitos padrões de design comuns. 

Você pode não encontrar todos os padrões de interação necessários nos planos do componente do SLDS. Para qualquer item que não encontrar em nosso sistema de design, consulte as Diretrizes de práticas de criação de ARIA e a própria Especificação Aria. Não confie em mais nada na Internet: há inúmeras ideias, explorações e componentes inadequados e inacessíveis que se disfarçam de soluções modernas e acessíveis.

Agora que você já conhece as noções básicas da criação de interfaces de usuário acessíveis, vamos explorar a navegação de acessibilidade. 

Recursos

• Documentação: Diretrizes de práticas de criação de ARIA
• Documentação: Accessible Rich Internet Applications (WAI-ARIA) 
• Ferramenta: Verificador de Nu HTML
• Ajuda do Salesforce: Salesforce Lightning Design System