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

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)

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...)

REFERÊNCIAS

Práticas... Leitores de Tela....?

Validadores de acessibilidade

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

Contatos

Calendário

Contatos

Calendário

Contatos

Calendário

Contatos

Calendário

Adaptar ou Criar um novo ?

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

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)

- 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)

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) *

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

Anexos Extensão (formato) Tamanho

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

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

Technology

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