Seminário de PHP do SERPRO
IMPLEMENTANDO
ACESSIBILIDADE NO EXPRESSO
Diogo Dantas
Serpro - CEAGO
Acessibilidade no Expresso
MOTIVAÇÃO PARA PENSAR EM ACESSIBILIDADE

Inclusão digital

Meios de comunicação

Aprimoramen...
Acessibilidade no Expresso
REFERÊNCIAS

Teóricas...

eMAG – Modelo de acessibilidade
(http://www.governoeletronico.gov.b...
Acessibilidade no Expresso
REFERÊNCIAS

Práticas...

Maioria de exemplos voltada para exibição de
Conteúdo estático
(inf...
Acessibilidade no Expresso
REFERÊNCIAS

Práticas...

Leitores de Tela....?

Validadores de acessibilidade
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)

Interface móvel do expressobr

...
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)

Interface móvel do expressobr

...
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)

Interface móvel do expressobr

...
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)

Interface móvel do expressobr

...
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)

Interface móvel do expressobr

...
Acessibilidade no Expresso
Adaptar ou Criar um novo ?
Acessibilidade no Expresso
UNIVERSO DE USUÁRIOS
●
Pessoas com deficiência visual
(hoje, são os principais usuários e 'cola...
Acessibilidade no Expresso
LEITORES DE TELA
●
Diversidade de leitores
(jaws, NVDA, Orca, Dosvox, virtual vision...)
●
Dive...
Acessibilidade no Expressobr
PREMISSAS

Pautar por recomendações eMAG

Pautar por recomendações dos usuários diretos

H...
Acessibilidade no Expressobr
PREMISSAS

Restringir o uso de javascript

Podem estar desabilitados

Eventos dinâmicos (a...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- alt (descrição de imagens)
- autofocus (posicionamento)
- tabindex (posicionamento)
- Desta...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr
- Título das páginas
- Por onde o leitor de tela
inicia
- Descrição vai situar o
contexto atu...
Acessibilidade do expressobr

Tabelas

Caption (para título da tabela)

Usar id e headers para linkar o conteúdo das cé...
Acessibilidade do expressobr

Links

Usuários mais experientes navegam, através de teclas de atalho, utilizando
funciona...
Acessibilidade do expressobr

Links

Usuários mais experientes navegam, através de teclas de atalho, utilizando
funciona...
Acessibilidade do expressobr

Links

Usuários mais experientes navegam, através de teclas de atalho, utilizando
funciona...
Acessibilidade do expressobr

Links

Usuários mais experientes navegam, através de teclas de atalho, utilizando
funciona...
Acessibilidade do expressobr

Anexos

Extensão (formato)

Tamanho
Acessibilidade do expressobr

Feedback de ações
Acessibilidade do expressobr

Feedback de ações
Acessibilidade do expressobr

Feedback de ações
Serviço Federal de Processamento de Dados - Serpro
Edifício Alfama, Parque Alfa - CEP 88010-140
Fone: (48) 3231-8900 - Flo...
Próximos SlideShares
Carregando em…5
×

Expresso Acessível - 1º Seminário PHP no Serpro

225 visualizações

Publicada em

O Expresso Acessível é a interface do Expressov3 para deficientes visuais.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
225
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Expresso Acessível - 1º Seminário PHP no Serpro

  1. 1. Seminário de PHP do SERPRO IMPLEMENTANDO ACESSIBILIDADE NO EXPRESSO Diogo Dantas Serpro - CEAGO
  2. 2. Acessibilidade no Expresso MOTIVAÇÃO PARA PENSAR EM ACESSIBILIDADE  Inclusão digital  Meios de comunicação  Aprimoramento profissional, acadêmico...  Legalidade
  3. 3. Acessibilidade no Expresso REFERÊNCIAS  Teóricas...  eMAG – Modelo de acessibilidade (http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG)  W3C (http://www.w3c.br/GT/GrupoAcessibilidade)
  4. 4. Acessibilidade no Expresso REFERÊNCIAS  Práticas...  Maioria de exemplos voltada para exibição de Conteúdo estático (informativos, artigos, leituras...)  Algum sistema com maior interação com o usuário?!.. (ExpressoV2, software proprietário...)
  5. 5. Acessibilidade no Expresso REFERÊNCIAS  Práticas...  Leitores de Tela....?  Validadores de acessibilidade
  6. 6. Acessibilidade no Expresso Expressobr móvel (javascript + cache agressiva + responsive)  Interface móvel do expressobr  Email  Contatos  Calendário  Utiliza-se da arquitetura de serviços do expressobr  Preocupação com a acessibilidade, gerou...  Módulo expressobr acessível  Email (principais funcionalidades disponíveis)  Contatos e Calendário (em breve)  Utiliza a API do Expressobr móvel
  7. 7. Acessibilidade no Expresso Expressobr móvel (javascript + cache agressiva + responsive)  Interface móvel do expressobr  Email  Contatos  Calendário  Utiliza-se da arquitetura de serviços do expressobr  Preocupação com a acessibilidade, gerou...  Módulo expressobr acessível  Email (principais funcionalidades disponíveis)  Contatos e Calendário (em breve)  Utiliza a API do Expressobr móvel
  8. 8. Acessibilidade no Expresso Expressobr móvel (javascript + cache agressiva + responsive)  Interface móvel do expressobr  Email  Contatos  Calendário  Utiliza-se da arquitetura de serviços do expressobr  Preocupação com a acessibilidade, gerou...  Módulo expressobr acessível  Email (principais funcionalidades disponíveis)  Contatos e Calendário (em breve)  Utiliza a API do Expressobr móvel
  9. 9. Acessibilidade no Expresso Expressobr móvel (javascript + cache agressiva + responsive)  Interface móvel do expressobr  Email  Contatos  Calendário  Utiliza-se da arquitetura de serviços do expressobr  Preocupação com a acessibilidade, gerou...  Módulo expressobr acessível  Email (principais funcionalidades disponíveis)  Contatos e Calendário (em breve)  Utiliza a API do Expressobr móvel
  10. 10. Acessibilidade no Expresso Expressobr móvel (javascript + cache agressiva + responsive)  Interface móvel do expressobr  Email  Contatos  Calendário  Utiliza-se da arquitetura de serviços do expressobr  Preocupação com a acessibilidade, gerou...  Módulo expressobr acessível  Email (principais funcionalidades disponíveis)  Contatos e Calendário (em breve)  Utiliza a API do Expressobr móvel
  11. 11. Acessibilidade no Expresso Adaptar ou Criar um novo ?
  12. 12. Acessibilidade no Expresso UNIVERSO DE USUÁRIOS ● Pessoas com deficiência visual (hoje, são os principais usuários e 'colaboradores' do expressobr acessível, portanto o foco de funcionalidades também tem sido validado por eles) ● Pessoas com a visão reduzida (hoje, já podem utilizar o expressobr acessível) ● Pessoas com deficiências motores
  13. 13. Acessibilidade no Expresso LEITORES DE TELA ● Diversidade de leitores (jaws, NVDA, Orca, Dosvox, virtual vision...) ● Diversidade de navegadores (browsers) (ex: accesskey ) ● Níveis de experiência e conhecimento de recursos dos leitores de tela
  14. 14. Acessibilidade no Expressobr PREMISSAS  Pautar por recomendações eMAG  Pautar por recomendações dos usuários diretos  HTML (gerado pelo php)
  15. 15. Acessibilidade no Expressobr PREMISSAS  Restringir o uso de javascript  Podem estar desabilitados  Eventos dinâmicos (assíncronos)
  16. 16. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  17. 17. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  18. 18. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  19. 19. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  20. 20. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  21. 21. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  22. 22. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  23. 23. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  24. 24. Acessibilidade do expressobr - alt (descrição de imagens) - autofocus (posicionamento) - tabindex (posicionamento) - Destacar ações de mouse e teclado (posicionamento) - title (orientação de uso) - placeholder (orientação de uso) - required + pattern + title Campos obrigatórios (validação e orientação de uso)
  25. 25. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  26. 26. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  27. 27. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  28. 28. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  29. 29. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  30. 30. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  31. 31. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  32. 32. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  33. 33. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  34. 34. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  35. 35. Acessibilidade do expressobr - Título das páginas - Por onde o leitor de tela inicia - Descrição vai situar o contexto atual de uso da aplicação - Cabeçalhos (headers) - Títulos e subtítulos - Organizar as informações - “Deslocadores” - Teclas de acesso (accesskey)
  36. 36. Acessibilidade do expressobr  Tabelas  Caption (para título da tabela)  Usar id e headers para linkar o conteúdo das células com os respectivos cabeçalhos.  Thead (cabeçalhos da tabela), tbody (corpo da tabela)  summary  aria-hidden (html5) *
  37. 37. Acessibilidade do expressobr  Links  Usuários mais experientes navegam, através de teclas de atalho, utilizando funcionalidades rápidas dos leitores de tela  Exemplos de atalhos: Tecla do leitor + F7
  38. 38. Acessibilidade do expressobr  Links  Usuários mais experientes navegam, através de teclas de atalho, utilizando funcionalidades rápidas dos leitores de tela  Exemplos de atalhos: Tecla do leitor + F7
  39. 39. Acessibilidade do expressobr  Links  Usuários mais experientes navegam, através de teclas de atalho, utilizando funcionalidades rápidas dos leitores de tela  Exemplos de atalhos: Tecla do leitor + F7
  40. 40. Acessibilidade do expressobr  Links  Usuários mais experientes navegam, através de teclas de atalho, utilizando funcionalidades rápidas dos leitores de tela  Exemplos de atalhos: Tecla do leitor + F7
  41. 41. Acessibilidade do expressobr  Anexos  Extensão (formato)  Tamanho
  42. 42. Acessibilidade do expressobr  Feedback de ações
  43. 43. Acessibilidade do expressobr  Feedback de ações
  44. 44. Acessibilidade do expressobr  Feedback de ações
  45. 45. Serviço Federal de Processamento de Dados - Serpro Edifício Alfama, Parque Alfa - CEP 88010-140 Fone: (48) 3231-8900 - Florianópolis SC www.serpro.gov.br

×