{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2024/2024-03-25-textos-alternativo-longo",
  "path": "/blog/2024/2024-03-25-textos-alternativo-longo",
  "publishedAt": "2024-03-25T00:00:00.000Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": "frontend",
  "textContent": "Esse final de semana estava atualizando o site do meu casamento e me deparei com um problema.\n\nMinha noiva fez os textos alternativos longos e completos para a página de Galeria de fotos do nosso pré-wedding.\n\nComo utilizar esses textos alternativos de forma que pessoas não visuais possam ter a mesma experiência?\n\nVem comigo nesse artigo, que vou te explicar como resolver esse problema de maneira prática.\n\nEntendendo o texto alternativo\n\nA WCAG possui um critério de sucesso responsável por validar alternativas de texto. O critério é o 1.1.1 que nos informa:\n\n> Todo conteúdo não textual que é apresentado ao usuário tem uma alternativa de texto que serve ao propósito equivalente\n\nExistem algumas exceções, entretanto não é o objetivo esmiuçar elas. Esse critério tem a responsabilidade de dar uma experiência igualitária para as pessoas não-visuais ou de baixa visão.\n\nEscrevi um guia completo sobre texto alternativo que pode ser muito útil para compreender todo o contexto.\n\nMeu cenário\n\nPrimeiramente tentei incluir os textos alternativos longos da forma que minha noiva fez, mas percebi que essa informação poderia ficar muito confusa.\n\nDessa forma, optei por pesquisar outras soluções, graças a Deus a WCAG tem recursos muito interessantes que podem nos auxiliar para essa tarefa.\n\nAlém dos critérios de sucesso, ela conta com o apoio das técnicas de sucesso. Basicamente são técnicas que orientam para que o conteúdo seja feito de forma acessível.\n\nNo documento auxiliar Entendendo o Critério de Sucesso 1.1.1 (em inglês), existe uma sessão chamada técnicas, vamos basear nossos esforços nela.\n\nEntendendo a técnica de suficientes\n\nO critério de sucesso 1.1.1 fornece diversas técnicas suficientes, atualmente existem 6 situações para seu uso, por exemplo:\n\n- Situação A: Se uma breve descrição pode servir ao mesmo propósito e apresentar o mesmo informações como o conteúdo não textual;\n- Situação B: Se uma breve descrição não puder servir o mesmo propósito e apresentar as mesmas informações que o conteúdo não textual (por exemplo, um gráfico ou diagrama);\n- Situação C: Se o conteúdo não textual for um controle ou aceitar a entrada do usuário;\n- Situação D: conteúdo não textual for mídia baseada em tempo (incluindo somente vídeo ao vivo e somente áudio ao vivo); um teste ou exercício que seria inválido se apresentado em texto; ou Destina-se principalmente a criar uma experiência sensorial específica;\n- Situação E: Se o conteúdo não textual for um CAPTCHA\n- Situação F: o conteúdo não textual deve ser ignorado pela tecnologia assistiva.\n\nNo meu caso, a situação que mais se encaixa era a Situação B: se uma breve descrição não puder servir o propósito e apresentar as mesmas informações que o conteúdo não textual.\n\nAnalisando essa situação, encontramos a técnica alternativa para texto longo:\n\n- ARIA15: Usando aria-describedby para fornecer descrições de imagens\n\nPra minha solução vou precisar recorrer a um atributo ARIA chamado aria-describedby. O objetivo de usar essa técnica é garantir as descrições de imagens quando um texto alternativo curto não transmite adequadamente a função ou as informações fornecidas.\n\nBasicamente o que iremos fazer é associar um texto descritivo a uma sessão com o auxilio do atributo ID. Isso é semelhante quando precisamos rotular um \\<label> com um \\<input>.\n\nCompreendendo o aria-describedby\n\nO atributo aria-describedby é um atributo global que identifica um elemento ou (elementos) que descrevam o elemento no qual o atributo é definido.\n\nParece ser algo bem complexo não é mesmo? Vai por mim, é bem mais tranquilo do que parece.\n\nDescrição do aria-describedby\n\nO atributo aria-describedby lista os id’s dos elementos que descrevem o objeto. Ele é usado para estabelecer uma relação entre widgets ou grupos e o texto que os descrevem.\n\nTambém podemos destacar uma semelhança com o atributo aria-labelledby, porém, isso fica para um próximo artigo.\n\nDessa forma, pensei que poderia usar uma descrição sucinta no atributo ALT e utilizar do aria-describedby para dar um suporte mais detalhado.\n\nMinha solução\n\nAo invés de colocar um texto alternativo extremamente grande no atributo ALT eu irei fazer da seguinte forma:\n\nExplicando o código\n\nDa linha 1 a 5 defino as imagens que serão carregadas, usando a tag \\<picture> o navegador irá decidir qual imagem será carregada, note que uso dois formatos: webp (um formato mais leve e novo) e o nosso velho conhecido jpg.\n\nDessa forma, permito o browser decidir qual recurso ele irá carregar.\n\nNa linha 4, utilizo o atributo aria-describedby e passo o valor “desc1” para ele.\n\nNa linha 7 defino uma \\<div> que irá servir como um container para as informações ela possuí uma classe visually-hidden que permite que essa informação seja lida somente pelo leitor de telas e um id referenciando o mesmo valor que define no aria-describedby.\n\nNa linha 8, coloco a descrição longa que desejo.\n\nLeitura com o NVDA\n\nO NVDA irá ler as duas informações, primeiramente o ALT curto e complementar com a descrição longa.\n\nConclusão\n\nO uso do aria-describedby é uma técnica extremamente simples, porém, muito eficaz para esses cenários com um texto alternativo longo.\n\nSempre é bom lembrar que usar atributos ARIA deve ser com muita cautela, pois, com grandes poderes vem grandes responsabilidades.",
  "title": "Como criar texto alternativo longo"
}