Este é o terceiro post de uma pequena série que estamos fazendo sobre acessibilidade de formulários. Se você perdeu o segundo post, confira Gerenciando o foco do usuário com :focus-visible. Neste post veremos como usar um leitor de tela ao navegar em um formulário e também algumas práticas recomendadas.
O que é um leitor de tela?
Você pode ter ouvido o termo “leitor de tela” enquanto navegava pela web. Você pode até estar usando um leitor de tela neste momento para executar testes manuais de acessibilidade nas experiências que está construindo. Um leitor de tela é um tipo de AT ou tecnologia assistiva.
Um leitor de tela converte texto digital em fala sintetizada ou saída Braille, comumente vista em um leitor Braille.
Neste exemplo, usarei Mac VO. Mac VO (VoiceOver) está integrado em todos os dispositivos Mac; Sistemas iOS, iPadOS e macOS. Dependendo do tipo de dispositivo em que você está executando o macOS, a abertura do VO pode ser diferente. O Macbook Pro que está executando o VO em que estou escrevendo não tem barra de toque, então usarei as teclas de atalho de acordo com o hardware.
Ativando VO no macOS
Se você estiver usando um Macbook Pro atualizado, o teclado da sua máquina será semelhante à imagem abaixo.
Você começará mantendo pressionado o cmd tecla e, em seguida, pressionando o Touch ID três vezes rapidamente.
Se você estiver em um MBP (MacBook Pro) com TouchBar, usará o atalho cmd+fn+f5 para ativar o VO. Se você estiver usando um teclado tradicional com seu desktop ou laptop, as teclas devem ser as mesmas ou você terá que ativar o VO nas configurações de acessibilidade. Assim que o VO estiver ativado, você será saudado com esta caixa de diálogo junto com um vocalizado introdução ao VO.
Se você clicar no botão “Usar VoiceOver”, você estará no caminho certo para usar o VO para testar seus sites e aplicativos. Uma coisa a ter em mente é que o VO é otimizado para uso com Safari. Dito isso, ao executar o teste do leitor de tela, certifique-se de que o Safari é o navegador que você está usando. Isso vale também para o iPhone e o iPad.
Existem duas maneiras principais de usar o VO desde o início. A forma como eu pessoalmente o utilizo é navegando até um site e usando uma combinação dos tab, control, option, shift e teclas de seta, posso navegar pela experiência de forma eficiente apenas com essas teclas.
Outra maneira comum de navegar pela experiência é usar o Rotor VoiceOver. O Rotor é um recurso projetado para navegar diretamente para onde você deseja estar na experiência. Ao usar o Rotor, você elimina a necessidade de percorrer todo o site, pense nisso como uma “Escolha sua própria aventura”.
teclas modificadoras
As teclas modificadoras são a forma como você usa os diferentes recursos do VO. A tecla modificadora padrão ou VO is control + option mas você pode alterá-lo para caps lock ou escolher as duas opções para usar de forma intercambiável.
Usando o rotor
Para usar o Rotor você deve usar uma combinação de suas teclas modificadoras e a letra “U”. Para mim, minha chave modificadora é caps lock. Eu pressiono caps lock + U e o rotor gira para mim. Assim que o rotor aparecer, posso navegar para qualquer parte da experiência que desejar usando as setas para a esquerda e para a direita.
Navegando por nível de título
Outra maneira interessante de navegar pela experiência é por nível de título. Se você usar a combinação de suas teclas modificadoras + cmd + H você pode percorrer a estrutura do documento com base nos níveis de título. Você também pode voltar no documento pressionando shift na sequência assim, teclas modificadoras + shift + cmd + H.
História e Melhores Práticas
Os formulários são um dos elementos nativos mais poderosos que temos em HTML. Esteja você pesquisando algo em uma página, enviando um formulário para comprar algo ou enviando uma pesquisa. Os formulários são a base da web e foram um catalisador que introduziu interatividade em nossas experiências.
A história do formulário web remonta a setembro de 1995, quando foi introduzido no Especificações HTML 2.0. Alguns dizem que os bons velhos tempos da web, pelo menos eu digo isso. Stephanie Stimac escreveu um artigo incrível sobre Smashing Magazine intitulado, “Padronizando Select e além: o passado, o presente e o futuro dos controles de formulário HTML nativos".
A seguir estão 5 práticas recomendadas a serem seguidas ao construir um formulário acessível para a web.
- Certifique-se de estar usando um elemento de formulário. Os formulários são acessíveis por padrão e devem ser usados sempre sobre divs.
<form>
<!-- Form controls are nested here. -->
</form>
- Certifique-se de usar o
foreidatributos emlabel'areiainputé para que eles estejam vinculados. Dessa forma, se você clicar/tocar no rótulo, o foco mudará para a entrada e você poderá começar a digitar.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Se um campo for obrigatório para que o formulário seja preenchido, use o atributo obrigatório e o atributo aria-required. Isso restringirá o envio do formulário. O atributo aria-required informa explicitamente à tecnologia assistiva que o campo é obrigatório.
<input type="text" id="name" name="name" required aria-required/>- Use o,
:focus,:focus-withine:focus-visiblePseudoclasses CSS para gerenciar e personalizar como um usuário recebe o foco.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttoné usado para invocar uma ação, como enviar um formulário. Use-o! Não crie botões usandodiv's. Adivpor definição é um divisor. Não possui propriedades de acessibilidade inerentes.
Demo
Se você quiser verificar o código, navegue até o Repositório GitHub de demonstração do VoiceOver. Se você quiser experimentar a demonstração acima com o leitor de tela de sua preferência, dê uma olhada Navegando em um formulário da Web com VoiceOver.
Software leitor de tela
Abaixo está uma lista de vários tipos de software leitor de tela que você pode usar em seu sistema operacional. Se um Mac não for sua máquina preferida, existem opções para Windows e Linux, bem como para dispositivos Android.
NVDA
NVDA é um leitor de tela do NV Access. Atualmente, é compatível apenas com PCs que executam o Microsoft Windows 7 SP1 e posterior. Para mais acesso, confira o Página de download do NVDA versão 2024.1 no site do NV Access!
MANDÍBULAS
“Precisamos de um leitor de tela melhor”
- anônimo
Se você entendeu a referência acima, está em boa companhia. De acordo com o site do JAWS, em poucas palavras, isso é:
“JAWS, Job Access With Speech, é o leitor de tela mais popular do mundo, desenvolvido para usuários de computador cuja perda de visão os impede de ver o conteúdo da tela ou navegar com o mouse. O JAWS fornece saída de voz e Braille para os aplicativos de computador mais populares em seu PC. Você poderá navegar na Internet, escrever um documento, ler um e-mail e criar apresentações em seu escritório, área de trabalho remota ou em casa.”
Confira você mesmo o JAWS e se essa solução atender às suas necessidades, experimente!
Narrador
O Narrator é uma solução de leitor de tela integrada fornecida com o WIndows 11. Se você optar por usá-lo como seu leitor de tela preferido, o link abaixo é para documentação de suporte sobre seu uso.
orca
Orca é um leitor de tela que pode ser usado em diferentes distribuições Linux rodando GNOME.
“O Orca é um leitor de tela gratuito, de código aberto, flexível e extensível que fornece acesso à área de trabalho gráfica por meio de fala e braille atualizável.
A Orca trabalha com aplicativos e kits de ferramentas que suportam a Interface de Provedor de Serviços de Tecnologia Assistiva (AT-SPI), que é a principal infraestrutura de tecnologia assistiva para Linux e Solaris. Os aplicativos e kits de ferramentas que suportam o AT-SPI incluem o kit de ferramentas GNOME Gtk+, o kit de ferramentas Swing da plataforma Java, LibreOffice, Gecko e WebKitGtk. O suporte AT-SPI para o kit de ferramentas KDE Qt está sendo buscado.”
TalkBack
Google TalkBack é o leitor de tela usado em dispositivos Android. Para obter mais informações sobre como ligá-lo e usá-lo, confira este artigo no site de suporte de acessibilidade do Android.
Suporte do navegador
Se você está procurando suporte real do navegador para elementos HTML e atributos ARIA (Accessible Rich Internet Application), sugiro caniuse.com para HTML e Suporte de acessibilidade para ARIA para obter o 4-1-1 mais recente sobre suporte ao navegador. Lembre-se, se o navegador não suportar a tecnologia, é provável que o leitor de tela também não.
DigitalA11Y pode ajudar a resumir as informações do navegador e do leitor de tela em seu artigo, Leitores de tela e navegadores! Qual é a melhor combinação para testes de acessibilidade?
Ligações Úteis
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
- PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
- PlatãoESG. Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
- PlatoHealth. Inteligência em Biotecnologia e Ensaios Clínicos. Acesse aqui.
- Fonte: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
