SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler offline
WCAG 2.1
Reinaldo Ferraz
W3C Brasil
@reinaldoferraz
slideshare.com/reinaldoferraz
conferenciaweb.w3c.br
24%
45.623.910 pessoas
Censo 2010
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos
de governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações
disponíveis, conforme as melhores práticas e
diretrizes de acessibilidade adotadas
internacionalmente.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos
de governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações
disponíveis, conforme as melhores práticas e
diretrizes de acessibilidade adotadas
internacionalmente.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
A Web foi feita para as pessoas
https://www.w3.org/TR/WCAG21/
https://www.w3.org/TR/WCAG/
https://www.w3.org/TR/WCAG/
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
A AA AAA
Novas diretrizes
WCAG 2.1
• Critério de sucesso 1.4.10 Redimensionar conteúdo A
• Critério de sucesso 3.2.6 Ativação acidental A
• Critério de sucesso 1.4.11 Contraste em gráficos AA
• Critério de sucesso 2.2.6 Interrupções (mínimo) AA
Critério de sucesso 1.4.10 Redimensionar conteúdo
O conteúdo pode ser redimensionado para 400% sem perda de conteúdo ou
funcionalidade e sem exigir rolagem bidimensional, exceto para partes do
conteúdo onde o layout espacial fixo é necessário para uso ou significado.
https://github.com/w3c/wcag21/issues/77
Novo – Nível A
Novo – Nível A
Por que é importante?
Algumas pessoas precisam aumentar o tamanho de todo o conteúdo da
interface para perceber a informação. Embora o aumento do tamanho é mais
comum, algumas pessoas com visão de túnel e boa acuidade visual podem
preferir diminuir o tamanho para que eles possam ver mais informações de
cada vez.
Critério de sucesso 1.4.10 Redimensionar conteúdo
Foto: Miguel Vaca - Flickr
Foto: Antoine Lefeuvre - Flickr
• Exibir conteúdo em um agente de usuário
com uma largura de janela de 1280px.
• Aumentar o zoom (para todo o conteúdo)
para 400%
• Verifique se todas as escalas de conteúdo
são perceptíveis sem perda de conteúdo ou
funcionalidade (por exemplo, caixas não se
sobrepõem, controles não são obscurecidos
ou separados de seus rótulos, etc).
• Se a rolagem horizontal estiver presente,
verifique se o conteúdo que causa a rolagem
não faria sentido sem a rolagem.
Como verificar?
Novo – Nível ACritério de sucesso 1.4.10 Redimensionar conteúdo
Critério de sucesso 3.2.6 Ativação acidental
Para ativação de ponteiro único (single pointer activation), pelo menos uma
das seguintes opções é verdadeira:
• A ativação está no evento-up (up-event), de forma explícita ou implícita
como evento genérico de ativação/clique de uma plataforma;
• Está disponível um mecanismo que permite ao usuário escolher o evento-
up como uma opção;
• A confirmação é fornecida, que pode dispensar a ativação;
• A ativação é reversível;
https://github.com/w3c/wcag21/issues/65
Novo – Nível A
Evento up (up event) é a ativação de um componente quando o estímulo
disparador é liberado. Em diferentes plataformas, o "up-event" pode ser
chamado coisas diferentes, como "touchend" ou "mouseup". Exemplo: Para
interação com a tela sensível ao toque, o evento é disparado quando um
dedo é erguido da tela sensível ao toque no final de um toque.
Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A
Down-event Up-event
Por que é importante?
Pessoas com várias deficiências podem, inadvertidamente, iniciar eventos de
toque ou mouse com resultados indesejados. Os autores podem reduzir o
problema dos usuários inadvertidamente desencadeando uma ação, fazendo
ativação no up-event. Isso dá aos usuários a oportunidade de mover o dedo
ou outro ponteiro (por exemplo, o mouse) para longe do alvo errado depois
de atingi-lo.
Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A
Por que é importante?
Foto: Maryland GovPics - Flickr
Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A
Como verificar
• A ativação está no evento up (up-event), de
forma explícita ou implícita como o evento
genérico de ativação / clique de uma
plataforma;
• Existe um mecanismo disponível que permite
ao usuário escolher o evento up (up-event)
como opção;
• Confirmação é fornecida, que pode descartar
a ativação;
• A ativação é reversível;
Critério de sucesso 1.4.11 Contraste em gráficos
A apresentação visual de objetos gráficos que são essenciais para a compreensão do
conteúdo ou funcionalidade tem uma relação de contraste de pelo menos 4,5: 1 contra
a(s) cor(es) adjacente(s), exceto o seguinte:
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
Success Criterion 1.4.11 Graphics Contrast
Mais espesso
Para objetos gráficos com uma largura e altura mínima de pelo menos 3 pixels, o gráfico
tem uma taxa de contraste de pelo menos 3:1.
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
https://www.w3.org/TR/css3-values/#reference-pixel
Success Criterion 1.4.11 Graphics Contrast
Sensorial
O conteúdo não textual que se destina principalmente a criar uma experiência sensorial
visual não tem necessidade de contraste;
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
Success Criterion 1.4.11 Graphics Contrast
Logótipos
Gráficos que fazem parte de um logotipo ou marca não têm exigência mínima de
contraste.
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
Critério de sucesso 1.4.11 Contraste em gráficos
A intenção deste Critério de Sucesso é fornecer contraste suficiente para gráficos que
transmitem informações importantes para que possam ser percebidas por pessoas com
visão moderadamente baixa.
Se um gráfico for necessário para entender o conteúdo ou a funcionalidade da página,
ele deve ser perceptível para pessoas com baixa visão ou outras deficiências.
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
Por que é importante?
Critério de sucesso 1.4.11 Contraste em gráficos
• Verificar se a espessura do objeto gráfico
ou sua(s) cor (es) adjacente(s) é menor
que 3px de largura e altura.
• Se sim, verifique se a relação de contraste
é 4,5: 1.
https://github.com/w3c/wcag21/issues/9
Novo – Nível AA
Como testar
Critério de sucesso 2.2.6 Interrupções (mínimo)
Há um mecanismo facilmente disponível para adiar e suprimir interrupções e
mudanças no conteúdo a menos que sejam iniciadas pelo usuário ou
envolvam uma emergência.
https://github.com/w3c/wcag21/issues/47
Novo – Nível AA
Critério de sucesso 2.2.6 Interrupções (mínimo)
A intenção deste Critério de Sucesso é que as pessoas com deficiência de
atenção e memória podem completar uma tarefa. Quando os usuários são
interrompidos, eles podem esquecer o que estão fazendo e abandonar a
tarefa. Isso pode acontecer mesmo quando a tarefa original é extremamente
importante. Por exemplo, um usuário está fazendo uma consulta médica, mas
as interrupções fazem com que o usuário se esqueça do que estava fazendo
e a consulta acaba não sendo feita.
https://github.com/w3c/wcag21/issues/47
Novo – Nível AA
Por que é importante?
Foto Abhijit Bhaduri - Flickr
Critério de sucesso 2.2.6 Interrupções (mínimo)
Quando um site pode gerar interrupções e mudanças de conteúdo, o usuário
deve ser capaz de desativá-los facilmente para controlá-los, de modo que:
• Não ocorrem mudanças bruscas no site
• O usuário pode interromper e acionar novamente (caso necessário)
• Interrupções
• Conteúdo secundário
• Os eventos de mídia
• Chat
• Mensagens não críticas
• Outras janelas pop-up e distrações semelhantes
https://github.com/w3c/wcag21/issues/47
Novo – Nível AA
Por que é importante?
Critério de sucesso 2.2.6 Interrupções (mínimo)
https://github.com/w3c/wcag21/issues/47
Novo – Nível AA
Como testar
• Etapa 1: Há conteúdo adicionado
ou substituindo o conteúdo no
contexto atual que não foi iniciado
pelo usuário ou outras
interrupções?
• Passo 2: Se sim, o usuário pode
adiar ou suprimir facilmente, ou
eles são apenas para
emergências?
Tks
reinaldo@nic.br @reinaldoferraz
w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil
slideshare.com/reinaldoferraz

Mais conteúdo relacionado

Mais procurados

Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...
Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...
Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...Centro Web
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01Renato Melo
 
Google Update Page Experience - TecnoUpdate
Google Update Page Experience - TecnoUpdateGoogle Update Page Experience - TecnoUpdate
Google Update Page Experience - TecnoUpdateSeo Martin
 
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áquinasReinaldo Ferraz
 
A saga dos 12 tópicos de acessibilidade na Web
A saga dos 12 tópicos de acessibilidade na WebA saga dos 12 tópicos de acessibilidade na Web
A saga dos 12 tópicos de acessibilidade na WebReinaldo Ferraz
 
Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Mariane Gonçalves
 
Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Uneworld Viagens e Turismo
 
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 webReinaldo Ferraz
 

Mais procurados (9)

Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...
Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...
Html acessivel - Um guia rápido para melhorar a acessibilidade das suas págin...
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Google Update Page Experience - TecnoUpdate
Google Update Page Experience - TecnoUpdateGoogle Update Page Experience - TecnoUpdate
Google Update Page Experience - TecnoUpdate
 
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
 
A saga dos 12 tópicos de acessibilidade na Web
A saga dos 12 tópicos de acessibilidade na WebA saga dos 12 tópicos de acessibilidade na Web
A saga dos 12 tópicos de acessibilidade na Web
 
Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!
 
Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!Facebook ads - Embarque nos anúncios e decole suas vendas!
Facebook ads - Embarque nos anúncios e decole suas vendas!
 
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
 

Semelhante a WCAG 2.1 Novidades

Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016Huge
 
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...minastestingconference
 
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para TodosTDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todostdc-globalcode
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Reinaldo Ferraz
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019Maurício Pereiro
 
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...GUTS-RS
 
Postmortem & Zabbix
Postmortem & ZabbixPostmortem & Zabbix
Postmortem & ZabbixLuiz Sales
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na webCentro Web
 
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
 
Fundamentos de Padrões de Projeto de Software
Fundamentos de Padrões de Projeto de SoftwareFundamentos de Padrões de Projeto de Software
Fundamentos de Padrões de Projeto de SoftwareÁlvaro Farias Pinheiro
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadeFernando Ruano
 
Mini curso de testes ágeis
Mini curso de testes ágeisMini curso de testes ágeis
Mini curso de testes ágeisQualister
 
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...iMasters
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2aiadufmg
 
Cloud Computing - Continuidade do Negócio através da tolerância a desastres
Cloud Computing - Continuidade do Negócio através da tolerância a desastresCloud Computing - Continuidade do Negócio através da tolerância a desastres
Cloud Computing - Continuidade do Negócio através da tolerância a desastresJoao Galdino Mello de Souza
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2aiadufmg
 
Simplicidade nos Testes de Usabilidade
Simplicidade nos Testes de UsabilidadeSimplicidade nos Testes de Usabilidade
Simplicidade nos Testes de UsabilidadeErika
 

Semelhante a WCAG 2.1 Novidades (20)

WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016Desenvolvimento Client-Side 2016
Desenvolvimento Client-Side 2016
 
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
MTC 2019 - ACESSIBILIDADE: GARANTINDO QUE AS APLICAÇÕES ESTEJAM ACESSÍVEIS PA...
 
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para TodosTDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
TDC2018SP | Trilha Testes - Testes de Acessibilidade - Qualidade para Todos
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
 
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...
[GUTS-RS] Testes de Usabilidade e Acessibilidade para melhorar a experiência ...
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Postmortem & Zabbix
Postmortem & ZabbixPostmortem & Zabbix
Postmortem & Zabbix
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
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
 
Fundamentos de Padrões de Projeto de Software
Fundamentos de Padrões de Projeto de SoftwareFundamentos de Padrões de Projeto de Software
Fundamentos de Padrões de Projeto de Software
 
Palestra - Testes de Acessibilidade
Palestra - Testes de AcessibilidadePalestra - Testes de Acessibilidade
Palestra - Testes de Acessibilidade
 
Mini curso de testes ágeis
Mini curso de testes ágeisMini curso de testes ágeis
Mini curso de testes ágeis
 
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...
Android DevConference - Somos Todos Acessíveis: práticas modernas de acessibi...
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Cloud Computing - Continuidade do Negócio através da tolerância a desastres
Cloud Computing - Continuidade do Negócio através da tolerância a desastresCloud Computing - Continuidade do Negócio através da tolerância a desastres
Cloud Computing - Continuidade do Negócio através da tolerância a desastres
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
Simplicidade nos Testes de Usabilidade
Simplicidade nos Testes de UsabilidadeSimplicidade nos Testes de Usabilidade
Simplicidade nos Testes de Usabilidade
 

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ódigoReinaldo 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
 
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 attributesReinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOReinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websitesReinaldo 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 DigitalReinaldo 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 pesadaReinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEOReinaldo 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 SEOReinaldo 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
 
Internet das Coisas - Aprisionamento ou descentralização social?
Internet das Coisas - Aprisionamento ou descentralização social?Internet das Coisas - Aprisionamento ou descentralização social?
Internet das Coisas - Aprisionamento ou descentralização social?Reinaldo Ferraz
 
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015Reinaldo Ferraz
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015Reinaldo Ferraz
 
Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Reinaldo 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
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
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?
 
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
 
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
 
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
 
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
 
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!
 
Internet das Coisas - Aprisionamento ou descentralização social?
Internet das Coisas - Aprisionamento ou descentralização social?Internet das Coisas - Aprisionamento ou descentralização social?
Internet das Coisas - Aprisionamento ou descentralização social?
 
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
 
Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015
 
Web das Coisas CPBR8
Web das Coisas CPBR8Web das Coisas CPBR8
Web das Coisas CPBR8
 

WCAG 2.1 Novidades

  • 3.
  • 5. 24% 45.623.910 pessoas Censo 2010 Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  • 6. LEI Nº 13.146, DE 6 DE JULHO DE 2015. Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
  • 7. LEI Nº 13.146, DE 6 DE JULHO DE 2015. Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
  • 8. A Web foi feita para as pessoas
  • 12. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  • 14. Novas diretrizes WCAG 2.1 • Critério de sucesso 1.4.10 Redimensionar conteúdo A • Critério de sucesso 3.2.6 Ativação acidental A • Critério de sucesso 1.4.11 Contraste em gráficos AA • Critério de sucesso 2.2.6 Interrupções (mínimo) AA
  • 15. Critério de sucesso 1.4.10 Redimensionar conteúdo O conteúdo pode ser redimensionado para 400% sem perda de conteúdo ou funcionalidade e sem exigir rolagem bidimensional, exceto para partes do conteúdo onde o layout espacial fixo é necessário para uso ou significado. https://github.com/w3c/wcag21/issues/77 Novo – Nível A
  • 16. Novo – Nível A Por que é importante? Algumas pessoas precisam aumentar o tamanho de todo o conteúdo da interface para perceber a informação. Embora o aumento do tamanho é mais comum, algumas pessoas com visão de túnel e boa acuidade visual podem preferir diminuir o tamanho para que eles possam ver mais informações de cada vez. Critério de sucesso 1.4.10 Redimensionar conteúdo Foto: Miguel Vaca - Flickr
  • 17. Foto: Antoine Lefeuvre - Flickr • Exibir conteúdo em um agente de usuário com uma largura de janela de 1280px. • Aumentar o zoom (para todo o conteúdo) para 400% • Verifique se todas as escalas de conteúdo são perceptíveis sem perda de conteúdo ou funcionalidade (por exemplo, caixas não se sobrepõem, controles não são obscurecidos ou separados de seus rótulos, etc). • Se a rolagem horizontal estiver presente, verifique se o conteúdo que causa a rolagem não faria sentido sem a rolagem. Como verificar? Novo – Nível ACritério de sucesso 1.4.10 Redimensionar conteúdo
  • 18. Critério de sucesso 3.2.6 Ativação acidental Para ativação de ponteiro único (single pointer activation), pelo menos uma das seguintes opções é verdadeira: • A ativação está no evento-up (up-event), de forma explícita ou implícita como evento genérico de ativação/clique de uma plataforma; • Está disponível um mecanismo que permite ao usuário escolher o evento- up como uma opção; • A confirmação é fornecida, que pode dispensar a ativação; • A ativação é reversível; https://github.com/w3c/wcag21/issues/65 Novo – Nível A
  • 19. Evento up (up event) é a ativação de um componente quando o estímulo disparador é liberado. Em diferentes plataformas, o "up-event" pode ser chamado coisas diferentes, como "touchend" ou "mouseup". Exemplo: Para interação com a tela sensível ao toque, o evento é disparado quando um dedo é erguido da tela sensível ao toque no final de um toque. Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A Down-event Up-event Por que é importante?
  • 20. Pessoas com várias deficiências podem, inadvertidamente, iniciar eventos de toque ou mouse com resultados indesejados. Os autores podem reduzir o problema dos usuários inadvertidamente desencadeando uma ação, fazendo ativação no up-event. Isso dá aos usuários a oportunidade de mover o dedo ou outro ponteiro (por exemplo, o mouse) para longe do alvo errado depois de atingi-lo. Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A Por que é importante? Foto: Maryland GovPics - Flickr
  • 21. Critério de sucesso 3.2.6 Ativação acidental Novo – Nível A Como verificar • A ativação está no evento up (up-event), de forma explícita ou implícita como o evento genérico de ativação / clique de uma plataforma; • Existe um mecanismo disponível que permite ao usuário escolher o evento up (up-event) como opção; • Confirmação é fornecida, que pode descartar a ativação; • A ativação é reversível;
  • 22. Critério de sucesso 1.4.11 Contraste em gráficos A apresentação visual de objetos gráficos que são essenciais para a compreensão do conteúdo ou funcionalidade tem uma relação de contraste de pelo menos 4,5: 1 contra a(s) cor(es) adjacente(s), exceto o seguinte: https://github.com/w3c/wcag21/issues/9 Novo – Nível AA
  • 23. Success Criterion 1.4.11 Graphics Contrast Mais espesso Para objetos gráficos com uma largura e altura mínima de pelo menos 3 pixels, o gráfico tem uma taxa de contraste de pelo menos 3:1. https://github.com/w3c/wcag21/issues/9 Novo – Nível AA https://www.w3.org/TR/css3-values/#reference-pixel
  • 24. Success Criterion 1.4.11 Graphics Contrast Sensorial O conteúdo não textual que se destina principalmente a criar uma experiência sensorial visual não tem necessidade de contraste; https://github.com/w3c/wcag21/issues/9 Novo – Nível AA
  • 25. Success Criterion 1.4.11 Graphics Contrast Logótipos Gráficos que fazem parte de um logotipo ou marca não têm exigência mínima de contraste. https://github.com/w3c/wcag21/issues/9 Novo – Nível AA
  • 26. Critério de sucesso 1.4.11 Contraste em gráficos A intenção deste Critério de Sucesso é fornecer contraste suficiente para gráficos que transmitem informações importantes para que possam ser percebidas por pessoas com visão moderadamente baixa. Se um gráfico for necessário para entender o conteúdo ou a funcionalidade da página, ele deve ser perceptível para pessoas com baixa visão ou outras deficiências. https://github.com/w3c/wcag21/issues/9 Novo – Nível AA Por que é importante?
  • 27. Critério de sucesso 1.4.11 Contraste em gráficos • Verificar se a espessura do objeto gráfico ou sua(s) cor (es) adjacente(s) é menor que 3px de largura e altura. • Se sim, verifique se a relação de contraste é 4,5: 1. https://github.com/w3c/wcag21/issues/9 Novo – Nível AA Como testar
  • 28. Critério de sucesso 2.2.6 Interrupções (mínimo) Há um mecanismo facilmente disponível para adiar e suprimir interrupções e mudanças no conteúdo a menos que sejam iniciadas pelo usuário ou envolvam uma emergência. https://github.com/w3c/wcag21/issues/47 Novo – Nível AA
  • 29. Critério de sucesso 2.2.6 Interrupções (mínimo) A intenção deste Critério de Sucesso é que as pessoas com deficiência de atenção e memória podem completar uma tarefa. Quando os usuários são interrompidos, eles podem esquecer o que estão fazendo e abandonar a tarefa. Isso pode acontecer mesmo quando a tarefa original é extremamente importante. Por exemplo, um usuário está fazendo uma consulta médica, mas as interrupções fazem com que o usuário se esqueça do que estava fazendo e a consulta acaba não sendo feita. https://github.com/w3c/wcag21/issues/47 Novo – Nível AA Por que é importante? Foto Abhijit Bhaduri - Flickr
  • 30. Critério de sucesso 2.2.6 Interrupções (mínimo) Quando um site pode gerar interrupções e mudanças de conteúdo, o usuário deve ser capaz de desativá-los facilmente para controlá-los, de modo que: • Não ocorrem mudanças bruscas no site • O usuário pode interromper e acionar novamente (caso necessário) • Interrupções • Conteúdo secundário • Os eventos de mídia • Chat • Mensagens não críticas • Outras janelas pop-up e distrações semelhantes https://github.com/w3c/wcag21/issues/47 Novo – Nível AA Por que é importante?
  • 31. Critério de sucesso 2.2.6 Interrupções (mínimo) https://github.com/w3c/wcag21/issues/47 Novo – Nível AA Como testar • Etapa 1: Há conteúdo adicionado ou substituindo o conteúdo no contexto atual que não foi iniciado pelo usuário ou outras interrupções? • Passo 2: Se sim, o usuário pode adiar ou suprimir facilmente, ou eles são apenas para emergências?
  • 32.
  • 33. Tks reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil slideshare.com/reinaldoferraz