Acessibilidade na Internet
Tags: acessibilidade, web, site, internet
Published: 2021-05-03 07:31:10

Acessibilidade na Internet significa que pessoas com deficiência, dificuldades motoras ou cognitivas, também possam, com autonomia e segurança, utilizar a _web_, tendo acesso à informação e à interação, podendo entender, navegar, interagir e contribuir para a _web_.

Visa tornar acessível qualquer conteúdo disponível nos _sites_ para pessoas com variadas deficiências, tais como vídeo, áudio, formulário, imagem, dentre outros.

Objetivando a universalidade, o acesso a todos, independentemente de deficiência, a _**W**orld **W**ide **W**eb_, ou simplesmente **_Web_**, desde 1991, quando foi criada por Tim Berners Lee, também criador do _W3C_, vem sendo utilizada nas mais diversas áreas, como: educação, saúde, comércio, serviços públicos e privados, etc. [(W3C BRASIL, 2015)](#w3c_brasil2015)

> O poder da _web_ está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial. — Tim Berners-Lee

A **_W3C_** (**W**orld **W**ide **W**eb **C**onsortium), consórcio internacional em que organizações filiadas, uma equipe (tempo integral) e o público trabalham em parceria para desenvolverem padrões para a _web_, disponibilizando-os de forma aberta e gratuita, visa garantir a evolução da _web_ e o crescimento de _interfaces_ interoperáveis. [(W3C BRASIL, 2015)](#w3c_brasil2015)

> É essencial que a _web_ seja acessível, de modo a prover igualdade de acesso e de oportunidades para pessoas com diferentes capacidades. A acessibilidade sustenta a inclusão social de pessoas com deficiência, idosas, residentes em áreas rurais, em países em desenvolvimento, entre outras. [(W3C BRASIL, 2015)](#w3c_brasil2015).

Diante desta necessidade de acessibilidade na Internet, o presente artigo busca apresentar como a população brasileira está distribuída no tocante às deficiências; quais são as diretrizes da _W3C_, órgão de prestígio internacional; o quanto essa temática é abordada de uma maneira geral em determinado nicho do meio acadêmico e em livros; e as práticas e diretrizes em evidências adotadas nos setores público e privado.    


### <a id="listaConteudo"></a> Lista de conteúdo:

1. [Deficiências mais comuns](#deficienciasComuns)
2. [Censo 2010: Pessoas com Deficiência](#censo)
3. [Diretrizes de Acessibilidade para Conteúdo Web (WCAG)](#wcag)
4. [e­MAG (Modelo de Acessibilidade em Governo Eletrônico)](#emag)
5. [GAIA: _Sites_ inclusivos a pessoas com autismo](#gaia)
6. [Projetando para acessibilidade](#projAcessibilidade)
7. [Avaliadores automáticos de acessibilidade na _web_](#avaliadores)
8. [Crescimento da temática acessibilidade](#crescimentoTematica)
9. [Considerações](#consideracoes)
10. [Referências](#referencias)


### Lista de vídeos:

1. [Acessibilidade na Web para Deficientes Visuais](https://www.youtube.com/watch?v=n0ISO5qe1Ao) ([REIS, 2011](#reis2011))
2. [Acessibilidade Web Cognitiva](https://www.youtube.com/watch?v=igGOeem6y4w) ([PAGANI, 2016](#pagani2016))
3. [Entendendo o WCAG - Recomendação 1.1 - Alternativas Textuais](https://www.youtube.com/watch?v=wjZEPeTwVL4) ([SALES, 2017a](#sales2017a))
4. [Acessibilidade Toolkit: WCAG de forma simples](https://www.youtube.com/watch?v=GBipzZwXxZg) ([SALES, 2019](#videoToolkit))
5. [Palestra: Acessibilidade Toolkit - Entendendo de uma vez por todas a WCAG](https://www.youtube.com/watch?v=s2IKdGTbyIA) ([SALES, 2018](#videoPalToolkit))



## <a id="deficienciasComuns"></a> Deficiências mais comuns 

Abaixo são apresentadas as deficiências mais presentes e algumas formas de remover as barreiras encontradas pelos usuários que as possuem:

1. **Visão** (cegueira de cores, baixa visão, etc.):
   * Evitar usar texto em imagem, pois dificultará a visualização do conteúdo em ampliadores de tela; e caso utilize, o texto deve ser replicado dentro de _tag html_, para que leitores de tela interpretem corretamente;
   * Utilizar escala de cores corretas;
   * Não sobrescrever fontes e cores de fundos, permitindo que o usuário possa alterá-las caso deseje;
   * Evitar o uso de _tag style_ e utilizar o código _css_ em folhas de estilo, facilitando a captura de informações pelos leitores de tela.

2. **Audição** (surdez ou audição debilitada):
   * Adicionar legenda e transcrições para conteúdo multimídia;
   * Linguagem de sinais \(exemplo: [vlibras](https://www.gov.br/governodigital/pt-br/vlibras)\).

3. **Deficiência Motora** (incapacidade de utilizar _mouse_, tempo de reposta lento, etc.):
   * Possibilitar navegação pelas funcionalidades por meio do teclado;
   * Páginas toleráveis a erros, com solicitação de confirmação, para que não sejam executadas operações acionadas acidentalmente;
   * Adição de atalhos;
   * Permitir uso de [tecnologias assistivas](http://webaim.org/articles/motor/assistive).

4. **Cognitivo** (dislexia, déficit de atenção, incapacidade de se concentrar em grandes quantidades de informações, etc.):
   * Deixar as operações simples e breves, evitando operações longas;
   * Informar onde o usuário está e para onde está indo na "navegação";
   * Evitar elementos que causem distração.


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="censo"></a> Censo 2010: Pessoas com Deficiência

De acordo com último Censo realizado em 2010, pelo Instituto Brasileiro de Geografia e Estatística (IBGE), estima-se que 45.606.048 pessoas tenham algum tipo de deficiência, seja visual, auditiva, motora, mental ou intelectual, no qual corresponde a uma parcela de 23,9% da população brasileira à época da amostra. E dentre esse percentual, a deficiência visual apresentou a maior ocorrência, 18,6% da população; seguido por deficiência motora com 7% da população; terceiro a deficiência auditiva, com 5,10%; e com menor ocorrência, deficiência mental e intelectual, somando as duas 1,40%. [(MEZZAROBA et al., 2018)](#mezzaroba2018)[(IBGE, 2012)](#ibge2012)

|     Idade       | Visual | Auditiva | Motora | Mental ou Intelectual |
|---------------- |:-----:|:----:|:----:|:----:|
|0 a 14 anos      | 5,3%  | 1,3% | 1,0% | 0,9% | 
|15 a 64 anos     | 20,1% | 4,2% | 5,7% | 1,4% |
|Acima de 65 anos | 49,8% | 25,6%| 38,3%| 2,9% |


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="wcag"></a> Diretrizes de Acessibilidade para Conteúdo Web (WCAG)

Objetivando tornar a _Web_ acessível, o **W3C** criou em 1999 o _**W**eb **A**ccessibility **I**nitiative (**WAI**)_, Iniciativa para a Acessibilidade na _Web_, formado por grupos de trabalho voltados para o desenvolvimento de diretrizes ligadas à garantia da acessibilidade do conteúdo _Web_ às pessoas com deficiência e às que acessam a rede em condições especiais. Assim surgiram as diretrizes de acessibilidade para conteúdo _Web_, denominada _**W**eb **C**ontent **A**ccessibility **G**uidelines (WCAG)_, sendo até hoje a principal referência em acessibilidade _Web_. [(SOUSA; LAZZARIN, 2014)](#sousaLazzarin2014)

A _WCAG_, reconhecida pela _**ISO** (**I**nternational **O**rganization for **S**tandardization)_, Organização Internacional para Padronização, como um padrão internacional para acessibilidade _Web_, define um conjunto de orientações para: estrutura, conteúdo e apresentação das páginas _Web_. [(W3C BRASIL, 2020)](#w3c_brasil2020)

A versão inicial do _WCAG_ (1.0) foi disponibilizada em 1999 e a segunda em 2008 (2.0); a terceira e apresentada nesse documento é a 2.1, de 2018, no qual teve melhorias e adequações incluindo acessibilidade para conteúdos em dispositivos móveis. Recentemente foi lançada a 2.2, mas ainda não foi traduzida para o Português.

O _WCAG_ 2.1 está subdividido em 4 princípios, 13 recomendações (diretrizes) e 78 critérios de sucesso [TOOLKIT 2020](#toolkit2020); e para esses critérios associados às diretrizes há uma coleção de técnicas de sucesso. 


### Camadas de Orientação

![Estrutura do _WCAG_: Princípios seguido por recomendações e critérios de sucesso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab66mkouo5nj231g9sm1.png)
_Fonte:_ [(SAMPAIO, 2018)](#sampaio2018)

#### Princípios com as respectivas Recomendações

Os princípios constituem a base da acessibilidade na _Web_ e abaixo dos princípios estão as diretrizes (recomendações), no qual são objetivos básicos que devem ser alcançados para tornar o conteúdo mais acessível aos usuários.

1. **[Percebível](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#perceivable):**
   > As informações e os componentes da _interface_ do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário. [(W3C BRASIL, 2018)](#w3c_brasil2018)
      * 1.1 [Alternativas em texto] (https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#text-alternatives)
      * 1.2 [Mídias com base em tempo] (https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#time-based-media)
      * 1.3 [Adaptável] (https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#adaptable)
      * 1.4 [Discernível] (https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#distinguishable)

2. **[Operável](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#operable):**
   > Os componentes de _interface_ de usuário e a navegação devem ser operáveis. [(W3C BRASIL, 2018)](#w3c_brasil2018)
      * 2.1 [Acessível por teclado](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#keyboard-accessible)
      * 2.2 [Tempo suficiente](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#enough-time)
      * 2.3 [Convulsões e reações físicas](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#seizures-and-physical-reactions)
      * 2.4 [Navegável](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#navigable)
      * 2.5 [Modalidades de entrada](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#input-modalities)

3. **[Compreensível](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#understandable):**
   > A informação e a operação da _interface_ de usuário devem ser compreensíveis. [(W3C BRASIL, 2018)](#w3c_brasil2018)
      * 3.1 [Legível](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#readable)
      * 3.2 [Previsível](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#predictable)
      * 3.3 [Assistência de entrada](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#input-assistance)

4. **[Robusto](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#robust):**
   > O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo tecnologias assistivas. [(W3C BRASIL, 2018)](#w3c_brasil2018)
      * 4.1 [Compatível](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#compatible)


#### Critérios de sucesso

Cada diretriz vai ter um ou mais critério de sucesso testável e cada critério terá um nível de conformidade associado, no qual pode ser: A (o mais baixo), AA (intermediário) ou AAA (o mais elevado).

* **A** - Solução mais simples, com pouco esforço;
* **AA** - Solução intermediária;
* **AAA** - Solução mais complexa, exigindo mais esforço.

> Note-se que até mesmo o conteúdo que está em conformidade com o nível mais elevado (AAA) não estará acessível a pessoas com todos os tipos, graus ou combinações de deficiências, particularmente nas áreas da linguagem cognitiva e da aprendizagem. Os autores são encorajados a considerar a totalidade das técnicas, incluindo as técnicas de tipo sugerida, assim como a procurar orientação relevante sobre as atuais boas práticas, de forma a garantir que o conteúdo da _Web_ seja acessível, tanto quanto possível, a esta comunidade. [(W3C BRASIL, 2018)](#w3c_brasil2018)


#### Técnicas

Para cada uma das diretrizes e critérios de sucesso existentes no _WCAG_, há uma grande variedade de técnicas, constituídas de descrição, exemplos, código fonte e testes. Elas têm caráter informativo e enquadram-se em duas categorias [(W3C BRASIL, 2018)](#w3c_brasil2018): 

   * **Necessária:**
     Satisfazem os critérios de sucesso; é fundamental.
     
   * **Sugerida:**
     Vão além do que é exigido pelos critérios de sucesso individuais e permitem aos autores um melhor cumprimento das diretrizes. 


### Acessibilidade _Toolkit_

O _WCAG_ é um guia completo, bem definido e documentado, repleto de exemplos e casos de sucesso de como aplicar as soluções, mas não é tão simples de entender e se aprofundar. Isto, pois apresenta textos rebuscados e maçantes. [(SALES, 2020)](#sales2020)

Diante disso, [Sales (2020)](#sales2020), após vários anos trabalhando com acessibilidade, percebeu que as pessoas tinham dificuldades de entender tanto as explicações das diretrizes, como também entender a fundo os critérios de sucesso.

O objetivo foi criar um material fácil de usar e simples de compreender para a maioria dos usuários, independente de suas habilidades. A ideia era que quaisquer pessoas "batessem o olho" no cartão e conseguissem identificar o que deveria ser feito. [(SALES, 2020)](#sales2020)

Foi aí que surgiu **Acessibilidade _Toolkit_**, em formato de cartões, para facilitar o entendimento do _WCAG_. 

O material pode ser usado de formas distintas. Inicialmente foi idealizado utilizá-lo em exercícios de _card sorting_, onde as pessoas envolvidas no desenvolvimento de projetos digitais poderiam facilmente identificar _gaps_ e atividades que precisariam contemplar, mas na prática a ferramenta, que possui formato de cartões, pode ser utilizada como fonte rápida de consulta de diretrizes _WCAG_, disseminação de conhecimento, facilitador de discussões, identificador de funcionalidades ou até mesmo como um _checklist_. [(SALES, 2020)](#sales2020).

E caso não queira imprimir os cartões, tem o [Guia de Consulta Rápida WCAG](https://guia-wcag.com).

Abaixo segue um comparativo entre um texto original dos critérios de sucesso do _WCAG_ e suas respectivas adaptações.

Os critérios apresentados são: 3.1.5 (Nível de leitura) e 2.4.5 (Várias formas).

![Comparativo entre dois critérios de sucesso do _WCAG_ e suas respectivas adaptações no Toolkit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jzp7a3wx9w8i73oxdoo.jpeg)
_Fonte:_ [(SALES, 2020)](#sales2020)

 
[Voltar para lista de conteúdo](#listaConteudo)



## <a id="emag"></a> e­MAG (Modelo de Acessibilidade em Governo Eletrônico)

> Cada vez mais, órgãos dos governos federais, estaduais e municipais têm utilizado a _web_ para prover diversas categorias de serviços para os cidadãos. ([ARNAUT, 2017](#arnaut2017) apud REZENDE, 2007)

Diante disso:

> O governo brasileiro, comprometido com a inclusão, buscou, através da elaboração do Modelo de acessibilidade do governo eletrônico, facilitar o acesso para todas as pessoas às informações e serviços disponibilizados nos sítios e portais do governo. [(BRASIL, 2014)](#brasil2014)

O eMAG, ou [e-MAG](http://emag.governoeletronico.gov.br), foi inicialmente desenvolvido em 2004 e atualmente se encontra na versão 3.1, de 2014. O modelo atual está em conformidade com os padrões internacionais e é uma versão especializada do documento internacional _WCAG (Web Content Accessibility Guidelines: Recomendações de Acessibilidade para Conteúdo Web)_, no qual não exclui quaisquer boas práticas de acessibilidade do _WCAG_. [(BRASIL, 2014)](#brasil2014)

O modelo possui 45 (quarenta e cinco) recomendações de fácil entendimento, no qual mantém correlação com os _Critérios de Sucesso_ do _WCAG_ [(ARNAUT, 2017)](#arnaut2017), distribuídas em 6 (seis) seções:

1. **Marcação:** 9 recomendações específicas com foco na marcação, no conjunto de _tags_ aplicadas nos textos inseridos nas páginas _HTML_;

2. **Comportamento** - _Document Object Model (DOM)_**:** 7 recomendações relacionadas com o comportamento das páginas (atualização, redirecionamento automático, _scripts_, conteúdos dinâmicos, dentre outros);

3. **Conteúdo / Informação:** 12 recomendações voltadas para o conteúdo das páginas _HTML_ e das informações contidas, como títulos e _links_ com textos claros, curtos e significativos;  dentre outros;

4. **Apresentação / _Design_:** 4 recomendações de _design_ de páginas, como _layout_, redimensionamento de textos, contraste, entre outros;

5. **Multimídia:** 5 recomendações para inserção de elementos multimídia (áudio e vídeo) nas páginas dos _sites_, como controles de áudio e de animação, audiodescrição, legenda, dentre outros;

6. **Formulário:** 8 recomendações para formulários _HTML_, tais como: instruções para a entrada de dados, _CAPTCHA_ acessível, alternativas textuais para botões em formato de imagens, ordem lógica de navegação/tabulação, dentre outros.


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="gaia"></a> GAIA: Sites inclusivos a pessoas com autismo

Em razão das recomendações gerais de acessibilidade nem sempre atender às necessidades específicas das pessoas com Transtorno do Espectro do Autismo, devido à diversidade de características entre eles, e também com o objetivo de equalizar aspectos psicopedagógicos sobre o autismo com requisitos tecnológicos para desenvolver soluções acessíveis, Talita Pagani __*__, durante sua dissertação de Mestrado, desenvolveu um conjunto de 28 recomendações de acessibilidade _web_ embasadas em 10 princípios com foco nos aspectos do autismo, abordando desde a escrita de conteúdo até recursos de programação, denominando-o [GAIA](https://gaia.wiki.br) (**G**uia de **A**cessibilidade de **I**nterfaces Web com foco em aspectos do **A**utismo) [(PAGANI, 2019)](#pagani2019).

Este conjunto de recomendações acerca de _design_ digital inclusivo, que está disponível de forma [aberta e colaborativa](https://github.com/talitapagani), traz uma abordagem multidisciplinar de como desenvolver _websites_ e aplicativos mais acessíveis.


[g1]: https://gaia.wiki.br/vocabulario-visual-e-textual/cores
[g2]: https://gaia.wiki.br/vocabulario-visual-e-textual/textos
[g3]: https://gaia.wiki.br/vocabulario-visual-e-textual/legibilidade
[g4]: https://gaia.wiki.br/vocabulario-visual-e-textual/compatibilidade-mundo-real
[g5]: https://gaia.wiki.br/customizacao/visual
[g6]: https://gaia.wiki.br/customizacao/informacional
[g7]: https://gaia.wiki.br/customizacao/interfaces-flexiveis
[g8]: https://gaia.wiki.br/customizacao/modo-leitura
[g9]: https://gaia.wiki.br/engajamento/eliminar-distracoes
[g10]: https://gaia.wiki.br/engajamento/interface-minimalista
[g11]: https://gaia.wiki.br/engajamento/organizacao-visual
[g12]: https://gaia.wiki.br/engajamento/forneca-instrucoes
[g13]: https://gaia.wiki.br/representacoes-redundantes/multiplos-formatos
[g14]: https://gaia.wiki.br/representacoes-redundantes/equivalentes-textuais
[g15]: https://gaia.wiki.br/representacoes-redundantes/legendas
[g16]: https://gaia.wiki.br/multimidia/mutiplas-midias
[g17]: https://gaia.wiki.br/multimidia/ampliacao-de-imagens
[g18]: https://gaia.wiki.br/multimidia/evite-sons-perturbadores
[g19]: https://gaia.wiki.br/visibilidade-do-estado-do-sistema/instrucoes-de-interacao
[g20]: https://gaia.wiki.br/visibilidade-do-estado-do-sistema/reverter-acoes
[g21]: https://gaia.wiki.br/visibilidade-do-estado-do-sistema/numeros-de-tentativas
[g22]: https://gaia.wiki.br/reconhecimento-e-previsibilidade
[g23]: https://gaia.wiki.br/reconhecimento-e-previsibilidade/aparencia-clicavel
[g24]: https://gaia.wiki.br/reconhecimento-e-previsibilidade/feedback-de-interacao
[g25]: https://gaia.wiki.br/navegabilidade/navegacao-simples
[g26]: https://gaia.wiki.br/navegabilidade/evitar-redirecionamentos
[g27]: https://gaia.wiki.br/resposta-as-acoes/confirmacao-de-acoes
[g28]: https://gaia.wiki.br/interacao-com-tela-sensivel-ao-toque


### Princípios

1. **Vocabulário Visual e Textual:**
   * [G01][g1] (Cores); 
   * [G02][g2] (Textos);
   * [G03][g3] (Legibilidade);
   * [G04][g4] (Compatibilidade com mundo real).
   
2. **Customização:**
   * [G05][g5] (Customização visual);
   * [G06][g6] (Customização informacional);
   * [G07][g7] (Interfaces flexíveis);
   * [G08][g8] (Modo de leitura).
   
3. **Engajamento:**
   * [G09][g9] (Eliminar distrações);
   * [G10][g10] (Interface minimalista);
   * [G11][g11] (Organização visual);
   * [G12][g12] (Forneça instruções).
   
4. **Representações Redundantes:**
   * [G13][g13] (Múltiplos formatos);
   * [G14][g14] (Equivalentes textuais);
   * [G15][g15] (Legendas).
   
5. **Multimídia:**
   * [G16][g16] (Múltiplas mídias;
   * [G17][g17] (Ampliação de imagens);
   * [G18][g18] (Evite sons perturbadores).
   
6. **Visibilidade do Estado do Sistema:**
   * [G19][g19] (Instruções de interação);
   * [G20][g20] (Reverter ações);
   * [G21][g21] (Número de tentativas).
   
7. **Reconhecimento e Previsibilidade:**
   * [G22][g22] (Consistência);
   * [G23][g23] (Aparência clicável);
   * [G24][g24] (_Feedback_ de interação).
   
8. **Navegabilidade:**
   * [G25][g25] (Navegação simples);
   * [G26][g26] (Evitar redirecionamentos).
   
9. **Resposta às Ações:**
   * [G27][g27] (Confirmação de ações).
   
10. **Interação com Tela Sensível ao Toque:**
   * [G28][g28] (Sensibilidade adequada).


__*__ _Talita também é membro do grupo de especialistas em Acessibilidade Web do W3C Brasil._


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="projAcessibilidade"></a> Projetando para acessibilidade

Karwai Pun, _designer_ de interação, juntamente com sua equipe de acessibilidade do _Home Office Digital_, empresa governal do Reino Unido, criou 6 cartazes do que fazer e não fazer com o propósito de abordar a acessibilidade digital do ponto de vista do _design_.

Os pôsteres, que estão disponibilizados de forma [aberta e colaborativa](https://github.com/UKHomeOffice/posters
), por meio da licença _[Creative Commons BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/3.0/br)_, são boas práticas de _design_ para acessibilidade, uma orientação geral, diretrizes gerais, sem a presença de textos excessivamente prescritivos, abordando os usuários das áreas: baixa visão, surdez, com deficiência auditiva, dislexia, deficiência física ou motora, espectro do autismo e de leitores de tela.

Em cada pôster são informadas 10 dicas divididas equalitariamente em _"o que fazer"_  e _"o que não fazer"_. ([KARWAI, 2016](#karwai2016)) ([SALES, 2017b](#sales2017b)) __*__


[png-espectro_autista]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmm1h4ut4kn32r115x83.png "Transtorno do espectro autista"
[png-leitor_tela]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j640z99yn3sxu7ldudym.png "Leitores de tela"
[png-baixa_visao]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qjzza3v3ix8vhjjz82s.png "Baixa visão"
[png-def_fisica]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioxs9mp8p4fzl3lq2ktm.png "Deficiência física ou motora"
[png-def_auditiva]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duxh28v5tvkxtfi0pycq.png "Deficientes auditivos ou surdos"
[png-dislexia]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1cz9k4p24r4yeyun69m.png "Dislexia"


|   |   |   |
|---|---|---|
| ![Imagem: Projetando para usuários com transtorno do espectro autista][png-espectro_autista] | ![Imagem: Projetando para usuários de leitores de tela][png-leitor_tela] | ![Imagem: Projetando para usuários com baixa visão][png-baixa_visao] |
| ![Imagem: Projetando para usuários com deficiência física ou motora][png-def_fisica] | ![Imagem: Projetando para usuários que são deficientes auditivos ou surdos][png-def_auditiva] | ![Imagem: Projetando para usuários com dislexia][png-dislexia] |


### Projetando para:

**1\. Usuário com transtorno do espectro autista:**

| Fazer | Não fazer |
| ----- | ----- |
| use cores simples | use cores contrastantes brilhantes |
| escreva de forma clara e simples | usar figuras de linguagem ou expressões idiomáticas |
| usar frases e marcadores simples | usar grandes blocos de textos |
| criar botões descritivos — por exemplo, “anexar arquivos” | criar botões vagos ou imprevisíveis — por exemplo, "clique aqui" |
| construir _layouts_ simples e consistentes | construir _layouts_ complexos e desordenados |

[Visualizar pôster][png-espectro_autista]


**2\. Usuário de leitor de tela:**

| Fazer | Não fazer | 
| ----- | ----- | 
| descrever imagens e fornecer transcrições para vídeo | mostrar informações apenas em imagem ou vídeo |
| construir um _layout_ linear e lógico | espalhar conteúdo por toda a página |
| estrutura de código baseado em _HTML5_ | estrutura dependente do tamanho do texto e do posicionamento |
| construir para uso apenas do teclado | forçar uso do _mouse_ ou da tela |
| escrever _links_ e títulos autodescritivos | escrever _links_ e títulos não informativos — por exemplo, "clique aqui" |

[Visualizar pôster][png-leitor_tela]


**3\. Usuário com baixa visão:**

| Fazer | Não fazer |
| ----- | ----- |
| usar bons contrastes e um tamanho de fonte legível | use baixo contraste e tamanho de fonte pequeno |
| publicar todas as informações diretamente em páginas HTML | "esconder" informações em arquivos para _download_ |
| usar combinação de cores, formas e texto | usar apenas cor para transmitir significado |
| construir _layout_ linear e lógico garantindo boa leitura em ampliações | espalhar conteúdo por toda a página e forçar usuário a rolar a tela em ampliações |
| construir botões e notificações dentro de um contexto | separar ações do seu contexto |

[Visualizar pôster][png-baixa_visao]


**4\. Usuário com deficiência física:**

| Fazer | Não fazer |
| ----- | ----- |
| criar grandes áreas clicáveis | necessidade de precisão |
| espaçamento entre campos de formulários | agrupamento de interações próximas |
| projetar para usar apenas teclado ou voz | conteúdo dinâmico que requer muito movimento do mouse |
| projetar para telas móveis e tocáveis em mente | exibir mensagens em um curto período de tempo |
| fornecer atalhos | cansar usuários com muita digitação e rolagem |

[Visualizar pôster][png-def_fisica]


**5\. Usuário com deficiência auditiva ou surdez:**

| Fazer | Não fazer |
| ----- | ----- |
| escreva de forma clara e simples | usar figuras de linguagem ou expressões idiomáticas |
| usar legendas e/ou fornecer transcrições para vídeos | usar conteúdo apenas em áudio ou vídeo |
| construir _layouts_ simples e consistentes | construir _layouts_ complexos e desordenados |
| dividir o conteúdo com subtítulos, imagens e vídeos | construir longos blocos de conteúdo |
| permitir que o usuário escolha o seu melhor meio e comunicação | não permita que o telefone seja o único meio de comunicação para usuários |

[Visualizar pôster][png-def_auditiva]


**6\. Usuário com dislexia:**

| Fazer | Não fazer |
| ----- | ----- |
| Usar imagens e diagramas para acompanhar texto | use grandes blocos de texto |
| alinhe textos a esquerda e manter a consistência do _layout_ | sublinhar palavras, usar itálico e escrever em maiúsculas |
| considere produzir materiais em outros formatos — por exemplo: áudio e vídeo | forçar usuários a lembrar coisas de páginas anteriores — forneça lembretes e avisos |
| mantenha o conteúdo curto, claro e simples | depender de ortografia correta e precisa — forneça autocorreção ou sugestões |
| permitir que os usuários alterem o contraste entre plano de fundo e texto | colocar muita informação em um só lugar |

[Visualizar pôster][png-dislexia]

__*__ _Tradução dos cartazes para o Português realizada por Marcelo Sales_ 


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="avaliadores"></a> Avaliadores automáticos de acessibilidade na _web_

Avaliar manualmente todas as páginas de um _site_ ou portal é uma tarefa cansativa, demorada, dependendo dos casos chegando a ser inviável. Por isso a existência dos avaliadores automáticos. São inúmeros os existentes; em [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools) a _w3.org_ apresenta uma lista com inúmeras ferramentas de avaliação de acessibilidade.
  
> A avaliação de acessibilidade na _web_ é um processo que verifica o quão bem as aplicações podem ser acessadas, de forma satisfatória, por pessoas com diferentes deficiências. Essa avaliação busca indicar o quanto acessível é uma aplicação _web_, além de apontar os problemas para a aplicação de correções. [(ARNAUT, 2017)](#arnaut2017)

Abaixo são apresentadas algumas ferramentas automáticas gratuitas para avaliação de acessibilidade na _WEB_:

| Ferramenta      | Critério         |
|-----------------|------------------|
| [ASES](https://asesweb.governoeletronico.gov.br)      | eMAG |
| [TAW](http://www.tawdis.net)                          | WCAG |
| [WEB accessibility](https://www.webaccessibility.com) | WCAG |


Dentre estas ferramentas, o ASES (Avaliador e Simulador de Acessibilidade em Sítios), disponibilizada para _WEB_ e também _Desktop_, permite avaliar, simular e corrigir a acessibilidade de páginas, sítios e portais, seguindo as recomendações do Modelo de Acessibilidade em Governo Eletrônico (eMAG); foi desenvolvido em parceria entre o Departamento de Governo Eletrônico (DGE) e o Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul (IFRS).

> Os resultados das avaliações realizadas pelas ferramentas automáticas são apresentados na forma de um relatório que detalha as áreas problemáticas no sítio _web_. [(ARNAUT, 2017)](#arnaut2017)


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="crescimentoTematica"></a> Crescimento da temática acessibilidade

[Sousa e Lazzarin (2014)](#sousaLazzarin2014), em _A questão da acessibilidade digital na literatura dos anais do ENANCIB_, investigaram a expansão de temáticas emergentes dentro do cenário da Ciência da Informação (CI), como a Acessibilidade Digital, focando nos trabalhos publicados nos Encontros Nacionais de Pesquisa e Pós-Graduação em CI (ENANCIB), período de 1994 à 2012, utilizando uma abordagem qualiquantitativa, e os resultados revelaram que nos últimos anos da pesquisa houve um crescimento exponencial na publicação de trabalhos com a temática acessibilidade.

| Trabalhos publicados   | 1994 à 1997 | 1998 à 2001 | 2002 à 2005 | 2006 à 2009 | 2010 à 2012 |
|----------------------- | ----------- | ----------- | ----------- | ----------- | ----------- |
| Quantidade             |           0 |           2 |           3 |          15 |          21 |


Por meio da ferramenta [_Books Ngram Viewer_](https://books.google.com/ngrams) da _Google_, utilizando um alcance maior, de 1990 à 2019, é possível visualizar uma crescente nas ocorrências do termo _"web accessibility"_ encontrados em livros no idioma Inglês (EUA) *.

![Ocorrências do termo "web accessibility" encontrado em livros no idioma Inglês (EUA) de 1990 à 2019 na ferramenta Books Ngram Viewer do Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6rp8w56v689bs6bi9mx.png)

* _No momento da pesquisa não tinha disponível o idioma Português_.


Agora utilizando as palavras em Português ("acessibilidade + web") e em outra ferramenta do _Google_, seu [buscador](www.google.com.br), foi possível observar a ocorrência em torno de 46 milhões de sítios.

![Ocorrências das palavras acessibilidade + web no buscador do Google: mais de 46 milhões](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxfl1trly4zekyzffkm7.png)

Observado os dados acima seria de se esperar um crescimento na implantação da acessibilidade nos sítios, já que temos muitos materiais abordado o assunto; mas na prática não é o que ocorre.

_BigData Corp_ e _Movimento Web para Todos_ visitaram em abril de 2020 os 14,65 milhões de endereços ativos da _web_ brasileira na época, com foco na experiência do usuário com algum tipo de deficiência, para avaliar os níveis de acessibilidade, comparado-os com os resultados da análise anterior realizada em agosto de 2019, e obtiveram resultados nada satisfatórios. [(WEB PARA TODOS, 2020)](#webParaTodos2020)

> Para este estudo foram escolhidos três recursos de páginas _Web_: imagens, _links_ e formulários, que se tornam barreiras ao acesso se não aplicados corretamente. Imagens sem descrição são barreiras para pessoas cegas conseguirem compreender o conteúdo da foto ou figura publicada. Formulários com problemas de acessibilidade dificultam o acesso de pessoas cegas e também de pessoas com mobilidade reduzida que não conseguem usar _mouse_. A verificação de _markup_ do padrão do _W3C_ possibilita encontrar erros na estrutura da página que eventualmente trazem barreiras para pessoas com deficiência. Vale lembrar que outras barreiras não foram verificadas nesta pesquisa e podem estar presentes nas páginas. [(WEB PARA TODOS, 2020)](#webParaTodos2020)


Abaixo seguem as estatísticas de alguns dos resultados apurados:

| Categoria analisada                  | ago/2019       | ago/2019       | abr/2020       | abr/2020       |
|--------------------------------------|----------------|----------------|----------------|----------------|
|                                      | _Com problema_ | _Sem problema_ | _Com problema_ | _Sem problema_ |
| Formulário _(forms)_                 | 52,38%         | 47,62%         | 55,19%         | 44,81%         |
| _Links_                              | 83,56%         | 16,44%         | 93,65%         | 6,35%          |
| Imagens                              | 83,25%         | 16,75%         | 83,36%         | 16,64%         |
| Verificação de _markup_ do _W3C_     | 95,18%         | 4,82%          | 97,22%         | 2,78%          |

Mais detalhes podem ser obtidos em: [web para todos](https://mwpt.com.br/numero-de-sites-que-falham-nos-testes-do-web-para-todos-cai-mas-ainda-preocupa).


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="consideracoes"></a> Considerações

Aumentando a acessibilidade dos _sites_ melhora a navegação, as experiências para todos os usuários, não apenas para as pessoas que têm alguma deficiência, pois o _site_ estará mais bem feito; acessibilidade em _sites_ tem mais correlação com organização e boas práticas do que com elementos técnicos propriamente ditos.

Mesmo havendo diretrizes de acessibilidade, como o _WCAG_ da _W3C_ e leis federais relacionadas à acessibilidade _web_, ainda existem inúmeros _sites_ com problemas de acessibilidade. 

Conforme [Sousa e Lazzarin (2014)](#sousaLazzarin2014), "embora o poder da _Web_ esteja em sua universalidade, e sua idealização tenha tido como primeira concepção o objetivo de fornecer conteúdo a todas as pessoas, desenvolvedores de _websites_, por inúmeros motivos – entre eles falta de formação na área e escassez de tempo – passaram a não seguir recomendações que facilitassem o acesso ao conteúdo com a utilização de produtos de _software_ não convencionais, como, por exemplo, os leitores de tela."

No tocante aos usuários com autismo, que abrange um conjunto mais específico de acessibilidade, segundo [Pagani (2016)](#pagani2016), "a principal dificuldade é que profissionais de tecnologia tendem a não ter conhecimento sobre o assunto, e muitas empresas do setor não consideram estes usuários como parte do público-alvo dos projetos, o que é uma informação alarmante." E acrescenta, com base em pesquisa realizada com profissionais de tecnologia durante seu mestrado, que "84% não consideram ou consideram parcialmente pessoas com deficiências cognitivas em seus projetos. 75% dos que não consideram o fazem porque não têm conhecimento suficiente sobre essas deficiências para aplicar em seus projetos, e 54% dizem que a empresa em que atuam não considera que estes usuários seriam parte do público-alvo dos projetos."

> A mudança da _web_ brasileira em prol das pessoas com deficiências depende, basicamente, da adesão das empresas e instituições à causa. A transformação seria muito mais rápida se a legislação especificasse quais critérios de acessibilidade um _site_ deve atender. Por enquanto, a legislação nacional não passa de uma declaração de boa vontade do legislador, mas sem nenhuma aplicação prática, ressalta. [(WEB PARA TODOS, 2020)](#webParaTodos2020)

Neste artigo foram mostradas iniciativas, diretrizes internacionais e nacionais, visando uma Internet mais universal; cada um abordando o assunto de uma maneira particular, mas todos chegando no mesmo objetivo, no mesmo resultado.

O material apresentando não se aprofunda nas diretrizes, em como fazer, no passo a passo, o objetivo foi dar uma direção, um rumo, mostrar os conceitos principais para quem ainda não tinha pensado em uma _WEB_ inclusiva, instigar uma reflexão no leitor.


[Voltar para lista de conteúdo](#listaConteudo)



## <a id="referencias"></a> Referências

1. <a id="arnaut2017"></a> ARNAUT, F. F. S. 2017. **Acessibilidade web em sítios da rede federal de educação: uma avaliação dos Institutos Federais.** 87 f. Dissertação (Mestrado em Gestão e Tecnologia Aplicadas à Educação) – Setor de Educação, Universidade do Estado da Bahia, Salvador (BA), 2017. Disponível em: <<http://www.cdi.uneb.br/site/wp-content/uploads/2018/03/Dissertacao_Mestrado_Gestec_France.pdf>>. Acesso em: 29 abr. 2021.

2. BRASIL. **ASES (Avaliador e Simulador de Acessibilidade em Sítios).** Disponível em: <<https://softwarepublico.gov.br/social/ases>>. Acesso em: 1 mai. 2021.

3. <a id="brasil2014"></a> BRASIL. 2014. **eMAG - Modelo de Acessibilidade em Governo Eletrônico.** Disponível em: <<http://emag.governoeletronico.gov.br>>. Acesso em: 28 abr 2021.

4. <a id="ibge2012"></a> IBGE (Instituto Brasileiro de Geografia e Estatística). 2012. **Cartilha do Censo 2010: Pessoas com Deficiência.** Disponível em: <<https://inclusao.enap.gov.br/wp-content/uploads/2018/05/cartilha-censo-2010-pessoas-com-deficienciareduzido-original-eleitoral.pdf>. Acesso em: 28 abr. 2021.

5. <a id="karwai2016"></a> KARWAI, P. 2016. **Dos and don'ts on designing for accessibility.** Disponível em: <<https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility>>. Acesso em: 27 abr. 2021.

6. <a id="mezzaroba2018"></a> MEZZAROBA M. P.; ALMEIDA, T. C.; ULBRICHT, V. R.; VANZIN, T.; FADE, L. M. 2018. **Acessibilidade em portais de Governo Eletrônico do Poder Judiciário.** Disponível em: <<https://www.infodesign.org.br/infodesign/article/view/369/280>>. Acesso em: 28 abr. 2021. 

7. <a id="pagani2016"></a> PAGANI, T. C. 2016. **Acessibilidade Web Cognitiva - BrazilJS Conf 2016.** Disponível em: <<https://www.youtube.com/watch?v=igGOeem6y4w>>. Acesso em: 27 abr. 2021.

8. <a id="pagani2019"></a> PAGANI, T. C. 2019. **GAIA: um Guia de Recomendações Sobre Design Digital Inclusivo Para Pessoas com Autismo.**

9. <a id="reis2011"></a> REIS, A. 2011. **Acessibilidade na Web para Deficientes Visuais - Parte 1/2.** Disponível em: <<https://www.youtube.com/watch?v=n0ISO5qe1Ao>>. Acesso em: 27 abr. 2021.

10. <a id="sales2017a"></a> SALES, M. 2017a. **Entendendo o WCAG - Recomendação 1.1 - Alternativas Textuais.** Disponível em: <<https://www.youtube.com/watch?v=wjZEPeTwVL4>>. Acesso em: 27 abr. 2021.

11. <a id="sales2017b"></a> SALES, M. 2017b. **"O que fazer" e "o que não fazer" ao projetar para Acessibilidade.** Disponível em: <<https://uxdesign.blog.br/o-que-fazer-e-o-que-n%C3%A3o-fazer-ao-projetar-para-acessibilidade-7da75261fa7b>>. Acesso em: 27 abr. 2021.

12. <a id="videoPalToolkit"></a> SALES, M. 2018. **Palestra: Acessibilidade Toolkit - Entendendo de uma vez por todas a WCAG.** Disponível em: <<https://www.youtube.com/watch?v=s2IKdGTbyIA>>. Acesso em: 27 abr. 2021.

13. <a id="videoToolkit"></a> SALES, M. 2019. **Acessibilidade Toolkit: WCAG de forma simples.** Disponível em: <<https://www.youtube.com/watch?v=GBipzZwXxZg>>. Acesso em: 27 abr. 2021.

14. <a id="sales2020"></a> SALES, M. 2020. **Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG.** Disponível em: <<https://uxdesign.blog.br/acessibilidade-toolkit-entendendo-de-uma-vez-por-todas-a-wcag-e2714120d80>>. Acesso em: 2 mai. 2021.

15. <a id="sampaio2018"></a> SAMPAIO, M. 2018. **Entenda o WCAG 2.0 de forma simples e rápida.** Disponível em: <<https://blog.handtalk.me/wcag-2-0>>. Acesso em: 29 de abr. 2021.

16. <a id="sousaLazzarin2014"></a> SOUSA, M. R. F.; F. A. LAZZARIN. 2014. **A questão da acessibilidade digital na literatura dos anais do ENANCIB (1994-2012).** Disponível em: <<https://doaj.org/article/8de32ce920be4a1b831d1d8865f39b00>>. Acesso em: 28 abr. 2021.

17. <a id="toolkit2020"></a> TOOLKIT. 2020. **Acessibilida.de Toolkit.** Disponível em: <<https://github.com/acessibilidade/toolkit>>. Acesso em: 1 mai. 2021.

18. <a id="w3c_brasil2015"></a> W3C BRASIL. 2015. **Cartilha de acessibilidade na _web_: _w3c_ brasil.** Fascículo I. Disponível em: <<http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html>>. Acesso em: 28 abr. 2021.

19. <a id="w3c_brasil2018"></a> W3C BRASIL. 2018. **Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1.** Disponível em: <<https://www.w3c.br/traducoes/wcag/wcag21-pt-BR>>. Acesso em: 2 mai. 2021.

21. <a id="w3c_brasil2020"></a> W3C BRASIL. 2020. **Cartilha de acessibilidade na _web_: _w3c_ brasil.** Fascículo IV. Disponível em: <<https://www.w3c.br//pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-IV.html>>. Acesso em: 28 abr. 2021.

21. <a id="webParaTodos2020"></a> WEB PARA TODOS. 2020. **Número de sites que falham nos testes do Web para Todos cai, mas ainda preocupa.** Disponível em: <<https://mwpt.com.br/numero-de-sites-que-falham-nos-testes-do-web-para-todos-cai-mas-ainda-preocupa>>. Acesso em: 1 mai. 2021.


[Voltar para lista de conteúdo](#listaConteudo)