![Page 1: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/1.jpg)
Como projetar sites acessíveis usando o WordPress
WordCamp SP
![Page 2: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/2.jpg)
Parte 1 – Conceitos (Why)
![Page 3: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/3.jpg)
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
![Page 4: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/4.jpg)
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
![Page 5: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/5.jpg)
Accessible UX• É impossível falarmos hoje sobre usabilidade sem
incluir acessbilidade• Accessible UX Manifesto• Novidades da Accessibility Camp Toronto (27/09/2014)
![Page 6: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/6.jpg)
Parte 2 – Como fazer (How)
![Page 7: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/7.jpg)
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
![Page 8: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/8.jpg)
Boas práticas frontend• Semântica• Atributos alt, title, lang• Novos input types: search, tel, url, etc• Autofocus• Tabindex• Accesskeys
![Page 9: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/9.jpg)
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
![Page 10: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/10.jpg)
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.
![Page 11: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/11.jpg)
WordPress e Acessibilidade - Temas• Accessible Starter Theme• Underscores
• Accessible Basic Themes• Accessible Zen• Twenty Thirteen
• Accessible Frameworks• Genesis
• Child-theme: Leiden
![Page 12: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/12.jpg)
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.
![Page 13: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/13.jpg)
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/
![Page 14: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/14.jpg)
Parte 3 – Cases de sucesso (Who)
![Page 15: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/15.jpg)
Prêmio Todos@Web• Histórico• Alguns cases de exemplo
![Page 16: [Rascunho] Como projetar sites acessíveis usando o WordPress](https://reader036.vdocuments.net/reader036/viewer/2022062514/55879e5bd8b42afb748b476c/html5/thumbnails/16.jpg)
Live demo de sites acessíveis