OS MILAGRES DAS ARIAS

O que é?

Por quê?

Pra quem ?

Deivid Marques

Desenvolvedor Front-end na Locaweb

Deivid Marques

www.deividmarques.com.br / @deividmarques





OS MILAGRES DAS ARIAS

O que é?

Por quê?

Pra quem ?

Acessibilidade Web


Significa que pessoas "portadoras de necessidades especiais" sejam capazes de usar a Web.



Mais concretamente, significa uma Web projetada de modo a que estas pessoas possam perceber, entender, navegar e interagir de uma maneira efetiva com a Web, bem como criar e contribuir com conteúdos.

Quem precisa de um site/sistema acessível ??




TODOS NÓS !!!

Pra quem fazer ?

  • Limitações visuais (cegueira, daltonismo, baixa visão)
  • Limitações auditivas
  • Limitações físicas
  • Usuários de todos os dispositivos
  • Usuários com diferentes resoluções de tela
  • Usuários com internet de baixa velocidade

Limitações no Brasil



24%


45.623.910 pessoas

Censo 2010


Fonte: IBGE

BENEFÍCIOS

  • Expansão da base de usuários
  • Usuários atuais com mais interesse para acessar
  • Melhores resultados para SEO

Padrões para Acessibilidade

São usadas regras de padronização para acessibilidade do WCAG, atualmente na versão 2.0. O WCAG é uma recomendação W3C.



Acesse: http://www.w3.org/TR/WCAG/



ACESSIBILIDADE NÃO É SÓ CÓDIGO!!!

Quem está envolvido com acessibilidade

  • Arquitetura de Informação
  • Designer
  • Desenvolvedores
  • Redatores
  • QA

Lei da Acessibilidade no Brasil

Segundo o decreto 5.296 de 2004 é obrigatória a Brasil acessibilidade em sites de administração pública.

Validadores

Tipos de Leitores

  • Jaws (pago)
  • Voice Over (Nativo)
  • NVDA (gratuito)
  • Virtual Vision (gratuito)
  • DosVox (pago)
  • Chrome Vox (Extensão para o navegador)

Dicas

  • Implementar acessibilidade no início do projeto
  • Navegar pelo teclado
  • Criar teclas de atalho para funcionalidades principais
  • Página específica com detalhes das teclas de atalho. Twitter
  • Link no topo de ir direto para conteúdo
  • Testar em leitores de tela
  • Testar com usuários reais




Mão na massa! Acessibilidade na web e o potencial do HTML5

html semântico

  • Códigos bons
  • SEO
  • Leitores de tela

Boas práticas

  • label/input
  • alt em imagens
  • Idioma na página
  • Title na página

WAI-ARIA (Accessible Rich Internet Applications)

Define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com limitações. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.





Exemplos de
WAI-ARIA

Landmarks

Exemplo de roles
Codigo de formulario
  • O campo Nome é obrigatório
  • O campo Email é obrigatório
Codigo de formulario
Codigo de formulario Codigo de formulario

Dica: Via Javacript podemos inserir ali o tabindex: -1 e o focus()

Mais exemplos

  1. aria-hidden="true" => Esconder elementos do leitor de tela
  2. aria-expanded="true/false" => Usado em collapses (elementos com toggle)
  3. aria-haspop="true" => Indique que o Link contém elementos escondidos (uma lista por exemplo)
  4. role="menu-item" => Indica que o link faz parte de um menu

Mais exemplos

  1. aria-invalid="gramar/spelling/true"
    gramar: erro de gramática,
    spelling: erro de ortografia
    true: erro de validação
  2. role="dialog" => Usado em modais
  3. aria-describedby="ID_DO_ELEMENTO"

Para refletir!!

Como será que um usuário navega pelo site ou sistema que você desenvolve?

Já parou pra pensar nisso ??





WAI-ARIA NA PRÁTICA!!!





OS MILAGRES DAS ARIAS

O que é?

Por quê?

Pra quem ?


LEMBREM SEMPRE: A WEB É TODOS E PRA TODOS!


Obrigado!!!