Como eu formataria um fluxograma visando a acessibilidade em um código HTML? Algum programa faz isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como eu formataria um fluxograma visando a acessibilidade em um código HTML? Algum programa faz isso?
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!
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 )
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.