Página web acessível: alcance mais pessoas na rede

A aces­si­bi­li­dade na Internet garante que pessoas com di­fe­ren­tes tipos de li­mi­ta­ções e ne­ces­si­da­des possam utilizar as páginas web de forma autónoma, sem barreiras e sem depender de ajuda externa. O objetivo de uma página web acessível é, portanto, evitar a exclusão de de­ter­mi­na­dos grupos no ambiente digital, como pessoas com de­fi­ci­ên­cias físicas ou cog­ni­ti­vas, e garantir um acesso equi­ta­tivo aos conteúdos e serviços online.

O que é aces­si­bi­li­dade na Internet?

A aces­si­bi­li­dade na Internet tem como objetivo permitir que todas as pessoas, in­de­pen­den­te­mente das suas ca­pa­ci­da­des ou li­mi­ta­ções, possam aceder e par­ti­ci­par nos conteúdos web em igualdade de condições. Isto significa que qualquer uti­li­za­dor pode utilizar uma página web sem ser excluído de de­ter­mi­na­dos conteúdos ou meios devido a uma de­fi­ci­ên­cia. No contexto da inclusão digital, a aces­si­bi­li­dade das páginas web é um fator fun­da­men­tal que as empresas devem ter em conta. Além disso, as páginas web aces­sí­veis também in­flu­en­ciam po­si­ti­va­mente o po­si­ci­o­na­mento nos motores de busca.

As barreiras são obs­tá­cu­los que di­fi­cul­tam ou impedem o uso equi­ta­tivo dos serviços digitais. Embora a sen­si­bi­li­za­ção para a aces­si­bi­li­dade no espaço físico tenha aumentado sig­ni­fi­ca­ti­va­mente nos últimos anos, na Internet continuam a surgir barreiras com frequên­cia, muitas vezes de forma in­vo­lun­tá­ria, como con­sequên­cia de decisões técnicas, de design ou de conteúdo. Estudos e exemplos práticos mostram que, em par­ti­cu­lar, elementos in­te­ra­ti­vos como sistemas de registo ou me­ca­nis­mos de segurança podem ser pro­ble­má­ti­cos. Assim, de­ter­mi­na­dos captchas baseados em ca­rac­te­res dis­tor­ci­dos ou testes ex­clu­si­va­mente visuais di­fi­cul­tam con­si­de­ra­vel­mente o acesso aos conteúdos web para pessoas com de­fi­ci­ên­cia visual e não cumprem os re­qui­si­tos atuais de aces­si­bi­li­dade web.

Padrões para páginas web aces­sí­veis

A norma mais im­por­tante para a criação de páginas web aces­sí­veis é a WCAG na sua versão WCAG 2.2 (Web Content Ac­ces­si­bi­lity Gui­de­li­nes). Trata-se de di­re­tri­zes pu­bli­ca­das pelo W3C que cons­ti­tuem a principal re­fe­rên­cia in­ter­na­ci­o­nal em matéria de aces­si­bi­li­dade de páginas web. As WCAG 2.2 centram-se es­pe­ci­al­mente na melhoria da usa­bi­li­dade, numa navegação mais clara através do teclado e do foco e numa interação sim­pli­fi­cada em dis­po­si­ti­vos móveis, res­pon­dendo às mudanças nos hábitos de uti­li­za­ção e às barreiras que até agora não estavam su­fi­ci­en­te­mente cobertas.

Entre os critérios de sucesso mais re­le­van­tes das WCAG 2.2 incluem-se, entre outros:

• Foco do teclado visível: os elementos in­te­ra­ti­vos devem ser cla­ra­mente re­co­nhe­cí­veis ao navegar com o teclado.
• Tamanho mínimo dos elementos de controlo: as su­per­fí­cies clicáveis e táteis devem ser su­fi­ci­en­te­mente grandes para evitar erros de uti­li­za­ção.
• Al­ter­na­ti­vas aos gestos de arrastar: as funções não devem depender ex­clu­si­va­mente do uso de arrastar e soltar.
• Evitar entradas re­dun­dan­tes: não se deve obrigar a in­tro­du­zir a mesma in­for­ma­ção várias vezes.
• Au­ten­ti­ca­ção acessível: os processos de início de sessão não devem basear-se em tarefas cog­ni­ti­vas complexas, como de­ter­mi­na­dos captchas.

As WCAG 2.2 cons­ti­tuem, assim, o quadro técnico fun­da­men­tal da aces­si­bi­li­dade na web e servem também como base para os re­qui­si­tos legais na União Europeia e em Espanha em matéria de aces­si­bi­li­dade das páginas web.

Percepção

Muitas páginas da Web incluem anúncios in­ter­mi­ten­tes, colunas de co­men­tá­rios com textos muito pequenos e, em alguns casos, até música de fundo destinada a reforçar o ambiente ou o tema da página. No entanto, de­pen­dendo do tipo e do grau de limitação, alguns uti­li­za­do­res não percebem esses elementos com­ple­ta­mente ou sim­ples­mente não os detectam.

Pessoas cegas, por exemplo, navegam na Internet sem estímulos visuais. Em vez disso, um leitor de ecrã lê o conteúdo da página web e transmite as in­for­ma­ções legíveis para tec­no­lo­gias de apoio. Uma linha braille, por exemplo, converte o texto em escrita braille para que possa ser percebido pelo tato. As fer­ra­men­tas de texto para voz re­pro­du­zem os conteúdos em formato de áudio, o que permite processar a in­for­ma­ção através da audição. Neste contexto, a música de fundo pode ser es­pe­ci­al­mente incómoda.

Pessoas com de­fi­ci­ên­cia visual menos grave, entre as quais se encontram muitos idosos, percebem o conteúdo vi­su­al­mente, mas precisam de uma ampliação con­si­de­rá­vel do ecrã. Pessoas com dal­to­nismo, por sua vez, não re­co­nhe­cem avisos trans­mi­ti­dos apenas por meio da cor. Pessoas surdas, por outro lado, não conseguem acessar in­for­ma­ções de arquivos de áudio puros nem grande parte do conteúdo de vídeo sem apoios adi­ci­o­nais.

Com­pre­en­são

Pessoas muito jovens, idosos ou uti­li­za­do­res com de­fi­ci­ên­cias cog­ni­ti­vas podem ter di­fi­cul­da­des em com­pre­en­der textos repletos de termos técnicos modernos ou abre­vi­a­tu­ras sem ex­pli­ca­ção. Da mesma forma, quando uma página web apresenta conteúdos re­la­ci­o­na­dos entre si de forma muito dispersa, muitas pessoas têm di­fi­cul­dade em iden­ti­fi­car o contexto e o sentido global.

Interação e navegação

Como cada vez mais pessoas acedem a páginas web a partir de smartpho­nes, é es­pe­ci­al­mente frus­trante quando os links não podem ser se­le­ci­o­na­dos com precisão com o dedo. Se uma página web não estiver otimizada para dis­po­si­ti­vos móveis e os links apa­re­ce­rem muito próximos uns dos outros e com um tamanho de letra reduzido, isso também re­pre­senta um in­con­ve­ni­ente sig­ni­fi­ca­tivo para pessoas idosas ou com tremores nas mãos.

Atu­al­mente, existem inúmeras fer­ra­men­tas que facilitam o uso do com­pu­ta­dor por pessoas com de­fi­ci­ên­cia física: algumas tec­no­lo­gias registram os mo­vi­men­tos oculares, enquanto outras são con­tro­la­das pelo teclado. Um site acessível deve ser projetado de forma a poder ser usado cor­re­ta­mente com esse tipo de tec­no­lo­gia de apoio. Se um site não for navegável nessas condições, os possíveis clientes que dependem delas não poderão acessar toda a oferta dis­po­ní­vel.

Ao preencher for­mu­lá­rios, por exemplo, para subs­cre­ver uma news­let­ter, é comum ocorrerem erros: a palavra-passe é muito curta ou a data de nas­ci­mento não se ajusta aos pa­râ­me­tros definidos. Por isso, é fun­da­men­tal oferecer in­di­ca­ções claras para a correção de erros. A interação com uma página web também inclui a navegação. Os uti­li­za­do­res que utilizam dis­po­si­ti­vos com ecrãs pequenos ou trabalham com uma ampliação elevada dependem de rotas de navegação adaptadas e de uma estrutura clara e bem or­ga­ni­zada do site.

Entradas de dados

As secções de co­men­tá­rios permitem aos uti­li­za­do­res dar a sua opinião, expressar ava­li­a­ções sobre um produto ou conteúdo e comunicar com outras pessoas. As pessoas com de­fi­ci­ên­cia visual costumam usar uma lupa de ecrã ao escrever no monitor. Isso faz com que os elementos sejam exibidos con­si­de­ra­vel­mente maiores e aumenta a distância entre a área de leitura e o campo de entrada. Por isso, é con­ve­ni­ente dispor os elementos de forma vi­su­al­mente próxima, fa­ci­li­tando assim a interação e o in­ter­câm­bio entre os uti­li­za­do­res.

Quais são as vantagens do design web acessível?

Quando elimina barreiras na Internet, melhora a usa­bi­li­dade do seu site e, com isso, também o seu po­si­ci­o­na­mento no Google. O design web acessível é, portanto, rentável do ponto de vista económico e ge­ral­mente requer apenas um esforço adicional moderado. Além disso, os sites aces­sí­veis cumprem as di­re­tri­zes europeias de aces­si­bi­li­dade, como a Lei Europeia de Aces­si­bi­li­dade, e os re­qui­si­tos legais apli­cá­veis em Portugal. Outro fator fun­da­men­tal para as empresas é que um site acessível atinge um público mais vasto, uma vez que pode ser utilizado por mais pessoas do que um site não acessível.

Criar um site acessível: dicas e exemplos

Se quiser criar um site acessível, deve prestar especial atenção tanto à estrutura da in­for­ma­ção como aos di­fe­ren­tes com­po­nen­tes visuais da presença na web.

Passo 1: garantir uma estrutura clara da in­for­ma­ção

Estruture o seu site de forma clara e utilize uma linguagem orientada para o uti­li­za­dor. Desta forma, atrairá mais leitores e, ao mesmo tempo, melhorará o seu po­si­ci­o­na­mento nos motores de busca, uma vez que estes também avaliam a le­gi­bi­li­dade dos textos. Se quiser continuar a otimizar o SEO e criar uma ar­qui­te­tura de site com­pre­en­sí­vel e or­ga­ni­zada, tenha também em conta os seguintes aspetos:

Passo 2: aplicar estímulos visuais

A pos­si­bi­li­dade de ampliar os tipos de letra ou modificar as cores ajuda as pessoas com de­fi­ci­ên­cia visual ou dal­to­nismo a re­co­nhe­cer melhor o conteúdo de uma página web. O conteúdo deve destacar-se cla­ra­mente do fundo para facilitar a leitura. Destaque os elementos in­te­ra­ti­vos através de botões ou mar­ca­do­res coloridos, por exemplo, fazendo com que um link mude de cor quando os uti­li­za­do­res navegam até ele com o teclado, passam o rato por cima ou clicam. Além da cor, utilize sempre sinais adi­ci­o­nais, como números ou as­te­ris­cos, para trans­mi­tir in­for­ma­ções.

Close

Pessoas que sofrem de epilepsia podem correr risco se um site contiver gráficos ou vídeos que piscam mais de três vezes por segundo. Além disso, estudos ci­en­tí­fi­cos de­mons­tra­ram que padrões de grade com contornos bem definidos e alto contraste também podem provocar crises em pessoas com epilepsia fo­tos­sen­sí­vel.

Passo 3: apre­sen­tar as in­for­ma­ções de forma di­ver­si­fi­cada

Tenha em conta o design web acessível também no seu trabalho diário. Seja para oti­mi­za­ção em motores de busca, para fins de relações públicas ou para apre­sen­tar novas ofertas de venda, publique novos conteúdos cons­tan­te­mente. Facilite o acesso a esses conteúdos, adaptando as in­for­ma­ções às di­fe­ren­tes ne­ces­si­da­des dos uti­li­za­do­res e pro­mo­vendo assim uma aces­si­bi­li­dade de páginas web coerente e sus­ten­tá­vel.

Um elemento fun­da­men­tal de uma página web acessível, que também de­sem­pe­nha um papel fun­da­men­tal no SEO, é a atri­bui­ção de textos al­ter­na­ti­vos às imagens. Os ras­tre­a­do­res dos motores de busca e os leitores de ecrã não conseguem in­ter­pre­tar o conteúdo visual, o mesmo acon­te­cendo com as pessoas cegas. O texto al­ter­na­tivo descreve o conteúdo da imagem e fornece contexto. Os uti­li­za­do­res com ligações lentas também be­ne­fi­ciam dos textos al­ter­na­ti­vos, nos casos em que as imagens demoram a carregar ou não são apre­sen­ta­das cor­re­ta­mente.

Trans­cri­ções e legendas

A criação contínua e pontual de trans­cri­ções e legendas requer um esforço maior, mas é essencial para um site acessível. Esses recursos permitem preparar os conteúdos de áudio para pessoas surdas ou com di­fi­cul­da­des auditivas. A trans­cri­ção, que reúne tanto o conteúdo falado quanto os sons e ruídos em formato de texto, deve estar o mais próxima possível do conteúdo de áudio cor­res­pon­dente, por exemplo, através de um botão com link para o documento.

As legendas facilitam muito a com­pre­en­são dos vídeos na web para pessoas surdas. Também são úteis para uti­li­za­do­res que preferem não ativar o som, por exemplo, para não incomodar as pessoas ao seu redor. Além disso, pessoas com de­fi­ci­ên­cias cog­ni­ti­vas ou dis­túr­bios de atenção, como TDAH, assimilam melhor as in­for­ma­ções au­di­o­vi­su­ais quando podem desativar os ruídos de fundo através da con­fi­gu­ra­ção do re­pro­du­tor de vídeo.

Au­di­o­des­cri­ção

Ge­ral­mente, pessoas com acuidade visual inferior a 30% são con­si­de­ra­das pessoas com de­fi­ci­ên­cia visual e, com acuidade inferior a 2%, pessoas cegas. Elas percebem os estímulos visuais de forma limitada ou não os percebem de todo. Para que essas pessoas possam com­pre­en­der o conteúdo do vídeo, é re­co­men­dá­vel adicionar uma faixa de áudio adicional. Nela, são ex­pli­ca­dos elementos visuais, como paisagens ou pessoas, e descritas bre­ve­mente as ações que aparecem na tela. Essas des­cri­ções devem ser inseridas nas pausas do diálogo e do som da faixa de áudio original, para evitar que as di­fe­ren­tes faixas se so­bre­po­nham.

Linguagem simples

A linguagem simples expressa os conteúdos de forma muito simples e ajuda as pessoas com de­fi­ci­ên­cias cog­ni­ti­vas a com­pre­en­der melhor questões complexas. Este tipo de linguagem evita, por exemplo, o uso do sub­jun­tivo, sinónimos e negações. As frases são curtas e trans­mi­tem uma única ideia por frase. As pessoas com de­fi­ci­ên­cias cog­ni­ti­vas têm o mesmo direito à in­for­ma­ção que qualquer outra pessoa. Por isso, muitos meios de co­mu­ni­ca­ção digitais, como os jornais, oferecem cada vez mais versões dos seus artigos em linguagem fácil, como exemplo de páginas web aces­sí­veis. Também as ad­mi­nis­tra­ções públicas recorrem cada vez mais à linguagem fácil nos seus textos in­for­ma­ti­vos.

Passo 4: tornar o site com­pa­tí­vel

Os leitores de ecrã e outras tec­no­lo­gias de apoio tornam a Internet acessível a muitas pessoas. Estes programas processam os do­cu­men­tos web de forma es­tri­ta­mente linear, da esquerda para a direita e de cima para baixo. Por este motivo, é fun­da­men­tal separar o design do conteúdo. Caso contrário, os leitores de ecrã podem in­ter­pre­tar a página de forma incorreta. Para facilitar uma navegação eficiente na sua página web, convém respeitar as seguintes regras básicas.

Links de navegação e outros atalhos

Os leitores de ecrã trans­mi­tem a in­for­ma­ção textual para sistemas de síntese de voz e linhas braille. Para isso, leem a página de cima para baixo, incluindo elementos re­pe­ti­ti­vos como a barra de navegação, ícones ou links para sub­pá­gi­nas. Para evitar que esta in­for­ma­ção se repita des­ne­ces­sa­ri­a­mente em cada página, é re­co­men­dá­vel integrar links de salto de navegação, co­nhe­ci­dos como «skip links».

Também as pessoas que navegam ex­clu­si­va­mente com o teclado, por exemplo, através de dis­po­si­ti­vos de apoio, encontram grandes di­fi­cul­da­des se tiverem de avançar através de numerosos elementos in­te­ra­ti­vos. Estas pessoas be­ne­fi­ciam es­pe­ci­al­mente de um link de salto lo­ca­li­zado no início da página e cla­ra­mente visível:

<a href="#content">Saltar navegación</a>
<main id="content">
    <h1>Encabezado principal</h1>
    <p>Primer párrafo</p>
</main>

Existem links de salto que são in­vi­sí­veis no design, mas que o leitor de ecrã anuncia através do texto al­ter­na­tivo «Saltar navegação» quando o código é im­ple­men­tado da seguinte forma:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Saltar navegación" width="5"></a>

É im­por­tante que os links de salto sejam colocados o mais próximo possível do início do código. O ponto de ancoragem deve ser colocado no início do conteúdo principal:

<div id="content"></div>

Use os links de salto com moderação, pois o uso excessivo pode anular o seu efeito positivo e obrigar os uti­li­za­do­res a percorrer de­ma­si­a­dos elementos. Uma al­ter­na­tiva mais elegante é a uti­li­za­ção de atributos ARIA (Ac­ces­si­ble Rich Internet Ap­pli­ca­ti­ons) jun­ta­mente com uma estrutura de documento bem definida. Além disso, recomenda-se a uti­li­za­ção de elementos HTML5.

Outra ajuda eficaz é incluir um índice de conteúdos no início do documento, que permita aos uti­li­za­do­res navegar pelas di­fe­ren­tes secções através de links internos. Os leitores de ecrã modernos leem os títulos cor­res­pon­den­tes em voz alta. Por isso, trabalhar com títulos claros e bem es­tru­tu­ra­dos melhora tanto a le­gi­bi­li­dade para os motores de busca como a aces­si­bi­li­dade para as tec­no­lo­gias de apoio.

Tabelas de dados em vez de tabelas de layout

Para uma página web acessível de acordo com as di­re­tri­zes do W3C, o ideal é utilizar apenas tabelas de dados. Os leitores de ecrã têm menos di­fi­cul­da­des em in­ter­pre­tar cor­re­ta­mente este formato e re­pro­du­zir a in­for­ma­ção de forma com­pre­en­sí­vel após a conversão. As tabelas de layout, por outro lado, servem para es­tru­tu­rar vi­su­al­mente a página, mas di­fi­cul­tam que os leitores de ecrã trans­mi­tam o conteúdo de forma clara.

Defina as tabelas de layout apenas com elementos simples: TABLE, TR e TD (tabela, linha e célula). Utilize elementos es­tru­tu­rais para organizar lo­gi­ca­mente a relação entre as células; desta forma, o leitor de ecrã in­ter­pre­tará a tabela de layout como se fosse uma tabela de dados. Este efeito é anulado se de­ter­mi­na­dos elementos da tabela forem eli­mi­na­dos da árvore de aces­si­bi­li­dade.

Em uma página web acessível, pode usar, como no exemplo, o atributo role="none", que se aplica tanto à tabela quanto aos seus elementos filhos. Se incluir tabelas dentro de outras tabelas, deverá definir ambos os elementos da mesma forma.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Ejemplo de texto <abbr title="por ejemplo">p. ej.</abbr>
</td>
</tr>
</table>
</td>
</tr>
</table>

Página web acessível: lista de ve­ri­fi­ca­ção

Depois de concluir a criação da sua página web, esta lista de ve­ri­fi­ca­ção ajudará a verificar se teve em conta os aspetos fun­da­men­tais da aces­si­bi­li­dade das páginas web:

✓ Estrutura da in­for­ma­ção clara e com­pre­en­sí­vel

✓ Uti­li­za­ção de uma linguagem simples e acessível

✓ Textos al­ter­na­ti­vos para imagens

✓ Trans­cri­ções de vídeo e áudio

✓ Marcação visual de conteúdos im­por­tan­tes

✓ Contraste su­fi­ci­ente

✓ Com­pa­ti­bi­li­dade com leitores de ecrã

Fer­ra­men­tas gratuitas para criar páginas web aces­sí­veis

Existem várias fer­ra­men­tas que podem ajudá-lo a criar uma página web acessível e a verificar se ela cumpre os re­qui­si­tos de aces­si­bi­li­dade. A seguir, apre­sen­ta­mos algumas das mais co­nhe­ci­das:

• Ac­ces­si­bi­lity Checker: aplicação web que permite verificar gra­tui­ta­mente se uma página web cumpre as WCAG. Está dis­po­ní­vel em inglês e é adequada para ava­li­a­ções gerais de aces­si­bi­li­dade de páginas web.
• Si­teim­prove: o ve­ri­fi­ca­dor de aces­si­bi­li­dade da Si­teim­prove oferece uma análise gratuita da sua página web e envia os re­sul­ta­dos por e-mail, com in­di­ca­ções claras sobre possíveis problemas e melhorias.

Conclusão: a aces­si­bi­li­dade digital melhora a ex­pe­ri­ên­cia do uti­li­za­dor para todos

Criar um site acessível melhora a usa­bi­li­dade e otimiza a ex­pe­ri­ên­cia do uti­li­za­dor. Os uti­li­za­do­res que navegam a partir de dis­po­si­ti­vos móveis, aqueles com de­fi­ci­ên­cias físicas ou cog­ni­ti­vas, os idosos e os uti­li­za­do­res menos ex­pe­ri­en­tes orientam-se mais fa­cil­mente num site acessível.

Além disso, uma estrutura clara e uma apre­sen­ta­ção inclusiva das in­for­ma­ções melhoram o po­si­ci­o­na­mento nos motores de busca e aumentam o tempo de per­ma­nên­cia no site. Embora a aces­si­bi­li­dade web exija algum esforço adicional e testes pe­rió­di­cos, o in­ves­ti­mento vale a pena: uma boa aces­si­bi­li­dade das páginas web beneficia todos os uti­li­za­do­res.