SlideShare uma empresa Scribd logo
ACESSIBILIDADE
NA WEB
PRINCIPAIS PROBLEMAS
E SOLUÇÕES
JULHO DE 2013
Quem eu sou?
@julianafrost
juliana@vivendoporai.com.br
vivendoporai.com.br
Juliana Fernandes
Arquiteta da Informação na Alligo
O que veremos?
Acessibilidade e...
Idioma
Imagens
Links
Fontes
Navegação rápida
Landmarks
Semântica
Formulários
Menus
Cores
Mas quem é
que precisa de
acessibilidade
?
TODO MUNDO.
Alguns por um período,
outros o tempo todo.
Foto:
http://www.flickr.com/photos/santheo/2438840018/in/photostream/
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Foto:
http://www.flickr.com/photos/usembassyta/8147385353/in/photostream/
Foto:
http://www.flickr.com/photos/ytueresburroyyomemonto/2848997619/in/photostream/
Foco da palestra:
Acessibilidade para quem
utiliza leitor de tela.
Para construir sites acessíveis,
temos que entender como as pessoas que
precisam de acessibilidade navegam na internet.
Antes de tudo
Principais
leitores de tela
NVDA
www.nvaccess.org/download/
JAWS
www.freedomscientific.com/products/fs/jaws-product-page.asp
Mas como os leitores
de tela funcionam?
?
Quais os principais
problemas de acessibilidade?
Como resolvê-los?
ACESSIBILIDADE E
IDIOMA
Foto:
http://www.flickr.com/photos/joshua/3318674106/in/photostream/
Problema: páginas sem a declaração do idioma
Certo
Declarar o idioma na estrutura do site.
Como fazer?
<html lang="pt-br">
1. Acessibilidade e idioma1. Acessibilidade e idioma
ACESSIBILIDADE E
IMAGENS
Foto:
http://www.flickr.com/photos/danzen/1172367594/in/photostream/
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948
001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948
001938.jpg" alt= Dois ratos brancos, um
em cima do outro, adormecendo numa rede >
"
"
2. Acessibilidade e imagens
Foto:
http://www.flickr.com/photos/35597202@N02/4424721119/
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948
001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948
001938.jpg" alt= Dois ratos brancos, um
em cima do outro, adormecendo numa rede >
"
"
2. Acessibilidade e imagens
Dica:
Se a existência da
imagem é apenas estética
e não complementa
o conteúdo, deixe o alt
vazio.
Foto:
http://www.flickr.com/photos/35597202@N02/4424721119/
ACESSIBILIDADE E
LINKS
Foto:
http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/
3. Acessibilidade e links
Problema: navegando pelos links através do tab
(ou: que link é esse?)
Errado
Clique aqui
Saiba mais
Leia mais
Download
Certo
Veja fotos de ratos albinos
Leia mais sobre truques para ensinar
ao seu ratinho
Faça download do guia “Como cuidar
do seu rato de estimação” em PDF (1mb)
Problema: navegando pelos links através do tab
(ou: em que link eu tô?)
3. Acessibilidade e links
Como fazer?
a:focus {
outline:1px solid #000;
}
Certo
ACESSIBILIDADE E
FONTE
Foto:
http://www.flickr.com/photos/revdancatt/5558653828/in/photostream/
4. Acessibilidade e fonte
Problema: texto ilegível
Errado
Fonte equivalente a 12px
Certo
Fonte equivalente a PELO MENOS 16px
4. Acessibilidade e fonte
Problema: texto ilegível
Errado
Fonte equivalente a 12px
Certo
Fonte equivalente a PELO MENOS 16px
Dica:
Se não puder aumentar
a fonte, coloque um
controlador de tamanho.
ACESSIBILIDADE E
NAVEGAÇÃO RÁPIDA +
LANDMARKS
Foto:
http://www.flickr.com/photos/shanepope/2375499336/
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de atalho para ir direto ao conteúdo
que interessa
Certo
Colocar um link “Pular
para o conteúdo principal”
no começo da página
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de atalho para ir direto ao conteúdo
que interessa
Certo
Colocar um link “Pular
para o conteúdo principal”
no começo da página
Dica:
Você pode deixar o link
invisível com CSS que o
leitor de tela o lerá
de qualquer forma.
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Landmarks são marcações adicionais no HTML
que indicam que tipo de conteúdo existe numa
determinada parte da página e ajudam
o usuário a chegar rapidamente nela.
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Principais landmarks
banner
navigation
main
complementary
contentinfo
form
search
application
5. Acessibilidade e navegação rápida +
landmarks
banner
navigation
Coleção de elementos navegacionais, geralmente links. Ex.: menus ou links
que permitem o usuário navegar pelo documento. Permitido + de 1 por pág.
main
Região que contém informações relacionadas ao site e não a página em si.
Ex.: marca, nome do site, caixa de pesquisa, etc. Somente 1 por página.
Principal conteúdo da página. Equivalente ao conteúdo que o link “pular para
o conteúdo principal” levaria. Somente 1 por página.
5. Acessibilidade e navegação rápida +
landmarks
complementary
contentinfo
Área que contém informações sobre o documento pai. Ex.: copyright, sobre o
autor, etc.
form
Seção que complementa o role=”main”, mas que possui significado se isolado.
Ex.: posts relacionados, sidebar, etc. Permitido + de 1 por página.
Somente 1 por página.
Área com um conjunto de itens que compõe um formulário. Permitido + de 1
por página.
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o teclado, onde o
leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,
alguns webmails, etc.
Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.
Permitido + de 1 por página.
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o teclado, onde o
leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,
alguns webmails, etc.
Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.
Permitido + de 1 por página. Dica:
Pesquise sobre landmarks
na documentação oficial
do W3C.
http://www.w3.org/TR/wai-
aria
Acessibilidade na Web: Principais problemas e Soluções - FISL14
ACESSIBILIDADE E
SEMÂNTICA
Foto:
http://www.flickr.com/photos/nolanus/5848333881/in/photostream/
7. Acessibilidade e semântica
Problema: falta de cabeçalhos e parágrafo
Errado
<div class="titulo-primario">Como Cuidar de Ratos</div>
<div class="texto">Os ratos têm requisitos nutricionais...</div>
<div class="titulo-secundario">Alimentação</div>
Certo
<h1>Como Cuidar de Ratos</h1>
<h2>Alimentação</h2>
<p>Os ratos têm requisitos nutricionais...<p>
7. Acessibilidade e semântica
Problema: falta de listas
Errado
<a href="#link">Item 1</a>
<a href="#link"> </a>
<a href="#link"> </a>
Item 2
Item 3
Certo
<ul>
<li><a href="#link">Item 1</li>
<li><a href="#link">Item 2</a></li>
<li><a href="#link">Item 3</a></li>
</ul>
ACESSIBILIDADE E
FORMULÁRIOS
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<p>Nome</p>
<input type="text" name="nome">
Certo
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome">
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="checkbox" name="rato"/>Ratos albinos
Certo
<input type="checkbox" name="rato" id="rato"/>
<label for="rato">Ratos albinos</label>
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="radio" name="ubuntu"/>Ubuntu
Certo
<input type="radio" name="ubuntu" id="ubuntu"/>
<label for="ubuntu">Ubuntu</label>
8. Acessibilidade e formulários
Problema: campos genéricos
Errado
<label for="mail">E-mail</label>
<input type="text" name="mail" id="mail"/>
Certo
<label for="mail">E-mail</label>
<input type="email" name="mail" id="mail"/>
8. Acessibilidade e formulários
Problema: preenchimento obrigatório mal indicado
Errado
<p>Os campos com asterisco são obrigatórios</p>
<label for="nome">Nome*</label>
<input type="text" name="nome" id="nome">
Certo
<p>Os campos com asterisco são obrigatórios</p>
<label for="nome">Nome*</label>
<input type="text" name="nome" id="nome" aria-required="true">
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo
a ser corrigido, através
de um link
Como fazer?
Foram encontrados 2 erros
no formulário preenchido:
1.
2.
Informe seu nome
Informe um e-mail válido
Nome
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo
a ser corrigido, através
de um link
Como fazer?
Foram encontrados 2 erros
no formulário preenchido:
1.
2.
Informe seu nome
Informe um e-mail válido
Nome
Dica:
Utilize tabindex="-1" no
<p> que contém o
feedback da validação,
para que o usuário vá
direto a ele após o envio
do formulário.
ACESSIBILIDADE E
MENUS
9. Acessibilidade e menus
Problema: submenus invisíveis
Certo
Os menus devem se abrir após o tab, deixando os
submenus visíveis e navegáveis via teclado
Como fazer?
Utilizando CSS + JavaScript. Exemplo para estudo em:
http://tinyurl.com/menuacessivel
ACESSIBILIDADE E
CORES
Foto:
http://www.flickr.com/photos/ngdx/9103091527/in/photostream/
9. Acessibilidade e cores
Problema: constraste ruim
9. Acessibilidade e cores
Problema: constraste ruim
Diferença de cor:
Diferença de brilho:
deveria ser maior que 500 e é 114
deveria ser maior que 125 e é 32
9. Acessibilidade e cores
Problema: contraste ruim
9. Acessibilidade e cores
Problema: contraste ruim
Diferença de cor:
Diferença de brilho:
deveria ser maior que 500 e é 141
deveria ser maior que 125 e é 43
Problema: contraste ruim
http://www.snook.ca/technical/colour_contrast/colour.html
Colour Contrast Check
Ferramenta para verificar contraste de cores.
8. Acessibilidade e cores
9. Acessibilidade e cores
Problema: cores e daltonismo
9. Acessibilidade e cores
Problema: cores e daltonismo
Problema: cores e daltonismo
http://colororacle.org/
Color Oracle
Ferramenta para simular tipos de daltonismo.
9. Acessibilidade e cores
Bônus!
http://wave.webaim.org/
WAVE Web Accessibility Tool
Ferramenta para avaliar a acessibilidade do site com base
nos padrões WCAG 2.0.
Validador de acessibilidade
Obrigada!
@julianafrost
juliana@vivendoporai.com.br
www.vivendoporai.com.br
www.slideshare.com/julianafrost
Foto:http://theberry.com/

Mais conteúdo relacionado

Mais procurados

Working Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile FrameworkWorking Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile Framework
Kelley Howell
 
Heurística de Nielsen
Heurística de NielsenHeurística de Nielsen
Heurística de Nielsen
Renato Wajnberg
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e Exercícios
UTFPR
 
As 10 heurísticas de Nielsen
As 10 heurísticas de NielsenAs 10 heurísticas de Nielsen
As 10 heurísticas de Nielsen
Huxley Dias
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
IHC e Tecnologias Assistivas
IHC e Tecnologias AssistivasIHC e Tecnologias Assistivas
IHC e Tecnologias Assistivas
Soraia Prietch
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
Marconi Pacheco
 
Accessibility
AccessibilityAccessibility
Accessibility
Elizabeth Chesters
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Ros Galabo, PhD
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Rafael Burity
 
Testes de usabilidade em apps mobile
Testes de usabilidade em apps mobileTestes de usabilidade em apps mobile
Testes de usabilidade em apps mobile
Rafael Burity
 
Redes sociais apresentação completa
Redes sociais   apresentação completaRedes sociais   apresentação completa
Redes sociais apresentação completa
Interface Comunicação
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
Suzi Sarmento
 
Design Universal - Os 7 Principios
Design Universal - Os 7 PrincipiosDesign Universal - Os 7 Principios
Design Universal - Os 7 Principios
Alan Vasconcelos
 
Princípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas InterativosPrincípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas Interativos
Wellington Oliveira
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
UX Thinking - an introduction
UX Thinking - an introductionUX Thinking - an introduction
UX Thinking - an introduction
Screamin Wrba
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
Marconi Pacheco
 
UX Usability Heuristics
UX Usability HeuristicsUX Usability Heuristics
UX Usability Heuristics
Tiago Gonçalves MA - Msc
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
Bruno Biagioni Neto
 

Mais procurados (20)

Working Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile FrameworkWorking Together: the UX role in a Scaled Agile Framework
Working Together: the UX role in a Scaled Agile Framework
 
Heurística de Nielsen
Heurística de NielsenHeurística de Nielsen
Heurística de Nielsen
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e Exercícios
 
As 10 heurísticas de Nielsen
As 10 heurísticas de NielsenAs 10 heurísticas de Nielsen
As 10 heurísticas de Nielsen
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
IHC e Tecnologias Assistivas
IHC e Tecnologias AssistivasIHC e Tecnologias Assistivas
IHC e Tecnologias Assistivas
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Accessibility
AccessibilityAccessibility
Accessibility
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
 
Testes de usabilidade em apps mobile
Testes de usabilidade em apps mobileTestes de usabilidade em apps mobile
Testes de usabilidade em apps mobile
 
Redes sociais apresentação completa
Redes sociais   apresentação completaRedes sociais   apresentação completa
Redes sociais apresentação completa
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
 
Design Universal - Os 7 Principios
Design Universal - Os 7 PrincipiosDesign Universal - Os 7 Principios
Design Universal - Os 7 Principios
 
Princípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas InterativosPrincípios Básicos do Design de Sistemas Interativos
Princípios Básicos do Design de Sistemas Interativos
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
UX Thinking - an introduction
UX Thinking - an introductionUX Thinking - an introduction
UX Thinking - an introduction
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
 
UX Usability Heuristics
UX Usability HeuristicsUX Usability Heuristics
UX Usability Heuristics
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 

Destaque

EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
Horácio Soares
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Dhiego Bicudo
 
Elementos basicos html
Elementos basicos htmlElementos basicos html
Elementos basicos html
Denise Lima
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Fabíola Calixto
 
UX para não designers
UX para não designersUX para não designers
UX para não designers
Paullo Norato
 
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Juliana Fernandes
 
Destaques e Melhorias da Nova Versão do eMAG
Destaques e Melhorias da Nova Versão do eMAG Destaques e Melhorias da Nova Versão do eMAG
Destaques e Melhorias da Nova Versão do eMAG
GovBR
 
Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016
Talita Pagani
 
Mobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for AdvertisingMobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for Advertising
Brant Nesbitt
 
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
Talita Pagani
 
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universalPalestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Fernando Figueroa
 
Guia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
Guia de Acessibilidade de Interfaces Web focado em Aspectos do AutismoGuia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
Guia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
Women Techmakers Sorocaba
 
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Talita Pagani
 
Principais problemas de usabilidade
Principais problemas de usabilidadePrincipais problemas de usabilidade
Principais problemas de usabilidade
Sebastião Ademir da Silva
 
Acessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saberAcessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saber
Thiago Nascimento Oliveira
 
Ambientes virtuais de aprendizagem
Ambientes virtuais de aprendizagemAmbientes virtuais de aprendizagem
Ambientes virtuais de aprendizagem
JuFRodrigues
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade nas mídias digitais
Acessibilidade nas mídias digitaisAcessibilidade nas mídias digitais
Acessibilidade nas mídias digitais
Fabíola Calixto
 
100+ Beautiful Slides from #CannesLions 2016
100+ Beautiful Slides from #CannesLions 2016100+ Beautiful Slides from #CannesLions 2016
100+ Beautiful Slides from #CannesLions 2016
Jesse Desjardins - @jessedee
 
Acessibilidade Web Cognitiva
Acessibilidade Web CognitivaAcessibilidade Web Cognitiva
Acessibilidade Web Cognitiva
Talita Pagani
 

Destaque (20)

EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
 
Elementos basicos html
Elementos basicos htmlElementos basicos html
Elementos basicos html
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
UX para não designers
UX para não designersUX para não designers
UX para não designers
 
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
 
Destaques e Melhorias da Nova Versão do eMAG
Destaques e Melhorias da Nova Versão do eMAG Destaques e Melhorias da Nova Versão do eMAG
Destaques e Melhorias da Nova Versão do eMAG
 
Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016
 
Mobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for AdvertisingMobile UX Design Best Practices for Advertising
Mobile UX Design Best Practices for Advertising
 
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
 
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universalPalestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
 
Guia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
Guia de Acessibilidade de Interfaces Web focado em Aspectos do AutismoGuia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
Guia de Acessibilidade de Interfaces Web focado em Aspectos do Autismo
 
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até a...
 
Principais problemas de usabilidade
Principais problemas de usabilidadePrincipais problemas de usabilidade
Principais problemas de usabilidade
 
Acessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saberAcessibilidade na web: o que todo profissional da área deve saber
Acessibilidade na web: o que todo profissional da área deve saber
 
Ambientes virtuais de aprendizagem
Ambientes virtuais de aprendizagemAmbientes virtuais de aprendizagem
Ambientes virtuais de aprendizagem
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Acessibilidade nas mídias digitais
Acessibilidade nas mídias digitaisAcessibilidade nas mídias digitais
Acessibilidade nas mídias digitais
 
100+ Beautiful Slides from #CannesLions 2016
100+ Beautiful Slides from #CannesLions 2016100+ Beautiful Slides from #CannesLions 2016
100+ Beautiful Slides from #CannesLions 2016
 
Acessibilidade Web Cognitiva
Acessibilidade Web CognitivaAcessibilidade Web Cognitiva
Acessibilidade Web Cognitiva
 

Semelhante a Acessibilidade na Web: Principais problemas e Soluções - FISL14

Apresentacao IHC 2010.2
Apresentacao IHC 2010.2Apresentacao IHC 2010.2
Apresentacao IHC 2010.2
Pablo Veinberg
 
Apresentação Acesse
Apresentação AcesseApresentação Acesse
Apresentação Acesse
Know Solutions
 
Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022
Renato Melo
 
Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
    Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz    Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
GovBR
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
Ana Paula Batista
 
Blogs
BlogsBlogs
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
José Marques
 
Usabilidade em RSS (por Bruno Maranhão)
Usabilidade em RSS (por Bruno Maranhão)Usabilidade em RSS (por Bruno Maranhão)
Usabilidade em RSS (por Bruno Maranhão)
Bruno Maranhão
 
W3C Acessibilidade
W3C AcessibilidadeW3C Acessibilidade
W3C Acessibilidade
Ana Laura Gomes
 
WordPress, muito além de um software para blogs
WordPress, muito além de um software para blogsWordPress, muito além de um software para blogs
WordPress, muito além de um software para blogs
Cayo Medeiros
 
Programacao acessibilidade
Programacao acessibilidadeProgramacao acessibilidade
Programacao acessibilidade
Thalita Oliveira
 
Aula Paula Rizzo
Aula Paula RizzoAula Paula Rizzo
Aula Paula Rizzo
...
 
AF
AFAF
Usabilidade Web Alberane
Usabilidade Web AlberaneUsabilidade Web Alberane
Usabilidade Web Alberane
guest2da055
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
Leo Serrao
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
Cristiana
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
Clauber Stipkovic
 
Site da copa avaliação web outubro 2013
Site da copa avaliação web outubro 2013Site da copa avaliação web outubro 2013
Site da copa avaliação web outubro 2013
Hudson Augusto
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
TanniaDuarte
 

Semelhante a Acessibilidade na Web: Principais problemas e Soluções - FISL14 (20)

Apresentacao IHC 2010.2
Apresentacao IHC 2010.2Apresentacao IHC 2010.2
Apresentacao IHC 2010.2
 
Apresentação Acesse
Apresentação AcesseApresentação Acesse
Apresentação Acesse
 
Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022
 
Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
    Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz    Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
Acessibilidade na WEB: Padrões na Web e WCAG 2.0 - Reinaldo Ferraz
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
 
Blogs
BlogsBlogs
Blogs
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
 
Usabilidade em RSS (por Bruno Maranhão)
Usabilidade em RSS (por Bruno Maranhão)Usabilidade em RSS (por Bruno Maranhão)
Usabilidade em RSS (por Bruno Maranhão)
 
W3C Acessibilidade
W3C AcessibilidadeW3C Acessibilidade
W3C Acessibilidade
 
WordPress, muito além de um software para blogs
WordPress, muito além de um software para blogsWordPress, muito além de um software para blogs
WordPress, muito além de um software para blogs
 
Programacao acessibilidade
Programacao acessibilidadeProgramacao acessibilidade
Programacao acessibilidade
 
Aula Paula Rizzo
Aula Paula RizzoAula Paula Rizzo
Aula Paula Rizzo
 
AF
AFAF
AF
 
Usabilidade Web Alberane
Usabilidade Web AlberaneUsabilidade Web Alberane
Usabilidade Web Alberane
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
Site da copa avaliação web outubro 2013
Site da copa avaliação web outubro 2013Site da copa avaliação web outubro 2013
Site da copa avaliação web outubro 2013
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 

Acessibilidade na Web: Principais problemas e Soluções - FISL14