Acessibilidade e semântica na web com uso de CMS Joomla

Fórum Internacional de Software Livre - FISL16

11 de julho de 2015

Emerson Rocha LuizFull stack developer & coacher @ Alligo

emerson@alligo.com.br

Twitter / github / linkedin: fititnt (lê-se Fi-ti-tê-ene-tê, ou apenas Fi-ti)

Contribuidor de longa data do Projeto Joomla (moderador aposentado do fórum oficial, membro do Joomla Bug

Squad, duas vezes mentor pelo projeto Joomla no Google Summer of Code, membro de JUGs (...)

Agenda● 1 Prefácio

● 1.1 Acessibilidade web para quem?● 1.2 Web semantica para o que?● 1.3 Problema de gerenciar conteúdo em grandes portais

● 2 CMS Joomla● 2.1 Como boa opção para web semantica● 2.2 Como base para portal acessível● 2.3 Como gerenciador de conteúdo

● 3 Governo● 3.1 Recomendações oficiais (ePing, eMag, ePWG)● 3.2 Portal Padrão em Joomla

1.1 Acessibilidade web para quem?

Alguns exemplos pontuais

Daltonismo

Fonte: willtirando.com.brFonte: chroma-glass.ucsd.edu

Esta carne ainda está crua? (está mal passada)

Estou vestindo violeta? (está vestindo azul)

Daltonismo

Fonte: chroma-glass.ucsd.edu

Problemas de acessiblidade visuais além do usuárioO meio aonde o site é visualizado também implica em cuidados para melhor compreensão da informação

● Monitor de má qualidade

● Projetor com contraste ruim (quem sabe até mesmo o usado nesta palestra?)

● Impressão em preto e branco

Limitações motorasTetraplégicos podem pressionar uma tecla por vez (pense sites que usam Shift/Ctrl + tela são problemáticos)

Doença de Parkinson prejudica firmeza nas mãos(Imagem: https://goo.gl/6B0ls4)

Tetraplégicos podem pressionar uma tecla por vez (pense sites que usam Shift/Ctrl + tela são problemáticos)

Limitações motorasUso de mouse com mão não acostumada por lesão(fonte: https://goo.gl/TdBD7x)

Existem mais problemas de acessiblidade motoras além do usuárioO meio aonde o site é acessado pode impedir ou dificultar muito seu uso

● Mouse ruim e sites que exigem pontaria para executar algo

● Sites não responsivos acessados por celular

1.2 Web semântica para o que?

Alguns exemplos pontuais

Mecanismos de busca

Microdata, RDF, etc

JSON-LD

HTML semantico é usado por leitores de tela

Uso de leitor de tela por deficiente visual depende de semântica(imagem: http://www.travis.af.mil/news/story.asp?id=123194362)

Leitores de tela (acessibildiade)

Android: TalkBack; Iphone/iPad/iPods: VoiceOver; Windows Phone e BlackBerry também tem leitor de tela

1.3 Problema de gerenciar conteúdo em grandes portais

Problemas de gerenciar conteúdo de grandes portais

Tudo que um site pequeno tem, porém em grande escala

● Requisitos de servidor

● Migração de dados potencialmente trabalhosa

● Dificuldade de convencer gerentes e criadores de conteúdo

● Pressão para não parar de funcionar

● Tentativas de invasão

● ...e muito mais!...

2. CMS Joomla como soluçãoUm CMS open-source, largamente utilizado, como base para sites

acessíveis, semânticos e prontos para portais grandes

2.1 Web Semântica e JoomlaA base entregue do CMS já é HTML5 válido e possuí uma boa base de

microdata para boa parte dos usos comuns; customização além é possível para uso avançado

Joomla por padrão

2.3. Joomla como base para portal acessível

TL;DR: usar um CMS que por padrão permite boa acessibilidade ajuda muito, mas por si só não garante boa acessibilidade sem devidos

cuidados

Acessibilidade e Joomla!

(demonstração na prática)

2.3 Joomla como gerenciador de conteúdo para grandes portais

Joomla como gerenciador de conteúdo para grandes portais

(demonstração na prática)

3 Governo

3.1 Recomendações oficiais

Padrões do governo brasileiro

ePingPadrões de Interoperabilidade de Governo Eletrônico http://eping.governoeletronico.gov.br/

● Adoção Preferencial de Padrões Abertos

● Uso de Software Público e/ou Software Livre

● Existência de Suporte de mercado

eMAGModelo de Acessibilidade em Governo Eletrônico

http://emag.governoeletronico.gov.br

Recomendações gerais de acessibildiade, texto em português, foco para sites do

governo

ePWGPadrões Web em Governo Eletrônico

http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov

1) Cartilha de Codificação

2) Guia de Administração

3) Cartilha de Usabilidade

4) Cartilha de Redação Web

3.2 Portal Padrão em JoomlaModelo de portal para sites do governo brasileiro, baseado em Joomla

(Obrigado JoomlaCalango!)

JoomlaDayBrasil

Obrigado! Perguntas?● Emerson Rocha Luiz● emerson@alligo.com.br● twitter.com/fititnt● fititnt.org