expresso acessível - 1º seminário php no serpro

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

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

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

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

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

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

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