Até aqui nada de muito extraordinário… Ou melhor, até ao lançamento do firebug 1.4 nada de extraordinário: a acessibilidade da extensão era quase nula, para efeitos de desenvolvimento sério uma total perca de tempo e um foco de frustrações nas minhas tentativas de depurar javascript. [2]

Mas agora tudo é diferente. O Firebug 1.4 saltou dos 0 aos 100 (vá, aos 90) graças ao fantástico suporte de acessibilidade que a plataforma Mozilla proporciona. A utilização da maioria das funcionalidades é totalmente acessível e o trabalho continua nas que ainda não o são. As melhorias estão todas documentadas ao detalhe bem como a forma de usufruir delas, basta consultar os melhoramentos de acessibilidade no Firebug 1.4

Como seria de esperar o NVDA é o leitor de ecrã que melhor acesso oferece ao Firebug, compreende-se visto que é o que melhor acesso oferece ao Mozilla Firefox. No entanto o JAWS e Windows-Eyes também não se saem mal, isto no mundo Windows. Acabei de testar com o Orca no Ubuntu e os resultados são igualmente excelentes.

O facto mais interessante é que nenhum dos desenvolvimentos se direccionou a qualquer leitor de ecrã ou tecnologia acistiva específica. Foi apenas necessária a introdução de WAI-ARIA de forma a que a interface forneça suporte de acessibilidade a todas as tecnologias que o suportem.

Convém ainda referir que para a melhor experiência possível recomenda-se a utilização do Firefox 3.5 ou superior em conjunto com o Firebug 1.4.

Este é sem dúvida um grande contributo para o desenvolvimento web dos portadores de deficiência visual, as possibilidades são muitas até mesmo na construção do layout das páginas o Firebug oferece algumas ajudas acessíveis.

Mais Informações

Para instalar e testar o Firebug bem como testar o suporte de acessibilidade recomendo vivamente a consulta das seguintes referências, todas em inglês: [3]

• Página oficial do Firebug
• Documentação do Firebug
• Melhoramentos de acessibilidade no Firebug 1.4
• Artigo de Marco Zehe da Mozilla: blind web devs jump-on the firebug train

¹ Tradução livre de parte do Artigo sobre o Firebug na wikipedia

² Por exemplo, num projecto que fiz para a faculdade, onde se tentava simular a interface dum telemóvel em HTML e javascript utilizando jQuery a utilização do Firebug (1.3 na altura) era feita através dos olhos dos colegas de grupo. O resultado foi ter-se decidido reescrever a aplicação em python para s60 (a correr no meu Nokia 6630) três dias antes do prazo, um 11 na nota final e um jantar pago pelo meu estimado colega Nuno Farinha

³ Talvez um dia, caso haja interesse e me sinta à vontade o suficiente, venha a escrever um tutorial decente para o firebug acessível.

Etiquetas: Firebug, Firefox, jaws, mozilla, nvda, orca, Window-Eyes | Artigo original: Firebug 1.4 trás Desenvolvimento Web Acessível
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

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.

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.

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:

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/

Etiquetas: Firefox, Internet Explorer, nvda | Artigo original: Como Usar O NVDA E O Firefox Para Testar A Acessibilidade Das Suas Páginas WEB
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

Etiquetas: nvda | Artigo original: Artigo sobre o Desenho do NVDA
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

Etiquetas: lerparaver | Artigo original: Cegos no Mundo da Programação
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

Etiquetas: acessibilidade web, livros | Artigo original: Universal Design for Web Applications (Livro sobre acessibilidade web)
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

Agradeço ao Sérgio Neves pela ajuda na implementação inicial desta API e à equipa da Freebsoft por toda a colaboração no desenvolvimento deste software.

Etiquetas: java, speech-dispatcher | Artigo original: API Java para o speech-dispatcher
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

| Artigo original: AXsJAX – acessibilidade em aplicações web de nova geração
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

A plataforma open source eclipse, ambiente de desenvolvimento para Java e, recorrendo a plugins, tudo o que se imagine sempre foi um bom exemplo de acessibilidade e usabilidade desde as suas origens, mesmo quando propriedade da IBM. Isto não é novidade. A grande novidade está no facto de mesmo evoluindo, e tornando-se uma plataforma realmente complexa e multifacetada, a acessibilidade continua a ser uma constante. Tal acessibilidade não se deve nem a uma preocupação especial dos programadores, nem muito menos a um dever estabelecido da a ter: deve-se à utilização de controlos standard, interfaces intuitivas e boa usabilidade. No que respeita aos leitores de ecrã, teclas de atalho para a maioria das funções (as que não a têm predefinidas podem ser associadas a um comando), a utilização de controlos standard é fundamental para o nível de acessibilidade atingido pelo eclipse: os próprios controlos já têm acessibilidade incorporada então não existe a necessidade de a implementar (ou pelo menos de a implementar de raiz). E tal facto não é só importante no sistema operativo Windows, a vantagem da interface do eclipse ser construída em SWT ((biblioteca de construção de interfaces gráficas em Java que utiliza os controlos nativos do sistema onde corre)) traz vantagens de acessibilidade também noutros sistemas. Chegamos assim ao facto mais surpreendente (e razão da publicação deste post): o eclipse é quase tão acessível (para efeitos práticos não existe grande diferença) em windows como no desktop gnome ((versão 2.18 ubuntu 7.04 para que conste)). Ao testar a acessibilidade do dito eclipse com o leitor de ecrã Orca versão 2.19.90, criei o clássico helloworld em Java ((O eclipse têm plugins para desenvolvimento em php, python, ruby, c/c++,… assim não se destina apenas a aplicações Java, mesmo que o ambiente em si tenha sido programado em Java.)) tão fácil e intuitivamente como o tenho feito em Windows. Desde criar o projecto, ler e escrever no editor, recorrer à ajuda contextual para escrever código (autocomplition), compilar, correr e ler o output na consola tudo foi acessível e nem uma vez se quer tive de recorrer a comandos especiais do leitor de ecrã (flat review por exemplo). Esta fantástica acessibilidade deve-se, mais uma vez, ao SWT, que utilizando, no gnome, controlos da biblioteca GTK2, ganha como bónus a acessibilidade proporcionada pela at-spi, equivalente ((talvez não equivalente, mas parecido ao MSAA no Windows)) do MSAA no Microsoft Windows. ((de referir que a acessibilidade dos controlos swt no Windows é proporcionada pelo MSAA))

Posto isto, meio em tom de desafio aos profetas da desgraça da acessibilidade no open source, gostaria que testassem a acessibilidade do visual studio da Microsoft, e comparassem…. Não são ambientes assim tão distintos (em objectivos gerais – ambiente de desenvolvimento para programadores e afins)…

| Artigo original: Eclipse, exemplo de acessibilidade
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.

Faça aqui o download do código fonte e do programa mencionado no nosso 2º podcast

clique aqui para fazer o download do turbo pascal for windows 1.5

Se quiser manuais acesse:

www.apostilando.com.br

Etiquetas: Turbo Pascal | Artigo original: turbo pascal for windows
© (c) 2007-2008 megaTTS - Feed apenas para utilização não comercial em leitores/agregadores de feeds.