megaTTS

A tradução não está perfeita mas dá bem para se entender este excelente artigo do Marcos Zehe que colocamos em português.

Este artigo tem como objectivo ser um pequeno guia para ajudá-lo a testar os seus sites ou aplicações Web pela utilização do NVDA e do Firefox, sendo estas algumas das ferramentas disponíveis para os deficientes visuais, os mesmos que beneficiarão da acessibilidade dos seus sites. Embora existam muitos softwares que verificam se o código das suas páginas está bem escrito, é sempre útil utilizar um leitor de ecrã real para ouvir e ter uma noção como são as suas páginas Web para os visitantes cegos.
O NVDA (NonVisual Desktop Access) é um leitor de ecrã livre e open-source para o sistema operativo Microsoft Windows. Ao contrário das aplicações comerciais da concorrência, que têm de ser adquiridas para serem legalmente utilizadas para poder efectuar testes aos sites o NVDA não lhe custará nada. Além disso, é leve e eficaz e pode ser instalado física e virtualmente em computadores. O seu sistema não será afectado por este leitor de ecrã, visto que não serão instalados quaisquer drivers de vídeo. Se pretender, pode colocar a versão portátil numa Unidade amovível USB e executar o NVDA a partir daí, que o mesmo continuará a não requerer qualquer tipo de instalação.

Como Obter O NVDA

O NVDA pode ser obtido a partir da página principal do projecto. Geralmente, tem duas opções:

• Faça o download da versão 0.6P3 que era a mais actual na altura em que escrevi este artigo. Esta é uma versão estável o que faz com que seja apropriada para a maioria das tarefas. No entanto, pode não conter as últimas actualizações.
• Descarregue a versão snapshot mais actual que está em desenvolvimento. Esta pode ser um pouco mais instável, ou os recursos podem estar em desenvolvimento ou temporariamente indisponíveis, mas os que estão disponíveis são os mais recentes. Por exemplo, se pretender ou necessitar de testar os seus sites com o Internet Explorer 8, para além do Firefox, não é a versão actual, a 0.6p3 que o vai ajudar nessa tarefa. Contudo, esteja ciente de algumas limitações quando testar a Accessible Rich Internet Applications (WAI-ARIA) disponível nas aplicações Web com o IE. Além disso, o suporte do NVDA para as actualizações dinâmicas e para a ARIA no IE está ainda em desenvolvimento contínuo, por isso, os resultados podem não ser tão satisfatórios.

Uma vez feito o download, instale-o, ou coloque a versão portátil numa unidade flash USB adequada e execute o NVDA.

Executar Pela Primeira Vez

Iniciar o NVDA é fácil. O instalador permite executá-lo logo após a conclusão. Ao correr o programa a partir da Unidade USB, é tão fácil executá-lo como estar no Explorador e clicar duas vezes no executável do NVDA.
Na primeira parte, um Guia de Configuração Rápida irá aparecer. Encorajo-o pelo menos a percorrê-lo. Pode de seguida, optar por desactivar este diálogo e clicar em OK. Agora, o NVDA vai localizar-se na sua área de notificação e vai falar consigo através da sua placa de som.

Saída de Voz Visual

O NVDA fornece uma funcionalidade útil para aqueles que não podem, ou não querem habituar-se à voz predefinida que o acompanha. Este leitor de ecrã vem com um sintetizador que em vez de falar, coloca o que ele iria dizer a aparecer no ecrã através de uma pequena janela. Para efectuar esta alteração, siga os seguintes passos:

1. Clique com o botão direito no ícone do NVDA na área de notificação.
2. Seleccione Preferências –> Sintetizador.
3. A partir da caixa de combinação, seleccione o sintetizador Display.
4. Clique em OK.
5. Se desejar guardar as alterações para torná-las permanentes, clique com o botão direito no ícone do NVDA novamente e seleccione “Guardar configuração”.

Abrir o seu primeiro site e ver com o NVDA

Agora, é hora de iniciar o Firefox e abrir uma página Web para obter resultados.
Quando a página carrega, o NVDA deve anunciar automaticamente o título. É altura de se familiarizar com o Buffer virtual, conceito comum a todos os leitores de ecrã do mercado para o Windows. Em suma, o que acontece é que o NVDA recolhe o HTML da página e converte-o num documento plano com informação do código. Os links, títulos, campos de formulário, imagens e outras informações são falados com o próprio texto da página. Isto é feito apenas quando o Firefox carrega todo o código HTML.
O denominado documento virtual do NVDA, é o que lhe aparece por defeito. Pode usar as setas para navegar no documento por caracter ou linha, e com a tecla Ctrl em conjunto com as setas, também por palavra. Pode seleccionar o texto utilizando a tecla Shift com as setas e copiar o que seleccionou para a área de transferência. Se encontrar um controlo interactivo, como uma caixa de texto, caixa de combinação ou caixa de listagem, pode alternar
Para o que se chama modo de foco do NVDA, no qual o modo de leitura (buffer virtual) é interrompido e o foco é definido para o controlo actual, estando o mesmo pronto para que interaja através do teclado, como se não fosse o NVDA a gerir tudo. Active o modo de foco pressionando Enter quando o cursor virtual está sobre o campo. Ao premir Escape, voltará à leitura virtual do documento. Se navegar na página com a tecla Tab, o modo de foco será automaticamente activado e desactivado.
Quando navegar no documento virtual, o NVDA irá actualizar o foco real do browser para o próximo elemento focável assim que o cursor virtual chegue lá. Muitas vezes têm indicação visual do local onde está na página, para o caso de se perder.
À medida que navega, o NVDA irá também anunciar as informações do código, tais como o “link”, “título de nível 1″ (até à “posição de nível 6″), “botão” ou algo do género. Ele vai indicar se entra ou sai de listas e quantos itens as mesmas contêm.

Teclas De Navegação Do Buffer Virtual

Enquanto o buffer virtual está activo, as seguintes combinações de teclas podem ser utilizadas para a realização de acções.
Nota: A tecla do NVDA normalmente é a tecla Insert do bloco numérico, mas pode ser configurada em Preferências / Teclado… Nas definições que estão no menu do NVDA. Também pode definir a tecla CapsLock como tal.

Funções gerais

Tecla	Função
NVDA + Espaço	Alterna entre activar ou desactivar o buffer virtual
Control + NVDA + F	Localizar
NVDA + F3	Localizar seguinte
NVDA + F7	Apresenta uma lista de todos os links da página
NVDA + F5	Actualiza o buffer, por vezes necessário para conteúdo dinâmico

O que se segue é uma lista de teclas rápidas para mover o cursor virtual. Essas teclas podem ser somente uma letra que também pode estar em conjunto com a tecla Shift para desempenhar a mesma função na direcção inversa.

Teclas rápidas do buffer virtual

Tecla	Elemento
H	Título
1 -6.	Títulos de 1 a 6, respectivamente
L	Lista (ordenada, desordenada, definição)
I	Item de lista
T	Tabela
K	Link
U	Link não visitado
V	Link visitado
F	Campo de formulário
E	Campo de edição
B	Botão
X	Caixa de verificação
C	Caixa de combinação
R	Botão de opção
Q	Bloco de citação
S	Separador
M	Frame
G	Gráfico

Portanto, se estiver a navegar por este artigo com o NVDA, pressione Ctrl + Home, seguido de t uma vez que o irá conduzir para a primeira tabela, onde estão os comandos gerais. Ao pressionar novamente t irá saltar para a segunda tabela que contém as teclas rápidas do buffer virtual.

Verificar Aspectos Diferentes Da Sua Página Web

OK, agora que está familiarizado com o funcionamento do NVDA, é altura de carregar o seu Web site e dar-lhe uma espreitadela. Aspectos que o NVDA pode ajudá-lo a verificar rapidamente:
Os seus títulos têm uma estrutura lógica? Ou colocou tudo na mesma posição de nível apesar de algo poder ser um subtítulo?
Pretende que os campos de formulário, tais como áreas de edição e botões tenham etiquetas? Por outras palavras, o NVDA anuncia qualquer coisa como o “Nome do utilizador: edição” automaticamente, ou não e anuncia apenas “edição”? Neste último caso, as etiquetas não estão correctamente associadas ao campo com o rótulo. Este é um erro no seu código que é facilmente corrigido.
As imagens importantes têm um texto alternativo coerente? Todas as imagens que estão como links e as que explicitam alguma coisa importante devem ter texto alternativo. Caso contrário, os leitores de ecrã não podem reconhecer o que está na imagem. Eles vão tentar descobrir parte através do atributo src como o nome da imagem, mas isto é bastante precário, ou até mesmo inútil.
O conteúdo tal como links de navegação está agrupado dentro de uma lista de algum tipo? Ao colocá-los numa lista, ajuda a adicionar informação estruturada nas suas páginas.
Se utilizar a WAI-ARIA, está a usar regras para marcadores de navegação de pesquisa, principal, rodapé etc. Isto irá ajudar na identificação de partes específicas do seu site e desta forma, facilitará a navegação / compreensão do layout do mesmo.
Se utiliza também a WAI-ARIA, os seus campos de formulário estão a informar que são de preenchimento obrigatório com o atributo aria-required? Os leitores de ecrã como o NVDA podem usar isto para fornecerem uma indicação clara de que este formulário é de preenchimento obrigatório.
É óbvio que há mais coisas para ver do que o que foi referido acima mas estes são os pontos onde o NVDA poderá ajudá-lo a avaliar rapidamente se o seu código está bem escrito.

Técnicas Avançadas

O NVDA tem um mecanismo denominado Objecto de Navegação. Este modo é uma forma de se andar pela hierarquia definida pelo Firefox e também por outras aplicações acessíveis. Existe um objecto acessível predefinido que representa geralmente a janela principal ou frame, bem como os seus descendentes (filhos em inglês), descendentes dos descendentes (netos em inglês) e descendentes dos descendentes dos descendentes (bisnetos em inglês), etc. Estes são todos os objectos da UI e da página Web que estão carregados. Ferramentas tais como o Microsoft Accessibility Explorer ou o IBM AccProbe permitem que os visualize, mas se actualmente não tem consigo estes programas, ou se pretende ouvir a sua árvore em vez de a ver, o NVDA fornece-lhe os meios para fazer isto.
Este leitor de ecrã também dá-lhe por defeito algumas informações, tais como se o elemento está a ser correctamente apresentado (visível), não disponível (esmaecido) ou outras informações semelhantes. A seguir encontram-se alguns comandos básicos para iniciar:

Comandos Básicos Dos Objectos de Navegação

Tecla	Descrição
NVDA + NumPad8	Desde o elemento actual, vai para o seu ascendente (pai em inglês)
NVDA + NumPad4	Vai para o objecto anterior do mesmo nível (irmão em inglês)
NVDA + NumPad6	Vai para o objecto seguinte do mesmo nível (irmão em inglês)
NVDA + NumPad2	Move para o primeiro objecto descendente (filho em inglês) ao actual

Objectos do mesmo nível referem-se a objectos que tenham um ascendente (pai em inglês) comum, tal como em simples relações familiares.
Ao navegar pela sua página desta forma, pode ouvir cada lista, div (apresentadas como secções), todos os formulários e respectivos campos descendentes, etc., e pode compreender como o seu código afecta o fornecimento de acessibilidade da programação de interfaces.
Para mais informações sobre o objecto de navegação, veja o Guia de Referência de Teclas de Atalho e também no Guia do Utilizador do NVDA, sendo ambos instalados no seu sistema quando procedeu à instalação deste leitor de ecrã.

Em Conclusão

Este artigo não pretende substituir o manual do NVDA. Espera-se que este texto seja útil para os programadores Web que pretendem ter mais uma ferramenta para melhorarem o seu espaço de trabalho do dia-a-dia, através de testes à interacção humana com os seus sites.
Dito isto, o feedback é, naturalmente, muito bem-vindo! Pode encontrar informações sobre como entrar em contacto comigo através do link “Acerca”.

Fonte: http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/

Autor:	diogo
Publicado:	Domingo, 26 de Abril de 2009, 03:08
Leituras:	938
Categorias:	Windows, acessibilidade, artigos, leitores de ecrã, programação, software, web
Etiquetas:	Firefox, Internet Explorer, nvda

De momento, não é possível deixar respostas nem efectuar pings.