Acessibilidade e Design responsivo são coisas diferentes?

Hoje em dia, em pleno 2020, criar um site responsivo é praticamente obrigatório e acessível também mas ter um design responsivo não é ter um site acessível, são duas coisas diferentes mas que se complementam e eu vou explicar como funciona essa dinâmica. Cada um resolve determinados tipos de problemas e possuem implementações diferentes.

Mas afinal, o que é acessibilidade e design responsivo?

Para o governo brasileiro,

Acessibilidade na internet refere-se principalmente às recomendações do WCAG (World Content Accessibility Guide) do W3C e no caso do Governo Brasileiro ao e-MAG (Modelo de Acessibilidade em Governo Eletrônico).

O termo acessibilidade, segundo o portal do Ministério da Saúde, significa incluir a pessoa com deficiência na participação de atividades como o uso de produtos, serviços e informações.

O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web. Missão do W3C: conduzir a Web ao seu potencial máximo.

O W3C trabalha formando grupos de trabalho em cada área da internet promovendo assim a discussões e ações que se transformarão em um padrão web. Um desses grupos é sobre a acessibilidade onde se discute e planeja ações que serão tomadas a favor da acessibilidade. Uma dessas ações é a formulação de uma Cartilha de Acessibilidade na Web para orientação sobre a importância da acessibilidade na web.

Já o Governo brasileiro, em seu site do eMAG, propõe que para ser ter um site acessível devemos seguir 3 passos:

• Seguir os padrões web;
• Seguir as diretrizes ou recomendações de acessibilidade;
• Realizar a avaliação de acessibilidade

O design responsivo é uma técnica de estruturação (HTML e CSS) em que a página se adapta a qualquer resolução, tela e dispositivo. É muito difícil você saber quais são todas as resoluções de telas existentes, isso acontece por causa do número alto de modelos de celulares e tablets que existem hoje. Tentar fazer tela para cada resolução ficaria muito custoso e provavelmente alguns modelos ficariam de fora. O design responsivo não necessita saber para qual smatphone você precisa alterar, basta escolher alguns pontos de mudanças de estilo e pronto.

Quando falo em pontos de mudanças de estilo, me refiro a resolução de tela do dispositivo. Existem no mínimo cinco pontos de resoluções que devemos ter atenção. O framework Bootstrap utiliza esses 5 pontos:

• Extra small para resoluções menor que 576px;
• Small para resoluções entre 576px e 768px;
• Medium para resoluções entre 768px e 992px;
• Large para resoluções entre 992px e 1200px;
• Extra large para resoluções acima de 1200px;

Para quem a acessibilidade e o design responsivo é feito?

O público-alvo das duas implementações é diferente e em alguns momentos chegam a ser o mesmo, uma complementa a outra. A acessibilidade não atinge só a pessoas com necessidades especiais, como a maioria das pessoas pensam e um exemplo seria uma pessoa sem necessidade especial querer acessar uma informação no site mas não pode utilizar o mouse por estar falando ao celular (sim, isto é uma barreira de acesso) e o acesso ao site poderia ser feito pelo teclado ou comando por voz. Outro exemplo é tentar acessar um site que não se adapta ao celular e a navegação se torna difícil porque não se implementou o design responsivo e nem acessibilidade. O acesso a informação foi negado para essa pessoa ou a venda não pode ser concretizada.

O Google, em seu algoritmo de busca por um site, penaliza sites que não são responsíveis. Se o seu site não funcionar de forma adequada no smartphone, nem vale a pena colocá-lo no ar.

Tudo por uma internet inclusiva.

Quais as diferenças e semelhanças?

A principal diferença é que acessibilidade utiliza diretrizes nacionais e internacionais enquanto que o design responsivo não segue um padrão específico, ele precisa se adaptar a qualquer dispositivo e ponto.

Cada país tem as suas diretrizes em relação a acessibilidade tornando muito difícil criar um site que atenda a todos os países mas todas seguem a cartilha do W3C e fazem suas adaptações. Aqui no Brasil temos o eMAG.

O design responsivo é uma técnica praticamente mundial, a comunidade de desenvolvedores que utilizam essa técnica é muito grande e eles conversam entre sim, fazem melhorias, adaptações e com isso unificam a técnica tornado-a uma só para todos. Um dos mais conhecidos é o Bootstrap. Eles são conhecidos como frameworks e são muito úteis pois já fizeram todo o trabalho de pesquisa e implementação bastando para nós colocar essas implementações no nosso site. Aqui tem a documentação e exemplos do Bootstrap.

A grande semelhança entre acessibilidade e design responsivo é a inclusão digital que eles proporcionam. Com a acessibilidade e design responsivo garantimos que a informação chegue a qualquer indivíduo de forma segura.

Para que isso tudo?

O maior problema da web é não dar condição para utilização com segurança e autonomia da informação por qualquer indivíduo. Nem todos os sites são responsivos e a grande maioria não é acessível. Colocando-se no atual momento em que nosso mundo vive, a Pandemia do Corona-vírus, todos se viram na necessidade de fazer praticamente tudo pela internet e aplicativos para dispositivos móveis. A grande maioria da população acessa internet pelo smartphone mas e se o site não funciona de maneira correta no smartphone? Os sites de serviços são acessíveis? O público da internet com necessidades especiais ficou excluído?

Houve uma corrida forte dos pequenos e médios comerciantes para criarem suas lojas virtuais e as lojas de alimentação para se adaptarem ao delivery. Nem todos se adaptaram a esse novo mundo que foi praticamente imposto em nossas vidas, tanto comerciantes quanto consumidores. Eu mesmo faço praticamente tudo pelo meu smartphone, sem precisar sair de casa mas conheço pessoas que não conseguem e isso não é um problema do indivíduo, pode ter sido uma má experiência no passado que bloqueou uma segunda ou terceira tentativa.

Como funciona isso tudo na prática?

Para nós desenvolvedores a acessibilidade e design responsivo tem que ser pensado antes mesmo de meter a mão na massa, na fase do projeto. Não levando em consideração esses dois pontos, depois fica mais difícil a implementação e na maioria dos casos é refeito todo o desenvolvimento ou deixado de lado (o que ocorre na maioria das vezes). Um bom conhecimento de HTML, CSS e Javascript é o básico para começar. Saber a semântica web é primordial para os dois casos, por isso a importância do HTML.

Para quem não possui conhecimento técnico para criar um site, existem ferramentas que fazem esse trabalho todo deixando para você apenas arrastar componentes e criar a página sem saber uma linha de código. Dois exemplos de plataformas mais conhecidas são o Wix e Wordpress. Eles propõe criação de site de maneira fácil e rápida sem digitar uma linha de código e o melhor, são páginas totalmente responsivas, algumas até com acessibilidade implementada.

Conseguiu entender a diferença entre essas duas implementações e a importância delas nas nossas vidas? A ideia é desenvolvermos mais sites e sistemas acessíveis e responsíveis tornando a web unificada e acessível para todos. Fala-se muito sobre inclusão digital como simplesmente ter computadores e internet para todos mas não podemos esquecer dos sites que também precisam ser inclusos nessa transformação digital.