Infelizmente a acessibilidade acaba sendo deixada de lado no desenvolvimento de muitas aplicações web. Assim, muitos sites e softwares acabam não atendendo adequadamente uma parcela significativa da população. Mas acessibilidade é coisa séria na Zup. Por isso, hoje vamos contar o processo de adequar a acessibilidade no Horusec, um dos projetos open source que mantemos.
Mas o que é o Horusec?
Horusec é uma ferramenta de segurança que realiza análise estática de código em busca de possíveis vulnerabilidades. É um dos quatro projetos open source mantidos pela Zup.
Recentemente lançamos a versão 2.0 do Horusec. Assim, tivemos a oportunidade perfeita para priorizar a acessibilidade no Horusec Manager e lançarmos uma versão mais inclusiva para nossa plataforma web. Se você ainda está por dentro das mudanças da nossa última release, não deixe de conferir o artigo “Horusec 2.0: o que mudou com a nova release?”
Ah, e se você ainda não conhece bem o Horusec, este outro artigo pode lhe dar uma visão interessante sobre a segmentação e sobre o produto “Desenvolvimento seguro com Horusec”.
Ferramentas de acessibilidade adotadas
Com a ajuda de algumas ferramentas e com a orientação do time de User Experience (UX) da Zup, fizemos um diagnóstico sobre a acessibilidade no Horusec e um plano de ação para corrigir as falhas encontradas e atingir nosso objetivo de tornar a plataforma acessível.
As principais ferramentas utilizadas durante o processo foram, por exemplo:
- Axe Devtools – Extensão que avalia os problemas de acessibilidade em geral no site.
- WCAG Color contrast – Para testar o contraste de cor de acordo com os requisitos de acessibilidade WCAG.
- Screen Reader – Leitor de telas.
- Lighthouse – Ferramenta de performance e acessibilidade web.
Tivemos cerca de cinco pontos a serem corrigidos em cada tela do Horusec. Com esses resultados, pudemos avaliar o esforço que teríamos e definir as prioridades das correções que faziam mais sentido para nosso cenário.
Principais adequações de acessibilidade no Horusec
Vamos às principais adequações realizadas na plataforma Horusec.
Fonte e Cores
Um dos pontos mais relevantes quando tratamos de acessibilidade é o tamanho das fontes e as cores apresentadas na tela.
Estes pontos não são importantes apenas para portadores de deficiência visuais, mas também auxiliam na compreensão da leitura dos itens de um gráfico para qualquer usuário que esteja utilizando a plataforma.
Nas imagens abaixo, temos um exemplo do impacto desta alteração. Na versão 1.0 do Horusec, o tamanho da fonte dificultava a leitura e o contraste das cores de erro e placeholder dos campos de textos também estavam fora do padrão de contrastes da WCAG.
Junto à equipe de User Experience (UX), redefinimos todas as cores da plataforma (mantendo o mais próximo possível da versão 1.0) para atendermos o padrão AA e AAA de contrastes da WCAG. O tamanho da fonte também foi ajustado para no mínimo 14px variando até 20px.
No exemplo acima, mostramos a tela de login, porém essas adequações foram implementadas em toda a plataforma, desde textos até elementos como gráficos e tabelas.
Leitor de telas e navegação com teclado
Na versão 2.0 do Horusec é possível realizar a navegação por teclado em todos formulários e telas da plataforma, sendo que toda a navegação pode ser ouvida através de um leitor de telas, devido as implementações de atributos aria na estruturação do HTML.
Outro ponto importante foi a refatoração em vários elementos tornando-os mais semânticos, como a utilização correta de listas e tags como h1, header, section e nav.
A implementação de maior impacto na acessibilidade do Horusec é a navegação no dashboard. Quando um dos elementos da tela analítica é selecionado, o leitor de tela é capaz de ler todos os dados que estão sendo apresentados.
No exemplo abaixo, temos a linha do tempo de vulnerabilidades e sua aria-label informando os dados atuais do gráfico.
Gráficos para todos
Além da capacidade de interpretação do leitor de telas, os gráficos do Horusec manager receberam uma atualização para melhorar a identificação dos itens.
Por exemplo, em vez de exibir a legenda referente a cores, passamos a levar a descrição junto ao item do gráfico, garantindo assim que pessoas com dificuldade de identificação de cores consigam ler e entender o gráfico sem problemas. Este problema é evidente em gráficos do formato “pizza” onde a quantificação dos itens é representada por cores.
Estrutura das telas e responsividade
Outro fator importante que podemos considerar como uma falha de acessibilidade é a responsividade. Através da refatoração do menu de navegação na versão 2.0, o Horusec se tornou acessível para telas pequenas e passamos a suportar a visualização em tablets.
Podemos notar também que a marcação da página atual está mais evidente e os itens foram agrupados em apenas uma coluna de navegação.
Na reestruturação, criamos um cabeçalho enfatizando ao usuário em qual tela ele está atualmente. Além disso, levamos as opções de Logout e Configurações para este componente e agora cada página possui seu link de ajuda, que leva para a documentação oficial do Horusec sobre a tela atual que o usuário está navegando.
Nova tela de configurações
A versão 2.0 do Horusec manager possui uma tela de configurações mais intuitiva e que divide as opções em seções.
Internacionalização também é um ponto de acessibilidade. Por isso, adicionamos também a língua Espanhol para seleção na tela de configurações.
Acessibilidade no Horusec: um caminho para a democratização da segurança no desenvolvimento
Temos muito orgulho da jornada de melhorias de acessibilidade no Horusec. Agora, temos a certeza de que oferecemos ao público uma ferramenta inovadora de segurança e que é acessível a uma camada maior de profissionais.
Nesse artigo demos uma ampla visão das alterações que contemplaram a acessibilidade no Horusec em sua versão 2.0. O que você achou? Deixe nos comentários sua opinião para gente!
Além disso, se você tem algum ponto que gostaria de saber mais ou quer contribuir com nosso projeto, estaremos lhe esperando em nosso fórum open source.
