Explicando a WCAG!

Entender a WCAG (Web Content Accessibility Guidelines) pode parecer complicado em um primeiro momento, mas acredite, é mais simples do que parece. Tudo não passa de heurísticas para o bom desenvovimento de um produto ou serviço digital e a ideia deste conteúdo é explicar cada um dos critérios de sucesso apresentados no Guia de Consulta Rápida.

Os posts abaixo representam postagens do Instagram de Marcelo Sales link externo (o autor deste material e guia). Todas as postagens originais possuem descrições de conteúdo e alternativas em textos para o seu correto entendimento. Além disso, nesta página, haverão mais links explicativos para cada um dos critérios de sucesso.

Explicando a WCAG em 70 dias... ou quase isso...

Essas postagens fazem parte de um projeto intitulado "Explicando a WCAG em 70 dias (ou quase)", cuja ideia é a de explicar cada um dos critérios de sucesso com posts diários totalizando cerca de 70 dias aproximados com a explicação de todos os 78 critérios atuais da WCAG.

Importante: Essa página pode não ter a mesma periodicidade de publicações do Instagram, no entanto caso queira comentar algum dos posts ou obter as atualizações diárias, siga meu perfil no Instagram link externo e faça isso diretamente na plataforma.

OBS: Todos os posts contam agora com o tempo de desenvolvimento de cada um, levando em consideração tempo de pesquisa, curadoria, desenvolvimento de story telling, criação de recursos visuais (Photoshop, Illustrator, After Effects), Separação de imagens e ilustrações, Conteúdo, Palavras-chaves, Adaptação nesta página, Descrição da todas as imagens no Instagram, Agendamento de publicação entre outros eventos relacionados a produção.

Dia 0 - WCAG Explicada

Neste post é iniciado a série "WCAG explicada em 70 dias!" e nele conto primeiramente como é organizada a WCAG e como você pode fazer uso dela em seus projetos digitais (ou não, pois pode-se adaptar os conceitos).

Tempo de produção: 11 horas (separados em 3 dias)

Pontos relevantes do post:

  • É correto dizer que a WCAG é a "pedra fundamental" para se ter um produto ou serviço digital com uma experiência impecável para todos, mas não esqueça que ela é apenas a base...
  • O maior motivo de um produto não esstar acessível é por que a equipe não levou em consideração a base.
  • Perceptível, Operável, Compreensivel e Robusto são os 4 princípios que formam a WCAG.
  • Níveis de criticidade diferentes para cada critério de sucesso são divididos entre A, AA e AAA. Para se ter uma acessibilidade mínima aceitável, você precisa atender todos os critérios dos níveis A e também AA.
  • Acessibilidade digital é uma ciência complexa... entender o funcionamento da WCAG vai te abrir um leque de possibilidades que provavelmente você sequer imaginava existir.

Links citados no post:

Links de referência (além do post):

Dica: Como pensar (também) nos idosos em seus projetos?

Neste post explico o relacionamento da WCAG com as (possíveis) necessidades de idosos ao interagir com interfaces atuais.

Tempo de produção: 8 horas (separados em 2 dias)

Pontos relevantes do post:

  • Frase em inglês de Don Norman: “Old people are cool, design for them sucks!“ - Tradução livre: “Os idosos são legais, o design para eles que é uma merda!”
  • Você também vai envelhecer! Segundo dados do IBGE, no Brasil o número de pessoas com mais de 65 anos é em 2020 (9%), será em 2040 (17%) e em 2060 (25%) e segundo a OMS, no mundo em 2050, uma em cada cinco pessoas terá mais de 60 anos.
  • Nielsen diz "a partir dos 25 anos, o tempo que um usuário precisa para concluir uma tarefa aumenta em 0,8% ao ano" e tem uma pesquisa bem completa sobre o público idoso.
  • Mas então, por que ainda continuamos a não pensar em idosos nos projetos? Simplesmente porque falhamos em não cumprir a base! (que significa cumprir os padrões mínimos da WCAG)
  • O pensamento sempre deve ser "para todos". Não se deve limitar a aplicação de acessibilidade a um nicho específico, pois fatalmente você irá aplica-la de forma parcial atendendo a algumas questões, porém deixando de lado outras.

Links citados no post:

Links de referência (além do post):

Dica: Menos de 1% dos sites no Brasil não possuem barreiras de acesso ou comunicação!

É um dado espantoso, mas não pra quem já atua com acessibilidade para sites e aplicativos. É claro que há uma ineficiência no ensino em todos os setores (design, tecnologia, comunicação) e isso gera produtos não inclusivos e consequentemente falhos em um propósito básico que é o acesso para todos.

Tempo de produção: 6 horas (separados em 2 dias)

Pontos relevantes do post:

  • No Brasil, menos de 1% dos sites possuem acessibilidade adequada para todas as pessoas;
  • No mundo, apenas 2% dos sites não possuem barreiras de acesso;
  • De quem é a culpa? De todos os envolvidos em todo o ciclo de produção e desenvolvimento dos sites (e produtos e serviços);
  • Esses dados são referentes apenas aos elementos com falhas detectáveis, ou seja, 35% do que se precisa avaliar. Todo o restante é relacionado a fatores humanos e não detectáveis de forma automatizada: Usabilidade ruim, conteúdo confuso e Arquitetura de informação inadequada.

Links citados no post:

Links de referência (além do post):

Dia 1 - Critério de Sucesso 1.1.1 - Conteúdo não textual

Este é o primeiro post da série "WCAG explicada em 70 dias" e conforme a sequência da própria WCAG, este é o critério de sucesso "1.1.1 - Conteúdo não textual" que trata justamente de como podemos aplicar alternativas em texto para conteúdos que não são apresentados originalmente como textos.

Tempo de produção: 12 horas (separados em 3 dias)

View this post on Instagram

Este é o primeiro post da série "WCAG explicada em 70 dias" e conforme a sequência da própria WCAG, este é o critério de sucesso "1.1.1 - Conteúdo não textual" que trata justamente de como podemos aplicar alternativas em texto para conteúdos que não são apresentados originalmente como textos. . Por que o critério existe? Descrever QUALQUER conteúdo visual é altamente importante para que todos possam entender o que está sendo apresentado, principalmente levando em consideração que recursos visuais são amplamente utilizados por designers para compor layouts e telas. . Quem são os principais beneficiados? Pessoas com deficiências visuais que podem não ver o conteúdo, bem como pessoas com deficiências cognitivas que podem não entender o conteúdo visual, pessoas surdo-cegas que “imprimem” o conteúdo em braille se beneficiam e a indexação de seus documentos no google (SEO) vai ficar muito mais rica também... ----- Importante: não confundir com conteúdos em vídeo ou áudio que serão tratados em próximos critérios. . É importante dizer também que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor cada detalhe. . Para quem quiser se aprofundar além do post, sempre será publicado referências adicionais no site http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. #wcag #acessibilidade #a11y #designinclusivo #ux

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Pontos relevantes do post:

  • Por quê o critério existe e quem são os beneficiados?
  • Pensar em contextos é fundamental, uma mesma imagem pode ter descrições completamente diferente de acordo com o seu contexto de uso;
  • Como determino se uma imagem deve ou não ter uma descrição?

Links citados no post:

Links de referência (além do post):

Dia 2 - Critérios de Sucesso 1.2.1 e 1.2.9 - Apenas áudio ou apenas vídeo (pré-gravado e ao vivo)

Neste post há 2 critérios relacionados, sendo um do nível A e outro do nível AAA. Não fazia sentido tratar dos critérios de forma separada e apesar deles serem bem parecidos com o critério 1.1.1, o foco aqui é para conteúdos de áudio ou vídeo com ênfase para as transcrições em texto.

Tempo de produção: 9 horas (separados em 3 dias)

View this post on Instagram

Continuando a série, vamos falar agora de transcrições (ou alternativas em texto para vídeo e áudio). Neste post há 2 critérios relacionados, sendo um do nível A e outro do nível AAA. Não fazia sentido tratar dos critérios de forma separada e apesar deles serem bem parecidos com o critério 1.1.1, o foco dos critérios 1.2.1 e 1.2.9 é em conteúdos de áudio ou vídeo com ênfase para as transcrições em texto. . Por que o critério existe? Similar ao critério 1.1.1 sobre descrição de conteúdo não textual, porém com foco em arquivos de mídia, como áudio e vídeo. As transcrições (não confunda com legendas) fornecem uma alternativa em texto completo que pode ser consultada a qualquer momento. . Quem são os principais beneficiados? Pessoas com deficiências auditivas que podem não ouvir o conteúdo de forma adequada, bem como pessoas com deficiências cognitivas que podem não conseguir ler as legendas e precisam ter o texto completo para ler com calma, pessoas surdo-cegas que “imprimem” o conteúdo em braille e um estudante de outro idioma pode usar o texto para reforço de aprendizado, além de seu conteúdo ser facilmente indexado por buscadores. ----- É importante dizer que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor em cada detalhe. . Para quem quiser se aprofundar além do post, referências adicionais estarão no link http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. #wcag #acessibilidade #a11y #designinclusivo #ux

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Pontos relevantes do post:

  • Por quê o critério existe e quem são os beneficiados?
  • Confundir todos os critérios da WCAG relacionados a vídeos e áudio é muito comum principalemtne devido ao não cohecimento de técnicas de edição de vídeo e nomenclaturas específicas, além da ausência de leitura do critério completo.
  • Podcasts, Vídeos pré-gravados, vídeos mudos e vídeos ao vivo são citados como exemplos.
  • Transcrever vídeos ao vivo requer ajuda de pessoas especializadas o que encarece e dificulta a aplicação.

Links citados no post:

Links de referência (além do post):

Dia 3 - Critérios de Sucesso 1.2.2 e 1.2.4 - Legendas (pré-gravado e ao vivo)

E chegamos aos critérios de sucesso relacionados ao uso de legendas em vídeos. Trata-se dos critérios 1.2.2 e 1.2.4 para aplicações em vídeos pré-gravados (A) e ao vivo (AA) respectivamente.

Tempo de produção: 11 horas (separados em 3 dias)

View this post on Instagram

E chegamos aos critérios de sucesso relacionados ao uso de legendas em vídeos. Trata-se dos critérios 1.2.2 e 1.2.4 para aplicações em vídeos pré-gravados (A) e ao vivo (AA) respectivamente. Por que o critério existe? Similar aos critérios 1.2.1 e 1.2.9 relacionados as transcrições, a principal diferença é fornecer uma alternativa em texto para áudios ou vídeos em tempo real de execução, ou seja, de forma sincronizada com o conteúdo. Quem são os principais beneficiados? Pessoas com deficiências auditivas que podem não ouvir o conteúdo de forma adequada, pessoas que em um determinado momento podem não poder ligar o som do vídeo, pessoas que assistem vídeos em outros idiomas, pessoas que assistem “stories” sem som e produtores de vídeos que podem ter seus conteúdos melhor indexados. ----- É importante dizer que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor em cada detalhe. . Para quem quiser se aprofundar além do post, referências adicionais estarão no link http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. #wcag #acessibilidade #a11y #designinclusivo #ux #legendas #closedcaption #SurdosQueOuvem #QueremosLegendas

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Pontos relevantes do post:

  • Por quê o critério existe e quem são os beneficiados?
  • Há 2 tipos principais de legendas: abertas (OS - Open Subtitle) e fechadas (CC - Closed Caption)
  • 80% dos usuários no Reino Unido, não possuem deficiência auditiva
  • 98,6% dos estudantes nos EUA consideram as legendas ocultas úteis
  • 70% é a taxa de acerto das legendas automáticas em ferramentas como o Youtube.

Links citados no post:

Links de referência (além do post):

Dia 4 - Critérios de Sucesso 1.2.3, 1.2.5, 1.2.7 e 1.2.8 - Audiodescrições ou mídias alternativas

Este post finaliza a série focada em vídeos formado pelos formatos: descrição, legendas, transcrição e agora audiodescrição. Cada um possui o seu objetivo de ser aplicado e podem ser utilizados em conjunto ou separados de acordo com contextos de apresentação. Faz parte destes post os critérios 1.2.3, 1.2.5, 1.2.7 e 1.2.8 que tratam de audiodescrições ou mídias alternativas.

Tempo de produção: 16 horas (separados em 4 dias)

View this post on Instagram

Este post finaliza a série focada em vídeos formado pelos formatos: descrição, legendas, transcrição e agora audiodescrição. Cada um possui o seu objetivo de ser aplicado e podem ser utilizados em conjunto ou separados de acordo com contextos de apresentação. Faz parte destes post os critérios 1.2.3, 1.2.5, 1.2.7 e 1.2.8 que tratam de audiodescrições ou mídias alternativas. . Por que o critério existe? Os critérios anteriores trataram de descrições de imagens, transcrições e legendas. Estes tratam diretamente de audiodescrições, o que é diferente, mas confunde demais quem não está envolvido na produção de áudio e visual. . Quem são os principais beneficiados? Pessoas cegas ou com baixa visão que podem não compreender corretamente o conteúdo apenas com o diálogo em tela, pessoas com deficiências cognitivas que podem não compreender a cena apenas com o vídeo e também pessoas que querem indexar melhor seus conteúdos em mecanismos de busca fazendo uso das transcrições. ------ É importante dizer que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor em cada detalhe. . Para quem quiser se aprofundar além do post, referências adicionais estarão no link http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. . #wcag #acessibilidade #a11y #designinclusivo #ux #audiodescrição #transcrição #vídeo #áudio

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Dia 5 - Critério de Sucesso 1.2.6 - Língua de sinais (pré-gravado)

Este post é específico sobre a língua de sinais aplicada em mídias com áudio (pré-gravados). ele representa o critério de sucesso 1.2.6 da WCAG.

Tempo de produção: 13 horas (separados em 2 dias)

View this post on Instagram

Este post é específico sobre a língua de sinais aplicada em mídias com áudio (pré-gravados). Ele representa o critério de sucesso 1.2.6 da WCAG. . Por que o critério existe? O objetivo é dar alternativa através de língua de sinais (no Brasil) ou língua gestual (em Portugal) para que o acesso a informação seja feito de forma universal e todos possam consumir o conteúdo sem barreiras de comunicação. Serve pra vídeos, eventos, “lives” e similares... mas este critério trata apenas de mídias com áudio pré-gravados, não sendo direcionado para sites e aplicativos. (Futuras versões da WCAG tratarão essa questão) . Quem são os principais beneficiados? Pessoas com deficiências auditivas que não escutam ou tem dificuldade em escutar ou que não entendem bem o idioma de seu país de origem (a maioria) e precisam que um intérprete traduza o conteúdo. . É importante dizer que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor em cada detalhe. . Para quem quiser se aprofundar além do post, referências adicionais estarão no link http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. . #wcag #acessibilidade #a11y #designinclusivo #ux #libras #surdos #línguadesinais #asl #avatar

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Pontos relevantes do post:

  • Por quê o critério existe e quem são os beneficiados?
  • Curiosidades sobre língua de sinais...
  • Como é a estrutura da língua de sinais?
  • Ptincipal problema da WCAG neste critério
  • Principal problema dos aplicativos com avatares intérpretes...
  • Projetos que envolvem libras e valem a pena conhecer.

Links citados no post:

Links de referência (além do post):

Dia 6 - Critério de Sucesso 1.3.1 - Informações e Relações

Este é o 11º critério de sucesso explicado nesta série de posts e nele eu falo sobre o 1.3.1 - Informações e Relações. Talvez este seja o critério mais importante de todos, pois mostra claramente o motivo da acessibilidade não ser aplicada adequadamente nos projetos. Ele trata indiretamente do relacionamento necessário entre as equipes e diferentes áreas durante todo o ciclo de desenvolvimento do produto digital.

Tempo de produção: 19 horas (separados em 6 dias)

View this post on Instagram

Este é o 11º critério de sucesso explicado nesta série de posts e nele eu falo sobre o 1.3.1 - Informações e Relações. Talvez este seja o critério mais importante de todos, pois mostra claramente o motivo da acessibilidade não ser aplicada adequadamente nos projetos. Ele trata indiretamente do relacionamento necessário entre as equipes e diferentes áreas durante todo o ciclo de desenvolvimento do produto digital. . Por que o critério existe? É importante que os relacionamentos entre elementos que estão visíveis na tela, também faça sentido quando eles “não estão visíveis”. Exemplo: Quando alguém usa um leitor de telas e apenas ouve as informações, será que ele tem a mesma percepção do conteúdo assim como alguém que está vendo a tela? . Quem são os principais beneficiados? Pessoas com deficiências visuais e que usam leitores de tela precisam saber quais são os elementos que estão navegando para que tudo faça sentido (da mesma forma que faz pra quem está vendo o conteúdo). Pessoas que querem indexar melhor seus conteúdos em buscadores (SEO) através de uma organização semântica do código . É importante dizer que o objetivo dessa série é explicar de uma forma simples e com exemplos práticos todos os critérios da WCAG, mas isso não substitui uma leitura completa do critério para entender melhor em cada detalhe. . Para quem quiser se aprofundar além do post, referências adicionais estarão no link http://guiawcag.com/ajuda, consulte-o. . E qualquer dúvida que tenha com relação a esse post, sinta-se a vontade para comentar. . #wcag #acessibilidade #a11y #designinclusivo #ux #design #desenvolvimento #conteúdo #uxwriter #uxwriting #arquiteturadeinformação #usabilidade

A post shared by Marcelo Sales | Acessibilidade (@msales) on

Pontos relevantes do post:

  • Por quê o critério existe e quem são os beneficiados?
  • Este é o critério determinante para compreender todos os demais e os relacionamentos entre elementos e também entre pessoas envolvidas nos projetos
  • Responsabilidades de designers, ux writers e desenvolvedores (principalmente) e de outros profissionais relacionados
  • Arquitetura de Informação, Conteúdo claro e previsível e Código semântico são a base para uma boa acessibilidade
  • Relacionamentos entre elementos visíveis e elementos que não são vistos
  • Funcionamento dos leitores de tela ao identificar as relações corretas dos elementos
  • WCAG representa o "Como fazer"!

Links citados no post:

Links de referência (além do post):

Acesse o Guia de Consulta Rápida...

Se você chegou direto a esta página, saiba que ela faz parte do Guia de Consulta Rápida da WCAG.

Este material faz parte do projeto Acessibilidade Toolkit link externo, cuja ideia original é disponibilizar todos os critérios de sucesso de forma simplificada e em formato de cartões manipuláveis.