1. Seminário de PHP do SERPRO
IMPLEMENTANDO
ACESSIBILIDADE NO EXPRESSO
Diogo Dantas
Serpro - CEAGO
2. Acessibilidade no Expresso
MOTIVAÇÃO PARA PENSAR EM ACESSIBILIDADE
Inclusão digital
Meios de comunicação
Aprimoramento profissional, acadêmico...
Legalidade
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. 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. 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. 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. 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
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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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