Upload
flavio-lisboa
View
239
Download
3
Embed Size (px)
Citation preview
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 Aprimoramento profissional, acadêmico... Legalidade
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)
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...)
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
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
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)
Interface móvel do expressobr
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
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)
Interface móvel do expressobr
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
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)
Interface móvel do expressobr
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
Acessibilidade no Expresso
Expressobr móvel (javascript + cache agressiva + responsive)
Interface móvel do expressobr
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
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 '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
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
Acessibilidade no Expressobr
PREMISSAS
Pautar por recomendações eMAG
Pautar por recomendações dos usuários diretos
HTML (gerado pelo php)
Acessibilidade no Expressobr
PREMISSAS
Restringir o uso de javascript
Podem estar desabilitados
Eventos dinâmicos (assíncronos)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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) *
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
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
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
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
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 - SerproEdifício Alfama, Parque Alfa - CEP 88010-140
Fone: (48) 3231-8900 - Florianópolis SC
www.serpro.gov.br