SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
WCAG 2.1
Reinaldo Ferraz - 26 de abril de 2019
@reinaldoferraz
https://www.w3.org/TR/WCAG/
https://www.w3.org/TR/WCAG/
https://www.w3.org/TR/WCAG20/
https://www.w3.org/Translations/WCAG20-pt-br/
https://www.w3.org/Translations/WCAG20-pt-br/
Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG
Diretrizes WCAG 2.1
WCAG 2.0
61 critérios de sucesso
A AA AAA
Algumas diretrizes WCAG 2.0
• Critério de sucesso 1.1.1 Conteúdo Não Textual: A
• Critério de sucesso 1.2.2 Legendas (Pré-gravadas): A
• Critério de sucesso 1.4.1 Utilização de Cores: A
• Critério de sucesso 1.4.4 Redimensionar texto: A
• Critério de sucesso 2.1.1 Teclado: A
• Critério de sucesso 2.3.1 Três Flashes ou Abaixo do Limite: A
• Critério de sucesso 2.4.1 Ignorar Blocos: A
• Critério de sucesso 3.1.1 Idioma da Página: A
• Critério de sucesso 3.3.1 Identificação do Erro: A
• Critério de sucesso 3.3.2 Rótulos ou Instruções: A
• E outras 51 diretrizes...
Diretrizes WCAG 2.1
WCAG 2.1
78 critérios de sucesso
(17 novas diretrizes)
Novas diretrizes WCAG 2.1
• Critério de sucesso 1.3.4 Orientação AA
• Critério de sucesso 1.3.5 Identificação de campos de entrada AA
• Critério de sucesso 1.4.10 Reorganização de conteúdo AA
• Critério de sucesso 1.4.11 Contraste em conteúdo não textual AA
• Critério de sucesso 1.4.12 Espaçamento de texto AA
• Critério de sucesso 1.4.13 Passar o mouse e foco AA
• Critério de sucesso 2.1.4 Atalhos de teclas de caracteres A
• Critério de sucesso 2.5.1 Gestos de ponteiros A
• Critério de sucesso 2.5.2 Cancelamento de ponteiro A
• Critério de sucesso 2.5.3 Rótulo no nome A
• Critério de sucesso 2.5.4 Atuação de movimento A
Critério de sucesso 1.3.4 Orientação
O conteúdo não restringe sua visualização
e operação a uma única orientação de
exibição, como retrato ou paisagem.
Novo – Nível AA
Arrow vector created by macrovector - www.freepik.com
Critério de sucesso 1.3.5 Identificação de campos de entrada
Todo campo de formulário em uma página
Web deve ser determinado em forma de
código de programação.
Novo – Nível AA
Background vector created by zarubin-leonid - www.freepik.com
Critério de sucesso 1.3.5 Identificação de campos de entrada Novo – Nível AA
• "name"
• "honorific-prefix"
• "given-name"
• "additional-name"
• "family-name"
• "honorific-suffix"
• "nickname"
• "username"
• "new-password"
• "current-password"
• "organization-title"
• "organization"
• "street-address"
• "address-line1"
• "country"
• "postal-code"
• "cc-name"
• "cc-given-name"
• "language"
• "sex"
• "url"
• "photo“
• …
<form autocomplete="on">
<input type="text" autocomplete="name">
<input type="email“ autocomplete="email">
https://www.w3.org/TR/html52/sec-forms.html#autofill-field
Critério de sucesso 1.4.10 Reorganização de conteúdo
O conteúdo com zoom de 400% pode ser
apresentado sem perda de informações ou
funcionalidade e sem a necessidade de
rolagem em duas dimensões.
• Representa um viewport de 1280 x 1024
pixels quando em 400%
Novo – Nível AA
Business vector created by freepik - www.freepik.com
Critério de sucesso 1.4.11 Contraste em conteúdo não textual
A apresentação visual dos seguintes itens
tem uma relação de contraste de pelo
menos 3:1 contra cor (es) adjacente (s):
• Componentes da interface do usuário
(botões, links e outros elementos interativos,
exceto quando estão desabilitados)
• Objetos Gráficos
(gráficos necessários para a compreensão do
conteúdo)
Novo – Nível AA
Critério de sucesso 1.4.12 Espaçamento de texto
Não existe perda de conteúdo ou
funcionalidade quando o usuário altera o
espaçamento de texto.
Novo – Nível AA
Critério de sucesso 1.4.13 Passar o mouse e foco
O conteúdo que é exibido quando passar o
mouse ou pelo foco do teclado deve
permitir que o usuário acesse, despreze ou
mova o foco para evitar acionamento
acidental.
Novo – Nível AA
Infographic vector created by freepik - www.freepik.com
Critério de sucesso 1.4.13 Passar o mouse e foco Novo – Nível AA
Critério de sucesso 2.1.4 Atalhos de teclas de caracteres
Se um atalho de teclado for implementado
usando apenas letras (incluindo letras
maiúsculas e minúsculas), pontuação,
número ou caracteres de símbolos, deve
ser possível Desligar, Remapear ou ativá-lo
apenas com foco
Novo – Nível A
Logo vector created by freepik - www.freepik.com
Critério de sucesso 2.1.4 Atalhos de teclas de caracteres Novo – Nível A
M – Desligar áudio
N – Próxima mensagem
P – Próxima mensagem
Pedro! Você viu
a Ammy por ai?
Background vector created by freepik - www.freepik.com
Critério de sucesso 2.5.1 Gestos de ponteiros
Toda funcionalidade que usa gestos
multiponto ou baseados em caminhos para
operação pode ser operada com um único
ponteiro sem um gesto baseado em
caminho.
Novo – Nível A
Design vector created by freepik - www.freepik.com
Critério de sucesso 2.5.1 Gestos de ponteiros Novo – Nível A
+
- Background vector created by rawpixel.com - www.freepik.com
Critério de sucesso 2.5.2 Cancelamento de ponteiro
Deve existir uma forma de cancelar a
ativação por toque ou clique, minimizando
problemas de acionamento acidental do
conteúdo interativo.
Novo – Nível A
Background vector created by iconicbestiary - www.freepik.com
Critério de sucesso 2.5.2 Cancelamento de ponteiro Novo – Nível A
Down-event Up-event
Critério de sucesso 2.5.3 Rótulo no nome
Para componentes da interface do usuário
com rótulos que incluem texto ou imagens
de texto, o nome contém o texto que é
apresentado visualmente.
Novo – Nível A
Vintage vector created by by freepik - www.freepik.com
Critério de sucesso 2.5.3 Rótulo no nome Novo – Nível A
<input type="image" id="image" alt=“Play" src=“play.png">
Critério de sucesso 2.5.4 Atuação de movimento
A funcionalidade que pode ser operada
pelo movimento do dispositivo ou pelo
movimento do usuário também pode ser
operada pelos componentes da interface
do usuário, e a resposta ao movimento
pode ser desativada para impedir o
acionamento acidental.
Novo – Nível A
Technology vector created by freepik - www.freepik.com
https://www.w3.org/TR/WCAG/
Obrigado
www.w3c.br
reinaldol@nic.br @reinaldoferraz
Imagens ilustrativas de Freepik.com

Mais conteúdo relacionado

Semelhante a WCAG 2.1: Princípios e Diretrizes para Acessibilidade Web

Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphoneRenato Nitta
 
Barometro de tecnologia da web 2020
Barometro de tecnologia da web   2020Barometro de tecnologia da web   2020
Barometro de tecnologia da web 2020La Fabrique du net
 
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
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5José Farias
 
Impulsionando startups com api publica
Impulsionando startups com api publicaImpulsionando startups com api publica
Impulsionando startups com api publicaFábio Rosato
 
MTC - Automatizando Visual Regression Testing
MTC - Automatizando Visual Regression TestingMTC - Automatizando Visual Regression Testing
MTC - Automatizando Visual Regression TestingSamanta Cicilia
 
Ruby On Rails - Porque Utilizar?
Ruby On Rails - Porque Utilizar?Ruby On Rails - Porque Utilizar?
Ruby On Rails - Porque Utilizar?David Ruiz
 
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 UFSFelipe J. R. Vieira
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1Daniel Lopes
 
QArentena 21: BDD - com Fábio Araújo
QArentena 21: BDD - com Fábio AraújoQArentena 21: BDD - com Fábio Araújo
QArentena 21: BDD - com Fábio AraújoJosé Correia
 
Desenvolvendo aplicações orientadas a testes de aceitação: um caso prático
Desenvolvendo aplicações orientadas a testes de aceitação: um caso práticoDesenvolvendo aplicações orientadas a testes de aceitação: um caso prático
Desenvolvendo aplicações orientadas a testes de aceitação: um caso práticoelliando dias
 
Caipira agil automacao front end selenium
Caipira agil automacao front end seleniumCaipira agil automacao front end selenium
Caipira agil automacao front end seleniumQualister
 
Microsoft .Net
Microsoft .NetMicrosoft .Net
Microsoft .Netjaumnc
 
WordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPressWordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPressRuan Barbosa
 
Introdução ao Asp.Net Mvc
Introdução ao Asp.Net MvcIntrodução ao Asp.Net Mvc
Introdução ao Asp.Net MvcGiovanni Bassi
 
XIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webXIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webFilipe Giusti
 
Automação de Teste - BRATESTE 2010
Automação de Teste - BRATESTE 2010Automação de Teste - BRATESTE 2010
Automação de Teste - BRATESTE 2010Elias Nogueira
 
Barometro de tecnologia da web 2020
Barometro de tecnologia da web   2020Barometro de tecnologia da web   2020
Barometro de tecnologia da web 2020La Fabrique du Net
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPelliando dias
 

Semelhante a WCAG 2.1: Princípios e Diretrizes para Acessibilidade Web (20)

Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
 
Barometro de tecnologia da web 2020
Barometro de tecnologia da web   2020Barometro de tecnologia da web   2020
Barometro de tecnologia da web 2020
 
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
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
 
Impulsionando startups com api publica
Impulsionando startups com api publicaImpulsionando startups com api publica
Impulsionando startups com api publica
 
MTC - Automatizando Visual Regression Testing
MTC - Automatizando Visual Regression TestingMTC - Automatizando Visual Regression Testing
MTC - Automatizando Visual Regression Testing
 
Ruby On Rails - Porque Utilizar?
Ruby On Rails - Porque Utilizar?Ruby On Rails - Porque Utilizar?
Ruby On Rails - Porque Utilizar?
 
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
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1
 
QArentena 21: BDD - com Fábio Araújo
QArentena 21: BDD - com Fábio AraújoQArentena 21: BDD - com Fábio Araújo
QArentena 21: BDD - com Fábio Araújo
 
Desenvolvendo aplicações orientadas a testes de aceitação: um caso prático
Desenvolvendo aplicações orientadas a testes de aceitação: um caso práticoDesenvolvendo aplicações orientadas a testes de aceitação: um caso prático
Desenvolvendo aplicações orientadas a testes de aceitação: um caso prático
 
Caipira agil automacao front end selenium
Caipira agil automacao front end seleniumCaipira agil automacao front end selenium
Caipira agil automacao front end selenium
 
Microsoft .Net
Microsoft .NetMicrosoft .Net
Microsoft .Net
 
WordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPressWordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPress
 
Introdução ao Asp.Net Mvc
Introdução ao Asp.Net MvcIntrodução ao Asp.Net Mvc
Introdução ao Asp.Net Mvc
 
XIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webXIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento web
 
Webforms2
Webforms2Webforms2
Webforms2
 
Automação de Teste - BRATESTE 2010
Automação de Teste - BRATESTE 2010Automação de Teste - BRATESTE 2010
Automação de Teste - BRATESTE 2010
 
Barometro de tecnologia da web 2020
Barometro de tecnologia da web   2020Barometro de tecnologia da web   2020
Barometro de tecnologia da web 2020
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 

Mais de Centro Web

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaCentro Web
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na WebCentro 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 webCentro Web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOCentro Web
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIACentro Web
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a WebCentro Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisasCentro Web
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIACentro Web
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosCentro Web
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e InclusãoCentro Web
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebCentro Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaCentro Web
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake NewsCentro Web
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoCentro Web
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websitesCentro Web
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web PlatformCentro Web
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosCentro Web
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios Centro Web
 
Governo Aberto
Governo AbertoGoverno Aberto
Governo AbertoCentro Web
 

Mais de Centro Web (20)

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade Estendida
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na 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
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisas
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e Inclusão
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake News
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivo
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web Platform
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Governo Aberto
Governo AbertoGoverno Aberto
Governo Aberto
 

WCAG 2.1: Princípios e Diretrizes para Acessibilidade Web

  • 1. WCAG 2.1 Reinaldo Ferraz - 26 de abril de 2019
  • 3.
  • 4.
  • 8. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  • 9. Diretrizes WCAG 2.1 WCAG 2.0 61 critérios de sucesso
  • 11. Algumas diretrizes WCAG 2.0 • Critério de sucesso 1.1.1 Conteúdo Não Textual: A • Critério de sucesso 1.2.2 Legendas (Pré-gravadas): A • Critério de sucesso 1.4.1 Utilização de Cores: A • Critério de sucesso 1.4.4 Redimensionar texto: A • Critério de sucesso 2.1.1 Teclado: A • Critério de sucesso 2.3.1 Três Flashes ou Abaixo do Limite: A • Critério de sucesso 2.4.1 Ignorar Blocos: A • Critério de sucesso 3.1.1 Idioma da Página: A • Critério de sucesso 3.3.1 Identificação do Erro: A • Critério de sucesso 3.3.2 Rótulos ou Instruções: A • E outras 51 diretrizes...
  • 12. Diretrizes WCAG 2.1 WCAG 2.1 78 critérios de sucesso (17 novas diretrizes)
  • 13. Novas diretrizes WCAG 2.1 • Critério de sucesso 1.3.4 Orientação AA • Critério de sucesso 1.3.5 Identificação de campos de entrada AA • Critério de sucesso 1.4.10 Reorganização de conteúdo AA • Critério de sucesso 1.4.11 Contraste em conteúdo não textual AA • Critério de sucesso 1.4.12 Espaçamento de texto AA • Critério de sucesso 1.4.13 Passar o mouse e foco AA • Critério de sucesso 2.1.4 Atalhos de teclas de caracteres A • Critério de sucesso 2.5.1 Gestos de ponteiros A • Critério de sucesso 2.5.2 Cancelamento de ponteiro A • Critério de sucesso 2.5.3 Rótulo no nome A • Critério de sucesso 2.5.4 Atuação de movimento A
  • 14. Critério de sucesso 1.3.4 Orientação O conteúdo não restringe sua visualização e operação a uma única orientação de exibição, como retrato ou paisagem. Novo – Nível AA Arrow vector created by macrovector - www.freepik.com
  • 15. Critério de sucesso 1.3.5 Identificação de campos de entrada Todo campo de formulário em uma página Web deve ser determinado em forma de código de programação. Novo – Nível AA Background vector created by zarubin-leonid - www.freepik.com
  • 16. Critério de sucesso 1.3.5 Identificação de campos de entrada Novo – Nível AA • "name" • "honorific-prefix" • "given-name" • "additional-name" • "family-name" • "honorific-suffix" • "nickname" • "username" • "new-password" • "current-password" • "organization-title" • "organization" • "street-address" • "address-line1" • "country" • "postal-code" • "cc-name" • "cc-given-name" • "language" • "sex" • "url" • "photo“ • … <form autocomplete="on"> <input type="text" autocomplete="name"> <input type="email“ autocomplete="email"> https://www.w3.org/TR/html52/sec-forms.html#autofill-field
  • 17. Critério de sucesso 1.4.10 Reorganização de conteúdo O conteúdo com zoom de 400% pode ser apresentado sem perda de informações ou funcionalidade e sem a necessidade de rolagem em duas dimensões. • Representa um viewport de 1280 x 1024 pixels quando em 400% Novo – Nível AA Business vector created by freepik - www.freepik.com
  • 18. Critério de sucesso 1.4.11 Contraste em conteúdo não textual A apresentação visual dos seguintes itens tem uma relação de contraste de pelo menos 3:1 contra cor (es) adjacente (s): • Componentes da interface do usuário (botões, links e outros elementos interativos, exceto quando estão desabilitados) • Objetos Gráficos (gráficos necessários para a compreensão do conteúdo) Novo – Nível AA
  • 19. Critério de sucesso 1.4.12 Espaçamento de texto Não existe perda de conteúdo ou funcionalidade quando o usuário altera o espaçamento de texto. Novo – Nível AA
  • 20. Critério de sucesso 1.4.13 Passar o mouse e foco O conteúdo que é exibido quando passar o mouse ou pelo foco do teclado deve permitir que o usuário acesse, despreze ou mova o foco para evitar acionamento acidental. Novo – Nível AA Infographic vector created by freepik - www.freepik.com
  • 21. Critério de sucesso 1.4.13 Passar o mouse e foco Novo – Nível AA
  • 22. Critério de sucesso 2.1.4 Atalhos de teclas de caracteres Se um atalho de teclado for implementado usando apenas letras (incluindo letras maiúsculas e minúsculas), pontuação, número ou caracteres de símbolos, deve ser possível Desligar, Remapear ou ativá-lo apenas com foco Novo – Nível A Logo vector created by freepik - www.freepik.com
  • 23. Critério de sucesso 2.1.4 Atalhos de teclas de caracteres Novo – Nível A M – Desligar áudio N – Próxima mensagem P – Próxima mensagem Pedro! Você viu a Ammy por ai? Background vector created by freepik - www.freepik.com
  • 24. Critério de sucesso 2.5.1 Gestos de ponteiros Toda funcionalidade que usa gestos multiponto ou baseados em caminhos para operação pode ser operada com um único ponteiro sem um gesto baseado em caminho. Novo – Nível A Design vector created by freepik - www.freepik.com
  • 25. Critério de sucesso 2.5.1 Gestos de ponteiros Novo – Nível A + - Background vector created by rawpixel.com - www.freepik.com
  • 26. Critério de sucesso 2.5.2 Cancelamento de ponteiro Deve existir uma forma de cancelar a ativação por toque ou clique, minimizando problemas de acionamento acidental do conteúdo interativo. Novo – Nível A Background vector created by iconicbestiary - www.freepik.com
  • 27. Critério de sucesso 2.5.2 Cancelamento de ponteiro Novo – Nível A Down-event Up-event
  • 28. Critério de sucesso 2.5.3 Rótulo no nome Para componentes da interface do usuário com rótulos que incluem texto ou imagens de texto, o nome contém o texto que é apresentado visualmente. Novo – Nível A Vintage vector created by by freepik - www.freepik.com
  • 29. Critério de sucesso 2.5.3 Rótulo no nome Novo – Nível A <input type="image" id="image" alt=“Play" src=“play.png">
  • 30. Critério de sucesso 2.5.4 Atuação de movimento A funcionalidade que pode ser operada pelo movimento do dispositivo ou pelo movimento do usuário também pode ser operada pelos componentes da interface do usuário, e a resposta ao movimento pode ser desativada para impedir o acionamento acidental. Novo – Nível A Technology vector created by freepik - www.freepik.com