Projeto Wickbold: um site acessível para pessoas e algoritmos

Vitório Tomaz

A equipe da frat digital desenvolveu o site de Wickbold com as melhores práticas de acessibilidade e código amigável para leitores de tela.

Cada site, aplicativo, plataforma que começamos a produzir aqui na Frat é um projeto único. Ao fecharmos uma proposta, fazemos uma projeção de tempo, custo, recursos e, com base nisso, começamos a desenvolver: nunca sabemos exatamente como será o seu final. Construir uma aplicação em tecnologia da informação é uma tarefa interativa, cujo desenho vai se estruturando conforme entendemos a necessidade do cliente, o que o público demanda e o que temos de possibilidades de ferramentas.

Com o projeto de Wickbold não foi diferente. Iniciamos o projeto com algumas condicionantes: a necessidade de ser um site em Wordpress, amigável aos sistemas de rankeamento (SEO); mobile first e com um carregamento leve para garantir uma taxa de rejeição baixa. Tais indicativos já são contemplados nas boas práticas de desenvolvimento da Frat.

Partimos do processo de descoberta (discovery) para ampliarmos as conversas com as áreas e, assim, começamos a entender as necessidades detalhadas de cada uma. Estudamos o público-alvo e as referências, e surgiu uma demanda inédita para nossa equipe, porém bastante importante para o cliente: um site acessível a pessoas com deficiência. Essa solicitação foi apresentada pela área de recursos humanos por ser considerada relevante para dar consonância ao que Wickbold declara como seus valores.

Nesse momento, pausamos o projeto, pois precisávamos pensar a acessibilidade sob três vertentes: conteúdo, design e programação. Contamos com apoio do Movimento “Web para Todos” , que realizou três workshops aprofundando os eixos mencionados. Com aprendizados que seguiram ao longo de todo projeto, conseguimos repensar a estrutura de forma integrada e evitar que, posteriormente, fossem necessários grandes retrabalhos.

1. Conteúdo acessível


a) Linguagem acessível, o que incluiu a escrita sem utilização de “padrões de linguagem neutra”, que não são de fácil leitura nem para leitores de tela, como também para pessoas com dislexia;

b) Descrição de todas as imagens para que pessoas com deficiência consigam entender a comunicação no site.


2. Design acessível


a) UX com elementos visuais que permitam aos leitores de tela entenderem a ordem de leitura, entregando o conteúdo de forma coerente;

b) Uso de contraste de cores.


3. Código acessível


a) Desenvolvimento do html/css de acordo com as melhores práticas da W3C, principal órgão regulador de boas práticas na internet, permitindo aos leitores de código entender o que ler;

b) Interpretação dos atalhos do teclado.


Após a entrega do desenvolvimento, passamos por uma segunda etapa conhecida como Quality Assurance (QA). Ela consiste no teste do funcionamento do site em todos os browsers e dispositivos, verificando se os atalhos e a barra de acessibilidade funcionavam, assim como se estava inteligível para leitores de código. 

Foi um enorme desafio aprender, pesquisar, desenvolver, atender às expectativas do cliente, isso tudo com as melhores práticas e, no meio do caminho, materializar um site acessível. Ao final do processo, ficamos melhores, mais experientes e com mais conhecimento para construir novos sites capazes de atender a diversidade de pessoas que compõem a nossa sociedade.