3
respostas

Fluxograma acessível em HTML

Como eu formataria um fluxograma visando a acessibilidade em um código HTML? Algum programa faz isso?

3 respostas

Olá Matheus!

Uma forma de criar um fluxograma é utilizando a tag <svg> do HTML5. O SVG permite criar gráficos vetoriais escaláveis, o que é ideal para fluxogramas. Você pode utilizar as tags <rect>, <circle>, <line> e <text> para criar os elementos do fluxograma.

Além disso, é importante adicionar descrições textuais para cada elemento do fluxograma.

Quanto à sua pergunta sobre programas que fazem isso, existem diversas ferramentas que podem te ajudar muito nessa tarefa, algumas são: JointJS, draw.io e o Lucidchart. Vale a pena pesquisar um pouco mais sobre essas ferramentas, elas te serão muito uteis.

Espero ter ajudado! Fico à disposição.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Olá td bem? Encontrei uma alternativa usando o vision do Microsoft e convertendo o arquivo gerando pelo vision para HTML. Agora, o meu único desafio está sendo colocar o texto matemático dentro desse fluxograma. Primeiro, qual a forma de adicionar o MathJax como script para ler e interpretar a linguagem MathML nesse HTML? E o segundo, como alinhar corretamente o texto matemático no quadrado do fluxograma? Irei printar uma imagem do meu código e de como está a página que fiz. Preciso, necessariamente, deixar esse código acessível para o leitor de tela NVDA, assim os usuários com necessidades especiais podem navegar com a tecla tab, nos conteudos dentro do fluxograma e podem ler caracter por caracter das equacoes matematicas dentro desse fluxograma.

Parte do Código usado contendo o primeiro box do fluxograma com o texto :"START


 <g transform='matrix(1,0,0,1,0,0)'>
  <text x='56.1731' y='0' class='TextStyle0' fill='#000000' opacity='1' transform='matrix(1,0,0,-1,0,20.356829)'>START</text>
 </g>
</g>
   
   Gostaria de adicionar nesse box o seguinte código de linguagem MATHML ( em baixo da palavra start) : 
   
   <math>
   <mi>y</mi>

( 0 )

   ![Print do site](https://cdn1.gnarususercontent.com.br/1/1831297/97de03ae-c9f6-4c83-b37c-1c89e8e5b6ac.png)  

Olá, Matheus! Como vai?

Para resolver o seu problema com as equações, vou te indicar esse tópico, onde eu respondi de maneira bem extensa uma questão quase igual à sua.

Espero ter ajudado. Fico à disposição!

Até mais.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software