souweb

Juntamente com André Espeiorin, programador no Ministério da Educação e mantenedor do www.blogdoxorna.com e Andrea Poletto, coordenadora do núcleo de acessibilidade do projeto SIEP (Sistema de Informação na Educação Profissional e Tecnológica) do Ministério da Educação, desenvolvi uma Apostila de Web Standards, englobando XHTML, CSS, Tableless, Acessibilidade, Flash e AJAX Acessível.

Pensada para o uso de conceitos e técnicas práticas, foi usada em diversos treinamentos e distribuida pela Rede de Desenvolvimento do SIEP.

Tendo sempre em mente contribuir para a comunidade, alcançando uma web mais rica e acessível, disponibilizo para donwload aqui, para todos os interessados.

Boa leitura!

O artigo a seguir foi escrito pelo meu amigo Anderson Triacca, www.andersontriacca.com, escrito quando ainda trabalhávamos juntos. Pedi sua aprovação para postar no meu blog devido a importância dada aos padrões web e a acessibilidade e sua relação com os mecanismos de busca.

Boa leitura!

O título pode parecer meio estranho, mas essa é uma das grandes verdades da web, o google é o maior cego da internet, e isso é muito bom para nós(desenvolvedores). Você deve estar pensando: “esse cara é louco”, mas vou explicar um pouco da minha lógica, e depois você pode tirar suas conclusões.

Quando eu comecei a montar minhas páginas html eu fui questionado sobre como eu tratava da acessibilidade nas minhas páginas eu respondi que não me importava muito com isso, que deficientes não usam a internet(como eu era ingênuo nessa época).

Acontece que os deficientes(parciais ou totais) acessam sim a web, e acessam muito, cerca de 20% das pessoas que navegam na web são portadoras de algum tipo de deficiência, e não pensar nelas é excluir milhões de possíveis visitantes aos nossos sites.

Mas agora você deve estar se perguntando: “como um cego acessa um site?”, pois eu respondo, através de leitores de tela(progamas que lêem o conteudo do site e expressam de forma verbal para o deficiente poder acessar a página) tais como Jaws ou DoxVox. Mas se na hora que desenvolvemos o site não pensarmos nesses programas, eles com certeza irão confundir o deficiente no lugar de ajudá-lo.

Devemos tomar medidas preventivas para que um deficiente tenha uma boa experiência quando navegar em nosso site, medidas como colocar conteúdos alternativos para leitores de tela, separar conteúdo de estilização, usar webstandards, escrever html semântico, conteúdo alternativo para navegadores que não suportam flash, e outros mais(nas próximas colunas eu explico cada técnica mais detalhadamente).

Agora você me pergunta: “onde o google do título entra nesta história?”, pois ele é mais importante, mais inteligente e mais cego do que você pode imaginar.

Veja por este lado, quanto melhor a colocação do seu site numa busca mais visitas você vai ter. Agora você já se perguntou como o google determina quais sites aparecerão melhor numa busca?

Pois o google visita seu site semanalmente, e quanto mais você atualizar ele melhor ele ficará colocado numa busca, isso claro, se o google conseguir ler seu site. Para o google ler seu site ele precisa de conteúdo, muito conteúdo, e a melhor forma de se conseguir muito conteúdo é usar pouco código na marcação, e para isso existem os webstandards, que separam estruturação de estilização. Quanto mais acessível aos leitores de tela seu site for melhor cotado ele será pelo google e mais visitas ele terá, pois o google é o grande oráculo cego da web.

Vivemos num país onde existem muitas desigualdedes e preconceitos, pelo menos na internet vamos tentar fazer algo para mudar esse quadro.

Autor: Anderson Triacca ( www.andersontriacca.com )

Como algumas pessoas sabem, eu participo do projeto SIEP - Sistema de Informação de Educação Profissional, do Ministério da Educação, no qual trabalho com uma equipe que envolve pessoas especializadas em educação assistiva, cegos, surdos e desenvolvedores.  No núcleo de Bento Gonçalves, CEFETBG, responsável pela acessibilidade dos sistemas.

E para este projeto me foi solicitado para desenvolver um tutorial de acessibilidade no Flash, o qual eu disponibilizo aqui para todos interessados em tornar a web e objetos desenvolvidos em Flash disponíveis a todos, independente de deficiências.

Introdução

O Flash já foi alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Imagem 1 - Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver é importante que defina duas informações sobre o mesmo (Imagem 1):

1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálago de produtos”.
2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento ele está acessando e qual o seu propósito.

Painel Acessibility

Com este painel podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash (Imagem 2).

Imagem 2 - Painel Accessibility

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem (imagem 4): “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3. Mas é importante deixar ativa a opção “selectable”, imagem 3, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Imagem 3 - Opção selectable

Imagem 4 - Campo Static Text

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações (imagem 5):

1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Imagem 5 - Campo Dynamic Static

Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos (imagem 6):

1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Imagem 6 - Campo Input Text

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.

Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar numa apresentação de um objeto de aprendizagem.

A utilização do Symbol Button é para botões mais simples, sem uma animação mais elaborada, enquanto o Symbol MovieClip, deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configura-lo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut, como exemplificado na imagem abaixo:

Imagem 7 - Símbolo Button

Para botões animados desenvolvidos com MovieClips, tem apenas uma diferença no painel Accessibility para os botões definidos pelo Symbol Button, a opção “Make child objects accessible” ou seja, “Tornar os objetos filhos ( ou internos ) acessíveis”.

Acessibilizando um MovieClip

Neste caso como o MovieClip pode desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible”, permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

Imagem 8 - Símbolo MovieClip