Como projetar sites acessíveis usando o WordPress

WordCamp SP

Parte 1 – Conceitos (Why)

Mas, afinal, o que é acessibilidade?• “Web accessibility means that people with disabilities

can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”• Fonte: WAI – W3C

A Web é para todos?• Panorama da acessibilidade no Brasil• Panorama da acessibilidade no mundo• Tecnologias assistivas evoluem numa velocidade

acelerada, enquanto boas práticas de acessibilidade caminham em passos de tartaruga• Todas as pessoas são beneficiadas

Accessible UX• É impossível falarmos hoje sobre usabilidade sem

incluir acessbilidade• Accessible UX Manifesto• Novidades da Accessibility Camp Toronto (27/09/2014)

Parte 2 – Como fazer (How)

Comece com um bom planejamento• Design Universal• Paralelo com a arquitetura

• Um projeto acessível deve prever:• Design• Desenvolvimento• Casos de Uso• Testes, testes e mais testes

Boas práticas frontend• Semântica• Atributos alt, title, lang• Novos input types: search, tel, url, etc• Autofocus• Tabindex• Accesskeys

Boas práticas de conteúdo• WAI - ARIA• Menus de navegação• Links de salto• Mapa do Site• Vídeos com legenda• Textos assistivos• Textos descritivos

WordPress e Acessibilidade - Intro• Premissa

• WordPress is founded on the principles of an inclusive community and democratization of publishing. The development of WordPress, based on standards and best practices, offers a constantly improving environment with flexibility and choice. We promise to always work toward creating an environment accessible to as many people as possible, inclusive of technology and ability.

• WordPress - with a high quality theme - works right out of the box to help you keep your site accessible. A great deal of the work is done for you but you still have to take the time and patience to maintain those accessibility standards when creating your content.

WordPress e Acessibilidade - Temas• Accessible Starter Theme• Underscores

• Accessible Basic Themes• Accessible Zen• Twenty Thirteen

• Accessible Frameworks• Genesis

• Child-theme: Leiden

WordPress e Acessibilidade - Plugins• WP Accessibility

• Enable skip links with WebKit support by adding JavaScript support to move keyboard focus.

• Add skip links with user-defined targets. (Customizable targets and appearance.)

• Add language and text direction attributes to your HTML attribute• Add an outline to the keyboard focus state for focusable

elements.• Add a toolbar toggling between high contrast, large print, and

desaturated (grayscale) views of your theme.• Add a long description to images. Use the image's "Description"

field to add long descriptions.

Onde saber mais?• WAI• WCAG 2.0• WAI-ARIA

• eMAG• http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG

• Codex• http://codex.wordpress.org/Accessibility

• WP Accessibility Group• http://make.wordpress.org/accessibility/

Parte 3 – Cases de sucesso (Who)

Prêmio Todos@Web• Histórico• Alguns cases de exemplo

Live demo de sites acessíveis