Implementar suporte a leitores de tela

  • 16 minutos

Existem três abordagens gerais para implementar a acessibilidade.

  • Controles semânticos (intrínsecos)
  • Controlos personalizados
  • Controlos alternativos

Vamos desenvolver cada uma dessas abordagens.

Controles semânticos (intrínsecos)

Primeiro, use controles semânticos e deixe a base lidar com a maior parte do trabalho para você. Os controles intrínsecos são elementos HTML internos, como botões, links e campos de formulário que vêm com recursos de acessibilidade inerentes. Por exemplo, usar uma <tag button> em vez de uma div> estilizada< garante que o botão seja acessível por padrão, com o nome vindo do conteúdo da tag e a função sendo "button". Aqui estão algumas considerações para controles intrínsecos comuns:

Texto estático (<extensão>)

Certifique-se de que o texto estático é significativo e fornece contexto. Neste exemplo de texto estático em HTML, o nome é o conteúdo da tag e a função é texto.

<span>Office privacy settings give you control over your experience and data.</span>

Name   Office privacy settings give you control over your experience and data.
Role     text

Imagem (<img>)

Para uma imagem, use a <tag img> . No exemplo, o nome vem do atributo alt e a função é image. Use o atributo alt para fornecer uma alternativa de texto para imagens.

<img src="SmartArt2.png" alt="Alternating Hexagons">

Name   Alternating Hexagons
Role     image

Botão (<botão>)

Para um botão, use a <tag button> ou input type=button. Isso é muito melhor do que usar uma divisão e adicionar manipuladores de estilo e eventos para torná-la parecida e agir como um botão. Use um botão para marcá-lo e estilizá-lo da maneira que você deseja usar CSS. Certifique-se de que os botões têm texto descritivo para transmitir o seu propósito. No exemplo, o nome vem do conteúdo da tag e a função é button.

<button>End Session</button> 

Name   End Session
Role     button

Para criar um link, use a <tag a> em vez de uma <extensão> com manipuladores de estilo e eventos. No exemplo, o nome do link vem do conteúdo dentro da tag e sua função é link. Os links também têm um valor, que é a URL especificada no atributo href . Use o texto descritivo do link para indicar o destino do link. Geralmente, não é aconselhável usar o URL como nome do link ou texto de exibição porque os URLs podem ser longos e podem não indicar claramente a finalidade do link. Evite usar links vazios; Se um link não tiver conteúdo, é melhor usar um botão.

<a href=”https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25”>Learn more about accessibility in PowerPoint</a>

Name   Learn more about accessibility in PowerPoint
Role     Link
Value   https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25

No Narrador do Windows, algumas informações adicionais sobre um elemento não são lidas mesmo no nível mais alto de verbosidade. Isso inclui a URL de um hiperlink, que faz parte dessas informações adicionais. Por predefinição, esta definição está desativada, pelo que o URL não é lido. No entanto, depois de ativar a configuração, o URL será lido. Essa configuração também controla a leitura de descrições e texto de ajuda.

Caixa de seleção (<input type="checkbox">)

Para caixas de seleção, use <input type="checkbox"> e use uma tag label para o rótulo. No exemplo, o nome vem do conteúdo da tag label e a função vem do atributo type. Cada tipo de entrada tem sua própria função, como rádio, texto, etc. A caixa de seleção também tem um valor. Vem do atributo checked.

<label for=”checkboxId”>Always Use Subtitles</label>
<input type=”checkbox” id=”checkboxId” checked>


Name   Always Use Subtitles
Role     checkbox
Value   ToggleState_On

Controlos personalizados

Se os controles semânticos/intrínsecos não atenderem às suas necessidades, talvez seja necessário implementar controles personalizados. Muitos desenvolvedores da Web aprenderam que podem adicionar manipuladores de estilo e eventos a um <div> para torná-lo visual e agir da maneira que quiserem, criando controles personalizados dessa maneira. No entanto, é necessário trabalho adicional para tornar esses controles personalizados acessíveis. Eles devem ser operáveis com o teclado e o mouse, e as informações semânticas devem ser expostas para representá-los adequadamente na árvore de acessibilidade.

Os usuários do leitor de tela usam o tipo de controle para determinar como interagir com um controle específico. Os controles personalizados só devem ser usados como último recurso e, se o tipo de controle não for compatível com os controles conhecidos existentes, o texto de ajuda ou outras informações devem ser fornecidas para orientar os usuários do teclado sobre como interagir com o controle.

Em 2014, o W3C publicou o padrão Accessible Rich Internet Applications (ARIA), que permite aos desenvolvedores da Web fornecer a semântica necessária para controles personalizados acessíveis. Por exemplo, se você tiver um gráfico SVG que deseja servir como um botão de alternância, poderá adicionar um atributo aria-label para especificar um nome e role="button" para definir sua função na árvore de acessibilidade. Além disso, você pode usar o atributo aria-pressed para especificar o estado de alternância. 

<svg role=”button” aria-label=”Bullets” aria-pressed=”true”
	tabindex=”0” xmlns=”http://www.w3.org/2000/svg” width=”32”
	height=”32” viewBox=”0,0,2048,2048”>
		<!-- paths -->
	</svg>

Name    Bullets
Role      button
Value    ToggleState_On

Recursos

Controlos alternativos

Em casos raros, pode ser necessário criar uma representação alternativa, mas isso deve ser um último recurso. Isso envolve a criação de elementos separados para o que é renderizado na página versus o que é exposto na árvore de acessibilidade para leitores de tela. Por exemplo, você pode usar** aria-hidden="true"** para ocultar um elemento da árvore de acessibilidade enquanto ainda o exibe na página.

<!- - visible on page, but not to screen reader  - - >
<div aria-hidden=”true”>
</div>

<!- - visible to screen reader, but not on page  - - >
,div class=”srOnly” role=”menu” aria-label=”More options”>
</div>

Sempre se esforce para criar uma experiência harmoniosa entre o conteúdo renderizado e a experiência do leitor de tela, pois alguns usuários do leitor de tela têm alguma visão e a usam junto com o leitor de tela, ou procuram ajuda de colegas com visão ocasionalmente.

Para tornar um elemento não visível na página, mas ainda incluído na árvore de acessibilidade, você pode usar técnicas CSS, como posicionar o elemento fora da tela ou recortá-lo. No entanto, usar display: none ou visibility: hidden não funcionará, pois os navegadores excluem esses elementos da árvore de acessibilidade. É importante especificar corretamente o nome, a função e o valor dos elementos para garantir que eles sejam acessíveis.

Nome

O nome pode ser definido usando atributos como aria-labelledby, aria-label, o conteúdo de uma <tag label> ou o atributo alt se for um <img> ou input type="image". Você também pode usar o conteúdo da tag, o atributo title , o atributo aria-describedby ou o atributo aria-description . As três últimas são opções de fallback se nenhuma das outras for especificada. Isso dá a ordem de prioridade para calcular o nome.

  • Um bom nome para um elemento deve, idealmente, usar o rótulo visível. Por exemplo, um controle de rotação para definir a altura de uma linha em uma tabela deve usar "altura da linha da tabela" em vez de apenas "altura" para fornecer mais contexto.
  • Inclua sempre a etiqueta visível no nome para garantir a consistência entre o ecrã e o leitor de ecrã.
  • Evite incluir o tipo de controle (como "controle de rotação") no nome, pois isso é expresso na função.
  • Mantenha os nomes curtos para manter a eficiência para os usuários do leitor de tela e expor o intervalo de valores permitidos em outras propriedades.
  • Para imagens, evite usar detalhes irrelevantes no texto alternativo. Em vez disso, forneça descrições contextualmente relevantes, como "Pessoa que se apresenta em um pódio com legendas na tela".
  • Se uma imagem não for importante para a compreensão do conteúdo, use alt="" para excluí-la da árvore de acessibilidade, mas nunca omita totalmente o atributo alt.

Funções

A função de um elemento é determinada pelo atributo role se especificado. Ele é determinado pelo atributo type se ele não for especificado e você estiver usando uma <tag de entrada> . Para outros tipos de tags (<img>, <a>, <button>, etc.), é determinado pelo tipo de tag.

Valor

O valor refere-se a propriedades como aria-checked, aria-pressed, aria-expanded, aria-selected, e aria-disabled, dependendo do tipo de controle. Para <tags de entrada> , o atributo checked ou disabled é usado, e para links que usam <uma> tag, o atributo href é usado.

A definição correta dessas propriedades garante que as tecnologias assistivas possam interpretar e interagir com precisão com os elementos.

Recurso

CSS em ação: conteúdo invisível apenas para usuários de leitores de tela

Especificando o idioma

Para garantir que nossos aplicativos sejam acessíveis a usuários em todo o mundo, nós os localizamos em vários idiomas. Isso inclui a localização de todos os nomes expostos ao leitor de tela, que devem ser buscados a partir de recursos localizados. Os leitores de tela podem ler texto em vários idiomas, mas o aplicativo deve especificar o idioma de cada elemento usando o atributo lang . Defina o idioma para toda a página usando o atributo lang da tag HTML. Em seguida, especifique o idioma para elementos individuais em que o idioma difere do pai. Isso garante que os leitores de tela pronunciem o texto corretamente. Como o lang é herdado do pai, você só precisa fazer isso em tags onde você está usando um idioma diferente do pai. Portanto, se toda a experiência do usuário estiver no mesmo idioma, você só precisará especificá-lo uma vez na tag HTML.

<p lang="en-us">This is English text</p>
<p lang="fr-fr">C'est Français texte</p>
<p lang="zh-cn">&#36825;&#26159;&#20013;&#25991;&#30430;</p>

Specify the lang attribute on the <html> tag
Specify the lang attribute on any tag that uses a different language than its parent
Narrator reads the text in each language properly
If lang attribute is specified
And Text-to-Speech is installed for that language

Duas (2) coisas precisam estar em vigor para que o Narrador leia o texto no idioma adequado: o atributo lang e o usuário deve instalar text-to-speech para esses idiomas. Normalmente, eles teriam feito isso para os idiomas com os quais trabalham, mas quando você testar esses cenários, certifique-se de instalar o text-to-speech para esses idiomas primeiro. Especificar corretamente o idioma ajuda os leitores de tela a fornecer uma navegação precisa e eficiente para os usuários.