Olá! ● + 10 anos na área de UX com foco principal em Acessibilidade ● Mestrado em Visualização de Informação ● Já dei aulas de programação para pessoas com deficiência visual ● Instrutora e coordeno cursos de UX na Alura
O que é acessibilidade? Acessibilidade na Web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na Web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso. (W3C BRASIL)
Acessibilidade é independente de... ● Do lugar que você está ● Do modo de acesso ● Das condições/capacidades físicas ● Das condições/capacidades financeiras ● Das capacidades intelectuais ● Você consegue fazer o que quiser, quando e como quiser!
Porque estudar/aprender/se preocupar ? ● Acessibilidade não adiciona custo ● Melhoria na qualidade do que é desenvolvido ○ Requisitos melhores descritos ○ Desenvolvimento semântico
O que precisamos saber? ● Para quem é acessibilidade ● As necessidades das pessoas ● Sem conhecer as necessidades, não podemos trazer as soluções necessárias.
Acessibilidade – CENSO 2010 ● 45.606.048 de brasileiros - 23,9% da população total, têm algum tipo de deficiência ○ visual, auditiva, motora e mental ou intelectual.
Daltonismo ● É uma perturbação da percepção visual caracterizada pela incapacidade de diferenciar as cores ● Existem 3 tipos principais: ○ Monocromacia ○ Dicromacia ○ Tricomacia anômala
Necessidades ● Bom contraste entre as cores ● Não fazer referência as ações e cores (Clique no botão verde) ● Ter certeza que é possível identificar as links sem as cores ● Utilizar texturas e descrições
Necessidades ● Dispor opções de alto contraste ● Permitir utilizar com leitores de tela e lupa de ampliação ● Testar a ampliação da página de até 200% ● Usar uma navegação consistente em todo produto
Pessoas cegas ● Pessoas com deficiência visual total ● Não enxergam vultos, ou seja, não tem percepção de luz ● Mitos: ○ Não é porque eles não tem um estimulo de um dos sentidos que eles são super-homem ○ Eles nem sempre conseguem entender um conceito relacionado a parte visual para nós (videntes)
Necessidades ● Toda a navegação deve ser possível de ser realizada pelo teclado ● Devem existir atalhos para as áreas principais, como menu, conteúdo e rodapé. ● Existir descrição de imagens ● Criar uma estrutura semanticamente correta ● Testar a interface usando diferentes leitores de tela em diferentes navegadores
Pessoas surdas ● Dentre as pessoas com surdez, existem: ○ As que utilizam Libras para se comunicar e não são fluentes na Língua Portuguesa; ○ As que utilizam Libras para se comunicar e são fluentes na Língua Portuguesa; ○ As que utilizam tanto Libras quanto a Língua Portuguesa (leitura labial ou dispositivos que ampliam o som) para se comunicar; ○ As que não conhecem Libras e realizam leitura labial e/ou leitura e escrita.
Necessidades ● Utilizar vídeo com legendas ou em Libras ● Permitir que todo áudio tenha uma transcrição em texto ● Utilizar uma linguagem clara e simples ● Existir glossário para palavras técnicas
Deficiência motora ● Existem deficiência motora parcial e total, permanente e temporária. ● Quando uma pessoa quebra o braço ela possui uma deficiência motora parcial e temporária. ● Uma pessoa tetraplégica ela possui uma deficiência motora total e permanente.
Necessidades ● Não pode fazer uso do mouse ● Utilizam sensores de rosto que identificam movimentos ou softwares de reconhecimento de voz ● As áreas de interação devem ser grandes ● Atalhos são muito importante ● Não devem ser utilizados recursos que utilizam as duas mãos, destreza ou rapidez como duplo clique.
Cognitivas ● Podem ser divididas pela incapacidade funcional ou por incapacidade clínica. ● Autismo, Síndrome de Down, traumatismos crânio-encefálicos (TCE), até a demência.
Cognitivas ● Condições menos severas incluem déficit de atenção e desordem (ADD), dislexia (dificuldade em leitura), discalculia (dificuldade com a matemática), e dificuldades de aprendizagem em geral.
Necessidades ● Linguagem simples e clara ● Não utilizar texto todo em maiúsculo, nem justificado e nem serifado ● Estrutura de texto visualmente bem definida ● Utilizar listas com marcações
Aplicação de acessibilidade ● Atalhos automáticos ● Fontes maiores ● Melhor contraste ● Alto contraste/ Dark theme ● Tag alt nas imagens ● Template responsivo
Erros mais comuns ● Não habilitar tag alt ● Usar tag a no lugar do button ● Não habilitar o outline ● Cuidado com o contraste ● Não usar underline em links ● Não permitir acesso de menu dropdown com teclado ● Não usar ordem correta dos títulos (tag H) ● Não usar atalhos para conteúdo ● Usar erroneamente display: none ● Usar fontes pequenas ● Não prever zoom de pelo menos 200%
Vocês precisam conhecer... ● Quais são as barreiras para elimina-las ● Boas práticas de desenvolvimento e design ● Diretrizes de acessibilidade ● Ferramentas e tecnologias assistivas
Referências ● PDF - Censo 2010 de pessoas com deficiência ● Artigo – Diferença entre personas do marketing, design e proto- personas ● Artigo – Tipos de daltonismo ● Artigo em inglês – Daltonismo ● Artigo em inglês - Acessibilidade web da Inglaterra ● Artigos – Brasil Media – Acessibilidade web ● Curso e-MAG para conteúdistas
liviagabos
yuya4
hiro_y
fendo181
tomokusaba
sainu
nagworld
takahirom
aanrii
guvalif
coa00
77web
mot_techtalk
geeforr
destraynor
philhawksworth
brettharned
eitanlees
smashingmag
keithpitt
jakevdp
edds
dougneiner
jnunemaker
addyosmani