Acessibilidade no Horusec: Como foi o processo de mudança?

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. 

(Imagem que exibe um comparativo da tela de login do horusec manager entre as versões 1.0 e 2.0, no topo da tela a logotipo do Horusec e logo abaixo dois campos de texto um para o e-mail e outro para a senha, seguido de dois botões, um de Login e outro de cadastro. Do lado esquerdo a versão 1.0 onde a fonte e as cores estão fora do padrão de acessibilidade e no lado direito a versão 2.0 dentro dos padrões.

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. 

 (Imagem do componente “Linha do tempo de vulnerabilidades” do Horusec manager com alguns dados, e logo abaixo uma caixa informando o texto que será apresentado por um leitor de telas, esse texto se refere a descrição dos dados fornecidos pela linha do tempo.

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.

Imagem apresentando duas versões da tela de gráficos do Horusec manager, a primeira versão os gráficos são considerados com pouca acessibilidade pois a apresentação dos dados são dadas através de cores e a segunda versão os gráficos são acessíveis pois são apresentados em formato de barras extinguindo a legenda de 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.

Imagem apresentando duas versões do menu de navegação do Horusec manager, onde a primeira versão ocupava um grande espaço da tela e na segunda versão, o problema foi resolvido com uma opção de maximizar/minimizar o menu.

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.

Imagem apresentando uma das telas do Horusec manager, com foco no novo componente de cabeçalho da tela, que exibe o título da página e as opções: Ajuda, Configurações e Sair.

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.

Imagem apresentando a nova tela de configurações do Horusec manager, nela são exibidas três seções: Configurações de conta, Língua e uma opção para deletar a conta.

 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

Capa do artigo Acessibilidade no Horusec com um homem cadeirante contente.
Foto Lucas Bruno Ferreira
Desenvolvedor Front-end
Desenvolvedor front-end, fascinado pelo ecossistema WEB e suas tecnologias. Sempre disposto a buscar novos conhecimentos.

Este site utiliza cookies para proporcionar uma experiência de navegação melhor. Consulte nossa Política de Privacidade.