Aces­si­bi­li­dade digital: alcance mais pessoas na internet

A aces­si­bi­li­dade digital garante que usuários com di­fe­ren­tes li­mi­ta­ções e ne­ces­si­da­des possam usar ofertas online de forma plena e sem ajuda de terceiros. O objetivo de sites com aces­si­bi­li­dade é, portanto, evitar a exclusão de certos grupos de pessoas na rede, como, por exemplo, pessoas com li­mi­ta­ções físicas ou mentais.

O que é aces­si­bi­li­dade digital?

Barreiras são obs­tá­cu­los que di­fi­cul­tam ou impedem a uti­li­za­ção igua­li­tá­ria de ofertas digitais. Embora a cons­ci­en­ti­za­ção sobre aces­si­bi­li­dade em espaços públicos tenha aumentado sig­ni­fi­ca­ti­va­mente nos últimos anos, as barreiras na internet continuam a surgir fre­quen­te­mente de forma não in­ten­ci­o­nal, seja por decisões técnicas, de design ou de conteúdo. Estudos e exemplos práticos mostram que elementos in­te­ra­ti­vos, como me­ca­nis­mos de registro ou segurança, podem ser es­pe­ci­al­mente pro­ble­má­ti­cos. Alguns captchas com ca­rac­te­res dis­tor­ci­dos ou tarefas ex­clu­si­va­mente visuais tornam o acesso de pessoas com de­fi­ci­ên­cias visuais a conteúdos web bem difícil e vão contra os re­qui­si­tos modernos de aces­si­bi­li­dade digital.

Padrões para sites com aces­si­bi­li­dade

O padrão mais im­por­tante para a criação de sites com aces­si­bi­li­dade são as WCAG ou as WCAG 2.2 (Web Content Ac­ces­si­bi­lity Gui­de­li­nes). Trata-se de di­re­tri­zes do W3C, que re­pre­sen­tam o padrão de re­fe­rên­cia in­ter­na­ci­o­nal mais recente para aces­si­bi­li­dade digital. O foco das WCAG 2.2 é prin­ci­pal­mente na melhora da usa­bi­li­dade, uma condução mais clara de teclado e foco, bem como uma interação sim­pli­fi­cada em dis­po­si­ti­vos móveis.

Entre os prin­ci­pais critérios de sucesso das WCAG 2.2 estão, entre outros:

• Foco do teclado visível: elementos in­te­ra­ti­vos devem ser cla­ra­mente re­co­nhe­cí­veis ao navegar pelo teclado.
• Tamanho mínimo dos elementos de controle: áreas de clique e toque devem ser su­fi­ci­en­te­mente grandes para evitar operações in­cor­re­tas.
• Al­ter­na­ti­vas para mo­vi­men­tos de arrastar: funções não devem ser ope­ra­ci­o­nais ex­clu­si­va­mente por meio de arrastar e soltar.
• Evitar entradas re­dun­dan­tes: as in­for­ma­ções não devem ser inseridas mais de uma vez.
• Au­ten­ti­ca­ção acessível: processos de login não devem se basear em tarefas cog­ni­ti­vas difíceis de resolver, como certos captchas.

As WCAG 2.2 são, portanto, uma re­fe­rên­cia central para o de­sen­vol­vi­mento web moderno e formam ao mesmo tempo a base técnica para re­qui­si­tos legais, como no âmbito da LBI (Lei 13.146) e Decreto 5.296

Percepção

Muitos sites incluem anúncios piscantes, as seções de co­men­tá­rios estão pre­en­chi­das com textos em fonte pequena e, às vezes, há música de fundo que pretende sublinhar o ambiente ou tema da página. De­pen­dendo do tipo e grau de limitação, alguns vi­si­tan­tes do seu site podem não perceber to­tal­mente ou de forma alguma esses elementos.

Pessoas cegas navegam, por exemplo, sem estímulos visuais pela internet. Em vez disso, um leitor de tela lê o site. O dis­po­si­tivo transmite os dados legíveis para as tec­no­lo­gias as­sis­ti­vas uti­li­za­das. Uma linha em Braille, por exemplo, pode converter o texto em Braille. Assim, a pessoa percebe o seu site por meio do tato. Uma fer­ra­menta de texto para fala reproduz os conteúdos em formato de áudio. Com essa tec­no­lo­gia, usuários utilizam a audição para processar os conteúdos do site. No exemplo men­ci­o­nado, a música de fundo pode atra­pa­lhar.

Pessoas com de­fi­ci­ên­cia visual menos acentuada, incluindo muitos idosos, captam o conteúdo do seu site com os olhos, mas dependem de uma imagem muito ampliada. Pessoas com dal­to­nismo, por outro lado, não re­co­nhe­cem avisos que são expressos apenas por cores. Pessoas surdas não percebem as in­for­ma­ções de um arquivo somente de áudio e de grande parte dos arquivos de vídeo.

Com­pre­en­são

Usuários muito jovens, idosos ou pessoas com de­fi­ci­ên­cias cog­ni­ti­vas às vezes têm di­fi­cul­dade para entender um texto cheio de termos técnicos modernos ou abre­vi­a­ções não ex­pli­ca­das. Mesmo quando o site exibe conteúdos re­la­ci­o­na­dos te­ma­ti­ca­mente distantes uns dos outros, isso dificulta que muitas pessoas re­co­nhe­çam a relação entre eles.

Interação e navegação

Como cada vez mais pessoas acessam sites por meio de smartpho­nes, é ex­tre­ma­mente frus­trante para elas quando os links não podem ser se­le­ci­o­na­dos com precisão com o dedo. Se o site não está otimizado para smartpho­nes e os links estão em tamanho de fonte pequeno e próximos uns dos outros, isso é muito in­con­ve­ni­ente também para pessoas idosas com mãos trêmulas.

Para pessoas com de­fi­ci­ên­cia física, foram de­sen­vol­vi­das inúmeras fer­ra­men­tas que facilitam o uso do com­pu­ta­dor: para esse fim, algumas fer­ra­men­tas captam os mo­vi­men­tos oculares, enquanto outras tec­no­lo­gias são uti­li­za­das via teclado. Em princípio, um site com aces­si­bi­li­dade deve ser projetado de forma que possa ser avaliado por tais tec­no­lo­gias as­sis­ti­vas: se sua presença on-line não puder ser navegada com elas, po­ten­ci­ais clientes que dependem dessas tec­no­lo­gias não terão chance de usufruir to­tal­mente de seus serviços.

Se os usuários pre­ci­sa­rem preencher um for­mu­lá­rio, como para inscrição em um news­let­ter, não é incomum que ocorram erros. A senha está curta demais ou a data de nas­ci­mento não cor­res­ponde aos pa­râ­me­tros indicados. Portanto, forneça ins­tru­ções claras para a correção de erros. A interação com um site também inclui a navegação. Pessoas que utilizam dis­po­si­ti­vos com tela pequena ou trabalham com ampliação de tela sig­ni­fi­ca­tiva precisam de caminhos de navegação adaptados e dependem de uma estrutura clara e or­ga­ni­zada do site.

Entradas

Espaços para co­men­tá­rios permitem que os usuários deem feedback. Por meio deles, podem expressar suas opiniões sobre um produto ou conteúdo ou interagir com outras pessoas. Pessoas com de­fi­ci­ên­cia visual fre­quen­te­mente usam uma lupa de tela ao escrever no monitor. Com isso, os elementos aparecem sig­ni­fi­ca­ti­va­mente maiores e a distância entre a o espaço de leitura e o campo de entrada aumenta. Portanto, organize os elementos vi­su­al­mente próximos uns dos outros para facilitar essa interação para seus usuários.

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

Se você eliminar barreiras on-line, melhora a usa­bi­li­dade do seu site e, con­se­quen­te­mente, seu ran­que­a­mento no Google. O web design acessível é, portanto, vantajoso também do ponto de vista econômico e requer um esforço adicional mínimo. Além disso, sites com aces­si­bi­li­dade cumprem tanto a Lei Bra­si­leira de Inclusão quanto o Decreto de 2004. Outro fator não menos im­por­tante para as empresas: a aces­si­bi­li­dade digital permite que você alcance um maior público, tornando-se aces­sí­veis a mais pessoas do que sites não aces­sí­veis.

Como criar sites com aces­si­bi­li­dade: dicas e exemplos

Quem deseja criar sites com aces­si­bi­li­dade deve, es­pe­ci­al­mente, revisar a estrutura das in­for­ma­ções e os diversos com­po­nen­tes visuais da presença on-line.

Passo 1: garantir uma estrutura clara de in­for­ma­ções

Estruture seu site de forma clara e utilize uma linguagem amigável ao usuário. Dessa forma, você atrai mais leitores e melhora si­mul­ta­ne­a­mente seu ran­que­a­mento no Google (pois os me­ca­nis­mos de busca também avaliam a le­gi­bi­li­dade dos textos). Se pretende manter um bom SEO, ga­ran­tindo que a ar­qui­te­tura do seu site seja com­pre­en­sí­vel e clara, preste atenção também aos seguintes elementos:

Passo 2: estimular com elementos visuais

Se você puder aumentar as fontes ou alterar suas cores, isso ajuda pessoas com de­fi­ci­ên­cia visual ou dal­to­nismo a re­co­nhe­cer melhor os conteúdos do site. O conteúdo deve se destacar bem do fundo em termos de cor, para facilitar a leitura. Destaque elementos in­te­ra­ti­vos com botões ou marcações coloridas. Por exemplo, quando um link muda de cor ao navegar com o teclado, ao passar o mouse sobre ele ou ao ser clicado. Além das cores, use também outros sinais, como números ou as­te­ris­cos, para trans­mi­tir in­for­ma­ções.

Close

Pessoas que sofrem de crises epi­lép­ti­cas estão em risco quando um site com aces­si­bi­li­dade contém gráficos ou vídeos que piscam mais de três vezes por segundo. Ci­en­tis­tas também des­co­bri­ram que padrões de grades com contornos nítidos e alto contraste podem provocar crises em pessoas com epilepsia fo­tos­sen­sí­vel.

Passo 3: apre­sen­tar in­for­ma­ções de maneira diversa

Leve em conta o design acessível de sites no seu dia a dia. Para a oti­mi­za­ção de me­ca­nis­mos de busca, para fins de RP ou para apre­sen­tar novas ofertas de vendas, você carrega novos conteúdos di­a­ri­a­mente. Facilite o acesso ao ajustar as in­for­ma­ções às ne­ces­si­da­des dos vi­si­tan­tes.

Um com­po­nente fun­da­men­tal da aces­si­bi­li­dade digital, que também de­sem­pe­nha um papel na oti­mi­za­ção de me­ca­nis­mos de busca, é a atri­bui­ção de texto al­ter­na­tivo para imagens. Crawlers e leitores de tela não conseguem avaliar o conteúdo das imagens. Isso vale também para usuários com de­fi­ci­ên­cia visual. O texto al­ter­na­tivo informa, portanto, sobre o conteúdo da imagem. Além disso, vi­si­tan­tes com conexões de internet lentas, em que as imagens carregam len­ta­mente ou não carregam, também se be­ne­fi­ciam dos textos al­ter­na­ti­vos.

Trans­cri­ções e legendas

Um esforço mais extenso é a criação contínua e em tempo hábil de trans­cri­ções e legendas. Com essas fer­ra­men­tas, você pode preparar as in­for­ma­ções de conteúdo de áudio para pessoas surdas. A trans­cri­ção, que reproduz o falado, assim como sons e ruídos em forma de texto, deve ser colocada o mais próximo possível do res­pec­tivo conteúdo de áudio, por exemplo, por meio de um botão com link para o documento.

Legendas facilitam sig­ni­fi­ca­ti­va­mente o en­ten­di­mento de vídeos na web para pessoas com alguma de­fi­ci­ên­cia auditiva. Também usuários que não desejam usar a re­pro­du­ção de som (como, por exemplo, para não incomodar o ambiente com ruídos) se be­ne­fi­ciam dessa função. Pessoas com de­fi­ci­ên­cias cog­ni­ti­vas ou dis­túr­bios com­por­ta­men­tais, como TDAH, assimilam melhor as in­for­ma­ções trans­mi­ti­das por vídeos, de modo se­me­lhante às pessoas com de­fi­ci­ên­cia auditiva, quando podem desligar os ruídos de fundo por meio de uma con­fi­gu­ra­ção do player de vídeo.

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

Pessoas com acuidade visual de menos de 30% são con­si­de­ra­das de­fi­ci­en­tes visuais, e com menos de 2%, pessoas cegas. Elas percebem estímulos visuais de forma limitada ou não percebem. Para que essas pessoas possam entender seu conteúdo de vídeo, deve-se incluir uma trilha de áudio adicional. Nesta trilha, fornecem-se ex­pli­ca­ções sobre com­po­nen­tes visuais, como paisagens ou pessoas, e descrevem-se bre­ve­mente ações visíveis. Coloque tais ex­pli­ca­ções nas pausas de con­ver­sa­ção e som da gravação original, para que as trilhas sonoras não se so­bre­po­nham.

Linguagem simples

A linguagem simples expressa conteúdos de forma muito simples. Ela ajuda pessoas com de­fi­ci­ên­cias cog­ni­ti­vas a entender melhor assuntos complexos. A linguagem simples evita, por exemplo, o uso do modo con­jun­tivo, de sinônimos e de negações. Frases em linguagem simples são curtas e têm apenas uma de­cla­ra­ção de conteúdo cada. Pessoas com li­mi­ta­ções cog­ni­ti­vas têm o mesmo direito à in­for­ma­ção que todas as outras pessoas. Por isso, jornais diários em suas pla­ta­for­mas on-line, como um bom exemplo de sites com aces­si­bi­li­dade, dis­po­ni­bi­li­zam cada vez mais versões de seus artigos em linguagem simples. Ins­ti­tui­ções públicas também utilizam cada vez mais a linguagem simples para textos in­for­ma­ti­vos.

Uma forma menos rigorosa é a chamada linguagem simples, que cor­res­ponde apro­xi­ma­da­mente ao nível de linguagem A2 ou B1 no padrão de ni­ve­la­mento europeu.

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

Leitores de tela e outras tec­no­lo­gias as­sis­ti­vas tornam a aces­si­bi­li­dade na internet possível para muitos. Os programas processam do­cu­men­tos da web da esquerda para a direita e de cima para baixo com­ple­ta­mente. Eles trabalham de forma es­tri­ta­mente linear. Por isso, deve-se separar layout e design. Caso contrário, os leitores de tela processam a página in­cor­re­ta­mente. Contribua para que os usuários possam navegar de forma eficiente em seu site, res­pei­tando as regras básicas a seguir.

Links de navegação rápida e outras abre­vi­a­ções

Leitores de tela trans­mi­tem in­for­ma­ções de texto para softwares de saída de voz e linhas Braille. Para isso, eles leem a página de cima para baixo, isso inclui também elementos re­cor­ren­tes como a barra de navegação, ícones ou links para páginas su­bor­di­na­das. Para que os leitores não repitam essa in­for­ma­ção des­ne­ces­sa­ri­a­mente a cada página aberta, deve-se incluir links de navegação rápida (co­nhe­ci­dos como skip links).

Usuários que navegam apenas com o teclado, pos­si­vel­mente com um acessório bucal, também enfrentam grandes di­fi­cul­da­des se pre­ci­sa­rem clicar dentre muitos elementos. Essas pessoas se be­ne­fi­ciam de um skip link no início da página, que deve ser o mais visível possível:

<a href="#content">Pular navegação</a>
<main id="content">
    <h1>Título Principal</h1>
    <p>Primeiro parágrafo</p>
</main>

Existem skip links que são in­vi­sí­veis no layout, mas o leitor de tela transmite ao usuário a mensagem do texto al­ter­na­tivo “Pular navegação” quando o código é assim:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Pular navegação" width="5"></a>

É im­por­tante que os skip links estejam o mais à frente possível no código. Coloque o texto âncora no início do conteúdo principal:

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

Use os skip links com moderação, pois um excesso pode anular o efeito positivo e fazer com que os usuários tenham que clicar em muitos elementos. Uma solução mais elegante é o uso de ARIA Landmarks e uma boa es­tru­tu­ra­ção do documento. Recomenda-se o uso de elementos HTML5.

Outra ajuda seria um índice no início do documento, que re­di­re­ci­ona os usuários para as res­pec­ti­vas seções via links internos. Leitores de tela modernos leem as res­pec­ti­vas manchetes. Ao usar manchetes claras e bem es­tru­tu­ra­das, você aumenta a le­gi­bi­li­dade tanto para me­ca­nis­mos de busca quanto para tec­no­lo­gias as­sis­ti­vas.

Tabelas de dados em vez de tabelas de layout

Para sites com aces­si­bi­li­dade de acordo com as di­re­tri­zes do W3C, utilize ide­al­mente apenas tabelas de dados. Leitores de tela têm menos problemas com esse formato para re­trans­mi­tir in­for­ma­ções de forma in­te­li­gí­vel após a conversão. Tabelas de layout dão uma estrutura visual à página, mas di­fi­cul­tam para os leitores de tela a in­ter­pre­ta­ção clara do conteúdo.

Defina tabelas de layout apenas com elementos simples: TABLE, TR e TD (res­pec­ti­va­mente: tabela, linha e célula). Utilize elementos es­tru­tu­ran­tes para criar as­so­ci­a­ções lógicas entre células, assim o leitor de tela lê a tabela de layout como uma tabela de dados. Você contradiz isso di­re­ta­mente ao remover de­ter­mi­na­dos elementos da tabela da árvore de aces­si­bi­li­dade.

Para seus sites, use o código role=”none” como no exemplo. Isso se aplica à tabela e aos seus elementos filhos. Se você aninhar tabelas, deve definir ambos elementos dessa forma.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Exemplo de texto <abbr title="por exemplo">p.ex.</abbr> sobre ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Site com aces­si­bi­li­dade: lista de ve­ri­fi­ca­ção

Quando você concluir a criação dos seu site com aces­si­bi­li­dade, consulte nossa lista de ve­ri­fi­ca­ção para garantir que você tenha con­si­de­rado os fatores im­por­tan­tes.

✓ Estrutura de in­for­ma­ções bem or­ga­ni­zada e com­pre­en­sí­vel

✓ Uso de linguagem simples e com aces­si­bi­li­dade

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

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

✓ Destaques coloridos para conteúdos im­por­tan­tes

✓ Alto contraste

✓ Suporte para leitores de tela

Fer­ra­men­tas gratuitas para a criação de sites com aces­si­bi­li­dade

Existe uma série de fer­ra­men­tas di­fe­ren­tes que podem ajudar na cons­tru­ção de uma presença na web acessível. A seguir, apre­sen­ta­mos algumas das fer­ra­men­tas mais co­nhe­ci­das:

• Ac­ces­si­bi­lity Checker: com a ajuda da aplicação Ac­ces­si­bi­lity Checker, você pode testar gra­tui­ta­mente a con­for­mi­dade WCAG do seu site com aces­si­bi­li­dade no espaço de língua inglesa.
• Si­teim­prove: o Ac­ces­si­bi­lity Checker da Si­teim­prove oferece um check-up gratuito para sites com aces­si­bi­li­dade, que é enviado por e-mail.

Conclusão: aces­si­bi­li­dade digital melhora a UX para todos

Ao tornar seu site acessível, você aumenta a usa­bi­li­dade e melhora a ex­pe­ri­ên­cia do usuário. Usuários com dis­po­si­ti­vos móveis, pessoas com de­fi­ci­ên­cias físicas ou cog­ni­ti­vas, idosos e usuários inex­pe­ri­en­tes acharão seu site mais fácil de navegar. Es­tru­tu­rar cla­ra­mente sua presença na web e apre­sen­tar in­for­ma­ções de forma inclusiva também melhora seu ranking nos me­ca­nis­mos de busca e aumenta o tempo de per­ma­nên­cia dos vi­si­tan­tes. Embora seja ne­ces­sá­rio um certo grau de trabalho adicional e testes, o esforço compensa: a aces­si­bi­li­dade na internet beneficia a todos.