Melhorando a acessibilidade do seu Markdown
Publicados: 2022-03-10Markdown é uma pequena linguagem de conversão de texto para HTML. Foi criado por John Gruber em 2004 com o objetivo de facilitar a escrita de texto formatado em um editor de texto simples. Você pode encontrar o Markdown em muitos lugares na internet, especialmente em locais onde os desenvolvedores estão presentes. Dois exemplos notáveis são os comentários no GitHub e o código-fonte para postagens na Smashing Magazine!
Como funciona a remarcação
Markdown usa arranjos especiais de caracteres para formatar o conteúdo. Por exemplo, você pode criar um link envolvendo um caractere, palavra ou frase entre colchetes. Após o colchete de fechamento, você inclui um URL entre parênteses para criar um destino para o link.
Então digitando:
[I am a link](https://www.smashingmagazine.com/)Criaria a seguinte marcação HTML:
<a href="https://www.smashingmagazine.com/">I am a link</a>Você também pode misturar HTML com Markdown, e tudo se resume a HTML quando compilado. O exemplo a seguir:
I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.Gera isso como marcação HTML:
<p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>Markdown e acessibilidade
A acessibilidade é uma preocupação holística, o que significa que afeta todos os aspectos da criação e manutenção de experiências digitais. Como o Markdown é uma ferramenta digital, ele também tem considerações de acessibilidade a serem observadas.
- A boa notícia :
Markdown gera marcação HTML simples, e a marcação HTML simples pode ser facilmente lida por tecnologia assistiva. - A notícia menos boa :
Markdown não é abrangente, nem é prescritivo. Além disso, há mais na acessibilidade do que apenas tecnologia assistiva.
Quando se trata de garantir que seu conteúdo Markdown seja acessível, há dois problemas gerais:
- Existem certos tipos de conteúdo que o Markdown não suporta e
- Não há uma experiência estilo Clippy para acompanhá-lo enquanto você escreve, o que significa que você não receberá um aviso se fizer algo que crie conteúdo inacessível.
Devido a essas duas considerações, há coisas que podemos fazer para garantir que nosso conteúdo Markdown seja o mais acessível possível.
As três coisas mais importantes que você pode fazer
Pode ser difícil saber por onde começar quando se trata de tornar seu conteúdo acessível. Aqui estão três coisas que você pode fazer agora para causar um impacto grande e significativo.
1. Use títulos para delinear seu conteúdo
Navegar por título é de longe o método mais popular que muitos usuários de tecnologia assistiva usam para entender o conteúdo da página ou visualização que estão visualizando.
Por isso, você deseja usar as opções de formatação de título do Markdown ( # , ## , ### , #### , ##### e ###### ) para criar uma estrutura lógica de título:
# The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading ContentIsso cria um esquema hierárquico que é fácil de verificar:
1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading Escrever níveis de cabeçalho eficazes é uma arte, pois você deseja informações suficientes para comunicar o escopo geral da página, mas não sobrecarregar alguém descrevendo demais. Por exemplo, uma receita pode precisar apenas de alguns elementos h2 para seccionar os ingredientes, instruções e história de fundo, enquanto um trabalho acadêmico pode precisar de todos os seis níveis de título para comunicar totalmente as nuances.
Ser capaz de escanear rapidamente todos os títulos em uma página ou visualizar e pular para um específico é uma técnica que não se limita apenas a leitores de tela. Eu gosto e me beneficio de extensões como headersMap que permitem que você aproveite esse recurso.
2. Escreva descrições alternativas significativas para suas imagens
Descrições alternativas ajudam as pessoas com baixa visão ou navegando com imagens desativadas a entender o conteúdo da imagem que você está usando.
No Markdown, uma descrição alternativa é colocada entre os colchetes de abertura e fechamento do código de formatação da imagem:
Uma descrição alternativa deve descrever de forma clara e concisa o conteúdo da imagem e o contexto do motivo pelo qual ela foi incluída. Também não se esqueça de adicionar pontuação!
Certos sites e aplicativos da Web que usam entrada Markdown também tentarão adicionar um texto de descrição alternativo para você. Por exemplo, o GitHub usará o nome do arquivo que você enviar para o atributo alt :
Infelizmente, isso não fornece contexto suficiente para uma pessoa que não pode ver a imagem. Nesse cenário, você deseja comunicar por que a imagem é importante o suficiente para ser incluída.
Exemplos disso que você normalmente verá no GitHub incluem:
- Um bug visual, onde algo não parece do jeito que deveria,
- Um novo recurso que está sendo proposto,
- Uma captura de tela anotada fornecendo feedback,
- Gráficos e fluxogramas que explicam os processos e
- GIFs de reação para comunicar emoção.
Estas imagens não são decorativas. Como o GitHub é público por padrão, você não sabe quem está acessando seu repositório ou suas circunstâncias. Melhor incluí-los proativamente.
Se você precisar de ajuda para escrever descrições alternativas, recomendo entusiasticamente a alt Decision Tree do W3C e o Ultimate Guide to Alt Texts do Axess Lab.
3. Use linguagem simples
Uma linguagem simples e direta ajuda todos a entender seu conteúdo. Isso inclui pessoas:
- Com considerações cognitivas,
- Quem não usa o inglês como idioma principal,
- Não familiarizado com os conceitos que você está comunicando,
- Quem está estressado ou multitarefa e tem capacidade de atenção limitada,
- E assim por diante.
Quanto mais fácil for para alguém ler o que você escreve, mais fácil será para eles entendê-lo e internalizá-lo. Isso ajuda com todas as formas de conteúdo escrito do Markdown, seja postagens de blog, tickets do Jira, notas do Notion, comentários do GitHub, cartões do Trello e assim por diante.
Considere os comprimentos de suas frases e palavras. Além disso, considere quem é seu público-alvo e pense em coisas como o jargão e as expressões idiomáticas que você usa.
Se você precisar de ajuda para simplificar sua linguagem, três ferramentas que gosto de usar são o Hemingway, o Readability Analyzer da Datayze e o xkcd Simple Writer. Outro site que vale a pena conferir é o plainlanguage.gov.
outras considerações
Quer ir além? Excelente! Aqui estão algumas coisas que você pode fazer:
Imagens
Além de fornecer descrições alternativas, há algumas outras coisas que você pode fazer para tornar suas imagens inseridas no Markdown acessíveis.
Marcar imagens SVG corretamente
SVG é um ótimo formato para gráficos, ícones, ilustrações simples e outros tipos de imagens que usam formas simples e linhas nítidas.
Existem duas maneiras de renderizar SVG no Markdown. Ambas as abordagens têm coisas específicas que você precisa estar atento:
1. Vinculação a uma imagem com extensão de arquivo .svg
Nota : O bug que estou prestes a descrever foi corrigido, no entanto, ainda estou recomendando o seguinte conselho para os próximos dois anos. Isso se deve à tática questionável do Safari de vincular as atualizações do navegador às atualizações do sistema, bem como à hesitação em atualizar o software para algumas pessoas que usam tecnologia assistiva.
Se você estiver vinculando a um SVG como uma imagem, você desejará usar o elemento img do HTML e não o código de formatação de imagem do Markdown ( ![]() ).
A razão para isso é que certos leitores de tela têm bugs quando tentam analisar um elemento img vinculado a um arquivo SVG. Em vez de anunciá-lo como esperado como uma imagem, ele o anunciará como um grupo ou pulará o anúncio da imagem inteiramente. Para corrigir isso, declare role="img" no elemento de imagem:
<img role="img" alt="A sylized sunflower." src="flower.svg" />2. Usando o código SVG embutido
Existem algumas razões para declarar uma imagem como código SVG embutido em vez de usar um elemento img . O motivo pelo qual encontro com mais frequência é o suporte ao modo escuro.
Assim como o uso de um elemento img, há alguns atributos que você precisa incluir para garantir que a tecnologia assistiva o interprete como uma imagem e não como código. As duas declarações de atributo são role="img" e aria-labelledby :
<svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg> Você também deve usar um elemento title (não confundir com o atributo title ) para descrever a imagem, semelhante ao atributo alt de um elemento img . Ao contrário de um atributo alt , você também precisará associar o id do elemento title com seu elemento svg pai usando aria-labelledby .
Se você quiser se aprofundar na marcação acessível de SVG, recomendo SVGs acessíveis de Heather Migliorisi e SVGs acessíveis: padrões perfeitos para usuários de leitores de tela de Carie Fisher.
Carregar com imagens animadas pausadas
GIFs animados são outra coisa comum que você encontrará com o conteúdo do Markdown - eu os encontro com mais frequência do que não sendo usados por um desenvolvedor para expressar sua alegria e frustração ao discutir um tópico técnico.
O problema é que essas animações podem distrair e afetar negativamente alguém que está tentando ler seu conteúdo. Considerações cognitivas como o TDAH são especialmente afetadas aqui.
A boa notícia é que você ainda pode incluir conteúdo animado! Existem algumas opções:
- Use o elemento de
picture, usando tipos de arquivo como.mp4e.webmque podem ser carregados em um estado pausado ou - Use uma solução que dê funcionalidade de reprodução/pausa a um
.gif, como o hack dedetails/summaryde Steve Faulkner ou a biblioteca freezeframe.js.
Esse pequeno detalhe pode ajudar muito as pessoas sem ter que abandonar uma maneira de se expressar.
Links
Se você escreve conteúdo online, mais cedo ou mais tarde terá que usar links. Aqui estão algumas coisas para estar ciente:
Use nomes de links exclusivos e descritivos
Algumas formas de tecnologia assistiva podem navegar por uma lista de links em uma página ou visualizar da mesma forma que podem navegar pelos títulos. Por isso, você deseja que seus links indiquem o que alguém pode esperar encontrar se o visitar.
Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).Você também deve evitar frases ambíguas, especialmente se elas se repetirem. Termos como “clique aqui” e “saiba mais” são culpados comuns. Esses termos não fazem sentido quando separados do contexto do conteúdo não vinculado ao seu entorno. Além disso, usar o termo mais de uma vez pode criar experiências como esta:
Evite abrir links em uma nova guia ou janela
Certas variantes do Markdown, como o Kramdown, permitem que você escreva código que pode abrir links em uma nova guia ou janela:
[link name](url){:target="_blank"}Fazer isso cria um risco de segurança. Além disso, essa experiência é tão confusa e indesejável que é um critério de sucesso da Web Content Accessibility Guidelines (WCAG). É muito melhor permitir que todos que usam seu site ou aplicativo da Web escolham por si mesmos se desejam ou não abrir um link em uma nova guia.
Use links ignorados com discrição
Um link para pular ou “skipnav” é uma maneira de contornar grandes seções de conteúdo. Você geralmente os encontrará como uma maneira de ignorar o logotipo e a navegação principal em uma página da Web, permitindo que alguém pule rapidamente para o conteúdo principal.
Os links de salto não se limitam apenas a este caso de uso! Dois outros exemplos podem ser um índice e controles de classificação/filtragem em um site de comércio eletrônico.
Outro ótimo uso para pular links é permitir que alguém ignore o conteúdo incorporado que possui vários elementos interativos:
Essa também é uma ótima técnica para permitir que alguém ignore uma “armadilha de teclado”, algo comumente encontrado em conteúdo incorporado.
As armadilhas de teclado são onde alguém que não está usando um mouse ou um touchpad não pode escapar de um componente interativo devido à forma como ele é construído. Você normalmente os encontrará com widgets de iframe incorporados.
Uma boa maneira de testar armadilhas de teclado? Use a tecla Tab !
Sem um link para pular, alguém usando tecnologia assistiva pode ter que recorrer à atualização da página ou visualização para escapar da armadilha. Isso não é ótimo e é especialmente preocupante se as preocupações com o controle do motor forem lançadas na mistura. Eu sou da escola de pensamento de que a maioria das pessoas simplesmente fechará a guia se se deparar com esse cenário, em vez de tentar lutar para fazê-lo funcionar.
Além de seu ótimo post sobre testes com a tecla Tab , Manuel Matuzovic nos fala sobre seu uso de links de salto, bem como outras melhorias em Melhorar a acessibilidade do teclado de CodePens Embutidas.
Tenha cuidado com links de âncora de título gerados automaticamente
Alguns geradores de Markdown adicionam automaticamente um link âncora para acompanhar cada título que você escreve. Isso é para que você possa focar a atenção de alguém na seção relevante em uma página ou visualização ao compartilhar conteúdo.
O problema é que pode haver alguns problemas de tecnologia assistiva com isso, dependendo de como esse link âncora é construído. Se o link âncora estiver apenas envolvido em um glifo como #, , ou §, teremos dois problemas:
- O nome do link não faz sentido quando removido do contexto ao redor e
- O nome do link é repetido.
Essa questão é discutida com mais detalhes por Amber Wilson em seu post, Are your Anchor Links Accessible? Seu post também detalha as diferentes soluções, bem como suas possíveis desvantagens.
Indique a presença de downloads
Na maioria das vezes, os links levam você para outra página ou visualização. Às vezes, no entanto, o destino é um download. Quando isso acontece, o navegador:
- Abre um aplicativo associado ao tipo de arquivo de solicitação para exibi-lo ou
- Solicita que você salve-o no sistema de arquivos do sistema operacional.
Essas duas experiências podem ser chocantes, especialmente se você não puder ver a tela. Uma boa maneira de evitar essa experiência menos que ideal é sugerir a presença do download no nome do link. Por exemplo, veja como você faria isso no Markdown ao vincular a um PDF:
Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).Cor
A cor não está relacionada ao Markdown em si, mas afeta muito conteúdo gerado pelo Markdown. As maiores preocupações relacionadas a cores são coisas que você geralmente pode modificar se estiver usando um serviço de blog como WordPress, Eleventy, Ghost, Jekyll, Gatsby e assim por diante.
Use um tema de modo escuro
Fornecer uma alternância para o modo escuro permite que alguém escolha uma experiência que os ajude a ler. Para alguns, pode ser uma preferência estética, para outros pode ser uma maneira de evitar coisas como enxaquecas, cansaço visual e fadiga.
A parte importante aqui é a escolha. Permita que alguém que tenha o modo escuro ativado use o modo claro para seu site e vice-versa (e certifique-se de que a interface do usuário esteja acessível).
O problema é que você não pode saber quais são as necessidades, desejos ou circunstâncias de uma pessoa quando ela visita seu site ou aplicativo da Web, mas pode fornecer a ela a capacidade de fazer algo a respeito.
Vamos lembrar também que o Markdown exporta HTML simples e direto, e isso é fácil de trabalhar dentro do CSS. Isso ajuda bastante a tornar seu tema do modo escuro mais fácil de desenvolver.
Use o realce de sintaxe com bom suporte de contraste de cores
O Markdown pode criar blocos de código envolvendo o conteúdo em backticks triplos ( ``` ). Ele também pode criar conteúdo embutido no elemento de code envolvendo um caractere, palavra ou frase em acentos graves.
Para ambos os exemplos, muitas pessoas adicionam bibliotecas de realce de sintaxe, como PrismJS, para ajudar as pessoas a entender o exemplo de código que estão fornecendo.
Certos temas usam valores claro-sobre-claro ou escuro-sobre-escuro como uma escolha estética. Infelizmente, isso significa que o código pode ser difícil ou impossível de ver para alguns indivíduos. O truque aqui é selecionar um tema de realce de sintaxe que use valores de cor com contraste alto o suficiente para que as pessoas possam realmente ver cada glifo do código.
Uma maneira de determinar se o contraste é alto o suficiente é usar uma ferramenta como a WebAIM e verificar manualmente os valores de cores fornecidos pelo tema. Se você está procurando uma sugestão mais rápida e não se importa com um pouco de autopromoção, mantenho um tema de realce de sintaxe amigável ao contraste de cores.
Conteúdo que não é suportado pelo Markdown
Como você pode usar HTML no Markdown, há certos tipos de conteúdo que você verá com mais frequência do que outros no Markdown. Aqui estão algumas considerações para alguns deles.
Use o atributo title para descrever o conteúdo do iframe
O atributo title do HTML é comumente usado incorretamente para criar um efeito de dica de ferramenta. Infelizmente, isso causa muitas dores de cabeça para os usuários de tecnologia assistiva, e seu uso dessa forma é considerado um antipadrão.
O único bom uso de um atributo title é fornecer uma descrição concisa e significativa do que o iframe contém. Essa descrição fornece aos usuários de tecnologia assistiva uma pista sobre o que esperar se eles navegarem no iframe para verificar seu conteúdo.
Para o Markdown, a forma mais comum de conteúdo iframe será a incorporação, como vídeos do YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Assim como o texto do seu link, você também deve evitar conteúdo de title genérico e repetitivo. O código de incorporação do YouTube é padronizado para YouTube video player , o que não é tão bom. Podemos fazer um pouco melhor e atualizar para o YouTube: Video title . Isso ajudará especialmente se houver mais de um vídeo do YouTube incorporado na página ou visualização.
O motivo pelo qual o YouTube faz isso quando já conhece as informações do título do vídeo é outro problema.
Forneça legendas e transcrições para vídeos e áudios gravados
Falando em YouTube, outra coisa que você deve fazer é garantir que seu vídeo e áudio tenham legendas e transcrições.
Legendas
As legendas exibem uma versão em texto do conteúdo do vídeo em tempo real enquanto ele está sendo falado, permitindo que alguém que biologicamente ou circunstancialmente não possa ouvir o áudio possa entender o conteúdo do vídeo. As legendas também podem incluir efeitos sonoros, música e outras dicas importantes para comunicar o significado.
Os provedores de hospedagem de vídeo mais populares têm recursos para oferecer suporte a legendas, incluindo exibi-las em um contexto incorporado. A parte importante aqui é evitar craps – revise manualmente as legendas geradas automaticamente para garantir que elas façam sentido para um ser humano.
Transcrições
As transcrições são irmãs da legenda. Eles pegam todos os diálogos falados, efeitos sonoros e músicas pertinentes e outros detalhes importantes e os listam fora do vídeo ou áudio incorporado. Há muitos benefícios em fazer isso, incluindo permitir que alguém:
- Leia o conteúdo de vídeo e áudio em seu próprio ritmo;
- Modificar o tamanho e a apresentação do conteúdo;
- Imprima o conteúdo ou converta-o em um formato mais fácil de digerir;
- Descubra mais facilmente o conteúdo através dos motores de busca;
- Traduza o conteúdo com mais facilidade.
Modo Leitor
Como outras preocupações adjacentes ao Markdown, o Modo Leitor pode oferecer muitos benefícios do ponto de vista da acessibilidade.
Se você não estiver familiarizado, o Modo Leitor é um recurso oferecido por muitos navegadores que remove tudo, exceto o conteúdo principal. A maioria dos modos de leitura também fornece controles para ajustar o tamanho do texto, fonte, altura da linha, cor do primeiro plano e do plano de fundo, largura da coluna, até mesmo para que seu dispositivo leia o conteúdo em voz alta para você!
Você não pode acionar diretamente o Modo Leitor usando Markdown. O conteúdo de Markdown de formato longo, no entanto, geralmente é renderizado em modelos que podem ser configurados para torná-los amigáveis ao Modo de Leitor.
Mandy Michael nos ensina como fazer isso em seu post, Construindo sites para o Safari Reader Mode e outros aplicativos de leitura. Uma combinação de HTML semântico, elementos de seção e uma pitada de microdados estruturados são tudo o que é preciso para desbloquear esse ótimo recurso.
Você não precisa fazer tudo de uma vez
Este é um post longo que cobre diferentes aspectos do Markdown e como ele interage com outras tecnologias. Pode parecer assustador, pois há muito conteúdo para cobrir algumas áreas de assunto diferentes.
A coisa sobre o trabalho de acessibilidade é que cada pouquinho ajuda. Você não precisa abordar todas as considerações que tenho neste post em uma grande e abrangente mudança. Em vez disso, tente escolher uma coisa para focar e construir a partir daí.
Saiba que cada ajuste e atualização terá um impacto direto na qualidade de vida de alguém ao usar a web, e isso é enorme.
Continue lendo na revista Smashing
- CommonMark: uma especificação formal para Markdown
- Criando uma API Node.js Express para converter Markdown em HTML
- Construindo bibliotecas de padrões com Shadow DOM em Markdown