SlideShare uma empresa Scribd logo
WCAG 2.2 e WCAG 3.0
Reinaldo Ferraz – 17 de julho de 2021
@reinaldoferraz
https://pt.slideshare.net/CentroWeb reinaldoferraz.com.br
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
IMPORTANTE
Os documentos estão em Working Draft.
Isso significa que ainda podem sofrer mudanças.
Diretrizes WCAG 2.2
WCAG 2.2
87 critérios de sucesso
(9 novas diretrizes)
A AA AAA
Níveis de conformidade WCAG 2.2
Novas diretrizes WCAG 2.2
• Critério de Sucesso 2.4.11 Foco Visível (Mínimo) AA
• Critério de Sucesso 2.4.12 Foco Visível (Aprimorado) AAA
• Critério de Sucesso 2.4.13 Pontos de Referência Fixos A
• Critério de Sucesso 2.5.7 Arrastando AA
• Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro AA
• Critério de Sucesso 3.2.6 Ajuda Localizável A
• Critério de Sucesso 3.2.7 Controles Escondidos AA
• Critério de Sucesso 3.3.7 Autenticação Acessível A
• Critério de Sucesso 3.3.8 Entrada Redundante A
Critério de Sucesso 2.4.11 Foco Visível (Mínimo)
Elementos interativos que recebem foco
pelo teclado devem ter um indicador que
considere:
Novo – Nível AA
Critério de Sucesso 2.4.11 Foco Visível (Mínimo)
Borda visível de pelo menos 1 pixel
Novo – Nível AA
Critério de Sucesso 2.4.11 Foco Visível (Mínimo)
Contraste entre as cores dos estados
Novo – Nível AA
Critério de Sucesso 2.4.11 Foco Visível (Mínimo)
Contraste com as cores adjacentes
Novo – Nível AA
Critério de Sucesso 2.4.11 Foco Visível (Mínimo)
O elemento interativo não deve estar escondido
Novo – Nível AA
Critério de Sucesso 2.4.12 Foco Visível (Aprimorado)
Área mínima:
Deve ter borda sólida igual ou maior que 2 pixels CSS ao redor do elemento.
Mudança de contraste:
A taxa de contraste é de pelo menos 4,5: 1
Não obscurecido:
Nenhuma parte do elemento pode ficar escondida
Novo – Nível AAA
https://contrast-ratio.com/
https://contrast-ratio.com/
https://contrast-ratio.com/
Critério de Sucesso 2.4.13 Pontos de Referência Fixos
Fornecer localizador em uma
publicação digital na Web que
tenha quebra de páginas.
Novo – Nível A
Critério de Sucesso 2.4.13 Pontos de Referência Fixos Novo – Nível A
“Veja o exemplo nesta mesma página”
Critério de Sucesso 2.4.13 Pontos de Referência Fixos Novo – Nível A
Critério de Sucesso 2.5.7 Arrastando
Todas as funcionalidades que usam um
movimento de arrastar podem ser
operadas por um único ponteiro sem
arrastar.
Novo – Nível AA
Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro
Para cada região que aceita uma ação de
ponteiro, há uma área com largura e altura
de pelo menos 44 pixels CSS.
Novo – Nível AA
Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro Novo – Nível AA
Critério de Sucesso 3.2.6 Ajuda Localizável
Todo site ou aplicação deve ter uma forma
de ajuda, seja ela feita por contato humano
(como um e-mail ou telefone) ou
mecanismo automatizado (faq ou chat
automatizado).
Novo – Nível A
People vector created by pch.vector - www.freepik.com
Critério de Sucesso 3.2.7 Controles Escondidos
Os controles necessários para progredir ou
concluir um processo são visíveis no
momento em que são necessários.
Novo – Nível AA
Computer vector created by upklyak - www.freepik.com
Critério de Sucesso 3.3.7 Autenticação Acessível
Se um processo de autenticação depende
de um teste de função cognitiva, pelo
menos um outro método também deve
estar disponível que não dependa de um
teste de função cognitiva.
Novo – Nível A
Critério de Sucesso 3.3.8 Entrada Redundante
Para as etapas de um processo, as
informações previamente inseridas que são
necessárias nas etapas seguintes são
preenchidas automaticamente ou estão
disponíveis para o usuário selecionar.
Novo – Nível A
WCAG 3.0
W3C Accessible Guidelines
Accessible Guidelines 3.0
• Direcionada a necessidade do usuário
• Vai incorporar conteúdo de UAAG e ATAG
• Incorpora testes automáticos e holísticos
• Pretende deixar a compreensão das diretrizes mais simples
Accessible Guidelines 3.0 - Diretrizes
• Text alternatives (alternativas em texto)
• Clear words (palavras fáceis)
• Captions (legendas)
• Structured content (conteúdo estruturado)
• Visual contrast of text (contraste de texto visual)
Accessible Guidelines 3.0 – Alternativa em texto
• Planejamento
• “Garanta que todo conteúdo não textual
tenha uma alternativa em texto”
• Design
• “Trabalhe com produtores de conteúdo e
desenvolvedores para fornecer texto
alternativo”
• Desenvolvimento
• “Garanta que texto alternativo em
imagens funcionais foi adicionado”
Design vector created by stories - www.freepik.com
Accessible Guidelines 3.0 – Categorias funcionais
Categorias funcionais para alternativas em texto disponíveis
• Sensorial - Visão e Visual
• Interseções sensoriais
• Cognitivo - linguagem e alfabetização
• Cognitivo - Aprendizagem
• Cognitivo - Memória
• Cognitivo - Saúde Mental
• Intersecções cognitivas e sensoriais
Medical vector created by macrovector_official - www.freepik.com
Accessible Guidelines 3.0 – Erros críticos
Erros críticos para alternativa em texto
“Qualquer imagem de texto sem uma
alternativa de texto apropriada
necessária para concluir um processo.”
Accessible Guidelines 3.0 - Pontuação
Nota Critério
Nota 0
Menos de 60% de todas as imagens têm alternativas de texto
adequadas OU há um erro crítico no processo
Nota 1
60% - 69% de todas as imagens têm alternativas de texto
adequadas E nenhum erro crítico no processo
Nota 2
70% - 79% de todas as imagens têm alternativas de texto
adequadas E nenhum erro crítico no processo
Nota 3
80% - 94% de todas as imagens têm alternativas de texto
adequadas E nenhum erro crítico no processo
Nota 4
95% a 100% de todas as imagens têm alternativas de texto
adequadas E nenhum erro crítico no processo
Classificação para alternativa em texto disponível
Accessible Guidelines 3.0 - Testes
• Atomic test
• Verificam a conformidade
com WCAG. Podem ser
automáticos ou manuais
• Holistic Tests
• Com foco no usuário. Uso
de tecnologia assistiva.
Accessible Guidelines 3.0 - Conformidade
• Bronze
• Nível mínimo
• Verificação baseada em “atomic test”
• Pontuação total de cada diretriz deve ser de pelo menos 3,5 e
• Não devem existir erros críticos
Accessible Guidelines 3.0 - Conformidade
• Bronze
• Nível mínimo
• Verificação baseada em “atomic test”
• Pontuação total de cada diretriz deve ser de pelo menos 3,5 e
• Não devem existir erros críticos
• Silver
• Nível intermediário
• Todos os requisitos da conformidade bronze mais
• Alguns testes holísticos
Accessible Guidelines 3.0 - Conformidade
• Bronze
• Nível mínimo
• Verificação baseada em “atomic test”
• Pontuação total de cada diretriz deve ser de pelo menos 3,5 e
• Não devem existir erros críticos
• Silver
• Nível intermediário
• Todos os requisitos da conformidade bronze mais
• Alguns testes holísticos
• Gold
• Nível mais alto
• Todos os requisitos de conformidade de bronze e silver mais
• Testes holísticos adicionais
Colabore com a evolução dos padrões
https://github.com/w3c/wcag/
https://github.com/w3c/silver/
public-agwg-comments@w3.org
Obrigado
reinaldo@nic.br @reinaldoferraz
Crédito das ilustrações: Freepik.com

Mais conteúdo relacionado

Mais procurados

Hardware - Peças - Classificação
Hardware - Peças - ClassificaçãoHardware - Peças - Classificação
Hardware - Peças - Classificação
Rodolfo Santos
 
Hipertensão o que é isso?
Hipertensão o que é isso?Hipertensão o que é isso?
Hipertensão o que é isso?
Professor Robson
 
Cartilha diabetes
Cartilha diabetesCartilha diabetes
Cartilha diabetes
Ana Filadelfi
 
Diabetes mellitus
Diabetes mellitusDiabetes mellitus
Datacenter - Apresentação
Datacenter - ApresentaçãoDatacenter - Apresentação
Datacenter - Apresentação
Ruy Mendonça
 
Esquizofrênia - Leonardo Nunes
Esquizofrênia - Leonardo NunesEsquizofrênia - Leonardo Nunes
Unidade iii tipos de softwares
Unidade iii   tipos de softwaresUnidade iii   tipos de softwares
Unidade iii tipos de softwares
Daniel Moura
 
Diabetes
Diabetes Diabetes
Diabetes
Renato
 
9948 – Redes e protocolos multimédia.pptx
9948 – Redes e protocolos multimédia.pptx9948 – Redes e protocolos multimédia.pptx
9948 – Redes e protocolos multimédia.pptx
BrancaSilva9
 
Sistemas de Gerenciamento de Conteúdo
Sistemas de Gerenciamento de ConteúdoSistemas de Gerenciamento de Conteúdo
Sistemas de Gerenciamento de Conteúdo
Tiago Celestino
 
Diabete mellitus
Diabete mellitusDiabete mellitus
Diabete mellitus
mael007
 
2o Ano.Bioquimica.Seminario De Pratica Glicemia
2o Ano.Bioquimica.Seminario De Pratica   Glicemia2o Ano.Bioquimica.Seminario De Pratica   Glicemia
2o Ano.Bioquimica.Seminario De Pratica Glicemia
Jose Eduardo
 
CON08 - VLAN.pdf
CON08 - VLAN.pdfCON08 - VLAN.pdf
CON08 - VLAN.pdf
Silvano Oliveira
 
Seminario neuro mal de parkinson
Seminario neuro   mal de parkinsonSeminario neuro   mal de parkinson
Seminario neuro mal de parkinson
Hannah Dantas
 
Power Point 2007
Power Point 2007Power Point 2007
Power Point 2007
Andrea Bruzaca
 
Apresentação diabetes
Apresentação diabetesApresentação diabetes
Apresentação diabetes
Nilson Edmilson
 

Mais procurados (16)

Hardware - Peças - Classificação
Hardware - Peças - ClassificaçãoHardware - Peças - Classificação
Hardware - Peças - Classificação
 
Hipertensão o que é isso?
Hipertensão o que é isso?Hipertensão o que é isso?
Hipertensão o que é isso?
 
Cartilha diabetes
Cartilha diabetesCartilha diabetes
Cartilha diabetes
 
Diabetes mellitus
Diabetes mellitusDiabetes mellitus
Diabetes mellitus
 
Datacenter - Apresentação
Datacenter - ApresentaçãoDatacenter - Apresentação
Datacenter - Apresentação
 
Esquizofrênia - Leonardo Nunes
Esquizofrênia - Leonardo NunesEsquizofrênia - Leonardo Nunes
Esquizofrênia - Leonardo Nunes
 
Unidade iii tipos de softwares
Unidade iii   tipos de softwaresUnidade iii   tipos de softwares
Unidade iii tipos de softwares
 
Diabetes
Diabetes Diabetes
Diabetes
 
9948 – Redes e protocolos multimédia.pptx
9948 – Redes e protocolos multimédia.pptx9948 – Redes e protocolos multimédia.pptx
9948 – Redes e protocolos multimédia.pptx
 
Sistemas de Gerenciamento de Conteúdo
Sistemas de Gerenciamento de ConteúdoSistemas de Gerenciamento de Conteúdo
Sistemas de Gerenciamento de Conteúdo
 
Diabete mellitus
Diabete mellitusDiabete mellitus
Diabete mellitus
 
2o Ano.Bioquimica.Seminario De Pratica Glicemia
2o Ano.Bioquimica.Seminario De Pratica   Glicemia2o Ano.Bioquimica.Seminario De Pratica   Glicemia
2o Ano.Bioquimica.Seminario De Pratica Glicemia
 
CON08 - VLAN.pdf
CON08 - VLAN.pdfCON08 - VLAN.pdf
CON08 - VLAN.pdf
 
Seminario neuro mal de parkinson
Seminario neuro   mal de parkinsonSeminario neuro   mal de parkinson
Seminario neuro mal de parkinson
 
Power Point 2007
Power Point 2007Power Point 2007
Power Point 2007
 
Apresentação diabetes
Apresentação diabetesApresentação diabetes
Apresentação diabetes
 

Semelhante a WCAG 2.2 e 3.0

Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Centro Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Centro Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Reinaldo Ferraz
 
Avaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas WebAvaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas Web
Agrupamento de Escolas da Guia-Pombal
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
Davidson Fellipe
 
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariaisRuby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Rodrigo Recio
 
Automação de testes: Teoria e Prática (SENAI) - Qualister
Automação de testes: Teoria e Prática (SENAI) - QualisterAutomação de testes: Teoria e Prática (SENAI) - Qualister
Automação de testes: Teoria e Prática (SENAI) - Qualister
Cristiano Caetano
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Centro Web
 
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
Renato Groff
 
Avaliação Interface Humano-Computador - Portal UFS
Avaliação Interface Humano-Computador - Portal UFSAvaliação Interface Humano-Computador - Portal UFS
Avaliação Interface Humano-Computador - Portal UFS
Felipe J. R. Vieira
 
Dicas para uma maior performance em APIs REST - Renato Groffe
Dicas para uma maior performance em APIs REST - Renato GroffeDicas para uma maior performance em APIs REST - Renato Groffe
Dicas para uma maior performance em APIs REST - Renato Groffe
iMasters
 
Web Standards
Web StandardsWeb Standards
Web Standards
Manoel dos Santos
 
Relatório do site-detalhado
Relatório do site-detalhadoRelatório do site-detalhado
Relatório do site-detalhado
anabelatriguinho
 
Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5
Andre A. Verissimo da Silva
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de Acessibilidade
Fernando Ruano
 
[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados
Samanta Cicilia
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application Insights
Renato Groff
 
Html 5
Html 5Html 5
Html 5
Daniel Lima
 
Todas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágilTodas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágil
Elias Nogueira
 

Semelhante a WCAG 2.2 e 3.0 (20)

Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Avaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas WebAvaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas Web
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
 
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariaisRuby on Rails: um estudo de viabilidade em ambientes empresariais
Ruby on Rails: um estudo de viabilidade em ambientes empresariais
 
Automação de testes: Teoria e Prática (SENAI) - Qualister
Automação de testes: Teoria e Prática (SENAI) - QualisterAutomação de testes: Teoria e Prática (SENAI) - Qualister
Automação de testes: Teoria e Prática (SENAI) - Qualister
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
Dicas para uma maior performance em APIs REST - Tech Meetup - Itaú Unibanco -...
 
Avaliação Interface Humano-Computador - Portal UFS
Avaliação Interface Humano-Computador - Portal UFSAvaliação Interface Humano-Computador - Portal UFS
Avaliação Interface Humano-Computador - Portal UFS
 
Dicas para uma maior performance em APIs REST - Renato Groffe
Dicas para uma maior performance em APIs REST - Renato GroffeDicas para uma maior performance em APIs REST - Renato Groffe
Dicas para uma maior performance em APIs REST - Renato Groffe
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Relatório do site-detalhado
Relatório do site-detalhadoRelatório do site-detalhado
Relatório do site-detalhado
 
Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de Acessibilidade
 
[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados[DevOps Carioca] Testes Automatizados
[DevOps Carioca] Testes Automatizados
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application Insights
 
Html 5
Html 5Html 5
Html 5
 
Todas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágilTodas as abordagens de testes dentro do ágil
Todas as abordagens de testes dentro do ágil
 

Mais de Reinaldo Ferraz

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
Reinaldo Ferraz
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
Reinaldo Ferraz
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
Reinaldo Ferraz
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
Reinaldo Ferraz
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
Reinaldo Ferraz
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
Reinaldo Ferraz
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
Reinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Reinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
Reinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Reinaldo Ferraz
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
Reinaldo Ferraz
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
Reinaldo Ferraz
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Reinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
Reinaldo Ferraz
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
Reinaldo Ferraz
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Reinaldo Ferraz
 
Re-descentralizar a web!
Re-descentralizar a web!Re-descentralizar a web!
Re-descentralizar a web!
Reinaldo Ferraz
 

Mais de Reinaldo Ferraz (20)

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
 
ALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEOALT and TITLE attributes in images and SEO
ALT and TITLE attributes in images and SEO
 
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
Web das Coisas - Que tal fazer coisas que sejam realmente úteis?
 
Re-descentralizar a web!
Re-descentralizar a web!Re-descentralizar a web!
Re-descentralizar a web!
 

WCAG 2.2 e 3.0

  • 1. WCAG 2.2 e WCAG 3.0 Reinaldo Ferraz – 17 de julho de 2021
  • 7. IMPORTANTE Os documentos estão em Working Draft. Isso significa que ainda podem sofrer mudanças.
  • 8. Diretrizes WCAG 2.2 WCAG 2.2 87 critérios de sucesso (9 novas diretrizes)
  • 9. A AA AAA Níveis de conformidade WCAG 2.2
  • 10. Novas diretrizes WCAG 2.2 • Critério de Sucesso 2.4.11 Foco Visível (Mínimo) AA • Critério de Sucesso 2.4.12 Foco Visível (Aprimorado) AAA • Critério de Sucesso 2.4.13 Pontos de Referência Fixos A • Critério de Sucesso 2.5.7 Arrastando AA • Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro AA • Critério de Sucesso 3.2.6 Ajuda Localizável A • Critério de Sucesso 3.2.7 Controles Escondidos AA • Critério de Sucesso 3.3.7 Autenticação Acessível A • Critério de Sucesso 3.3.8 Entrada Redundante A
  • 11. Critério de Sucesso 2.4.11 Foco Visível (Mínimo) Elementos interativos que recebem foco pelo teclado devem ter um indicador que considere: Novo – Nível AA
  • 12. Critério de Sucesso 2.4.11 Foco Visível (Mínimo) Borda visível de pelo menos 1 pixel Novo – Nível AA
  • 13. Critério de Sucesso 2.4.11 Foco Visível (Mínimo) Contraste entre as cores dos estados Novo – Nível AA
  • 14. Critério de Sucesso 2.4.11 Foco Visível (Mínimo) Contraste com as cores adjacentes Novo – Nível AA
  • 15. Critério de Sucesso 2.4.11 Foco Visível (Mínimo) O elemento interativo não deve estar escondido Novo – Nível AA
  • 16. Critério de Sucesso 2.4.12 Foco Visível (Aprimorado) Área mínima: Deve ter borda sólida igual ou maior que 2 pixels CSS ao redor do elemento. Mudança de contraste: A taxa de contraste é de pelo menos 4,5: 1 Não obscurecido: Nenhuma parte do elemento pode ficar escondida Novo – Nível AAA
  • 20. Critério de Sucesso 2.4.13 Pontos de Referência Fixos Fornecer localizador em uma publicação digital na Web que tenha quebra de páginas. Novo – Nível A
  • 21. Critério de Sucesso 2.4.13 Pontos de Referência Fixos Novo – Nível A “Veja o exemplo nesta mesma página”
  • 22. Critério de Sucesso 2.4.13 Pontos de Referência Fixos Novo – Nível A
  • 23. Critério de Sucesso 2.5.7 Arrastando Todas as funcionalidades que usam um movimento de arrastar podem ser operadas por um único ponteiro sem arrastar. Novo – Nível AA
  • 24. Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro Para cada região que aceita uma ação de ponteiro, há uma área com largura e altura de pelo menos 44 pixels CSS. Novo – Nível AA
  • 25. Critério de Sucesso 2.5.8 Espaçamento de Alvo do Ponteiro Novo – Nível AA
  • 26. Critério de Sucesso 3.2.6 Ajuda Localizável Todo site ou aplicação deve ter uma forma de ajuda, seja ela feita por contato humano (como um e-mail ou telefone) ou mecanismo automatizado (faq ou chat automatizado). Novo – Nível A People vector created by pch.vector - www.freepik.com
  • 27. Critério de Sucesso 3.2.7 Controles Escondidos Os controles necessários para progredir ou concluir um processo são visíveis no momento em que são necessários. Novo – Nível AA Computer vector created by upklyak - www.freepik.com
  • 28. Critério de Sucesso 3.3.7 Autenticação Acessível Se um processo de autenticação depende de um teste de função cognitiva, pelo menos um outro método também deve estar disponível que não dependa de um teste de função cognitiva. Novo – Nível A
  • 29. Critério de Sucesso 3.3.8 Entrada Redundante Para as etapas de um processo, as informações previamente inseridas que são necessárias nas etapas seguintes são preenchidas automaticamente ou estão disponíveis para o usuário selecionar. Novo – Nível A
  • 31. Accessible Guidelines 3.0 • Direcionada a necessidade do usuário • Vai incorporar conteúdo de UAAG e ATAG • Incorpora testes automáticos e holísticos • Pretende deixar a compreensão das diretrizes mais simples
  • 32. Accessible Guidelines 3.0 - Diretrizes • Text alternatives (alternativas em texto) • Clear words (palavras fáceis) • Captions (legendas) • Structured content (conteúdo estruturado) • Visual contrast of text (contraste de texto visual)
  • 33. Accessible Guidelines 3.0 – Alternativa em texto • Planejamento • “Garanta que todo conteúdo não textual tenha uma alternativa em texto” • Design • “Trabalhe com produtores de conteúdo e desenvolvedores para fornecer texto alternativo” • Desenvolvimento • “Garanta que texto alternativo em imagens funcionais foi adicionado” Design vector created by stories - www.freepik.com
  • 34. Accessible Guidelines 3.0 – Categorias funcionais Categorias funcionais para alternativas em texto disponíveis • Sensorial - Visão e Visual • Interseções sensoriais • Cognitivo - linguagem e alfabetização • Cognitivo - Aprendizagem • Cognitivo - Memória • Cognitivo - Saúde Mental • Intersecções cognitivas e sensoriais Medical vector created by macrovector_official - www.freepik.com
  • 35. Accessible Guidelines 3.0 – Erros críticos Erros críticos para alternativa em texto “Qualquer imagem de texto sem uma alternativa de texto apropriada necessária para concluir um processo.”
  • 36. Accessible Guidelines 3.0 - Pontuação Nota Critério Nota 0 Menos de 60% de todas as imagens têm alternativas de texto adequadas OU há um erro crítico no processo Nota 1 60% - 69% de todas as imagens têm alternativas de texto adequadas E nenhum erro crítico no processo Nota 2 70% - 79% de todas as imagens têm alternativas de texto adequadas E nenhum erro crítico no processo Nota 3 80% - 94% de todas as imagens têm alternativas de texto adequadas E nenhum erro crítico no processo Nota 4 95% a 100% de todas as imagens têm alternativas de texto adequadas E nenhum erro crítico no processo Classificação para alternativa em texto disponível
  • 37. Accessible Guidelines 3.0 - Testes • Atomic test • Verificam a conformidade com WCAG. Podem ser automáticos ou manuais • Holistic Tests • Com foco no usuário. Uso de tecnologia assistiva.
  • 38. Accessible Guidelines 3.0 - Conformidade • Bronze • Nível mínimo • Verificação baseada em “atomic test” • Pontuação total de cada diretriz deve ser de pelo menos 3,5 e • Não devem existir erros críticos
  • 39. Accessible Guidelines 3.0 - Conformidade • Bronze • Nível mínimo • Verificação baseada em “atomic test” • Pontuação total de cada diretriz deve ser de pelo menos 3,5 e • Não devem existir erros críticos • Silver • Nível intermediário • Todos os requisitos da conformidade bronze mais • Alguns testes holísticos
  • 40. Accessible Guidelines 3.0 - Conformidade • Bronze • Nível mínimo • Verificação baseada em “atomic test” • Pontuação total de cada diretriz deve ser de pelo menos 3,5 e • Não devem existir erros críticos • Silver • Nível intermediário • Todos os requisitos da conformidade bronze mais • Alguns testes holísticos • Gold • Nível mais alto • Todos os requisitos de conformidade de bronze e silver mais • Testes holísticos adicionais
  • 41. Colabore com a evolução dos padrões https://github.com/w3c/wcag/ https://github.com/w3c/silver/ public-agwg-comments@w3.org