Teste de acessibilidade na prática
Filipe Zaniboni
@zaniboni_filipe
Livia Gabos
@liviagabos
em qualquer rede social
Acessibilidade é
Acessibilidade na Web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na Web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso. (W3C BRASIL)
Acessibilidade é independente...
Do lugar que você está
Do modo de acesso
Das condições/capacidades físicas
Das condições/capacidades financeiras
Das capacidades intelectuais/cognitivas
Das capacidades educacionais
Você consegue fazer o que quiser, quando e como quiser!
Acessibilidade não é só código!
Acessibilidade é um caminho
WordPress é acessível
Nós que não lembramos e implementamos isso :/
Dicas para temas acessíveis
Links
- Não crie links "Leia mais" ou "Clique aqui"
- Não use title em links
Não fazer
Lembrar!
- Adicione :focus e :active nos links
- Permita que links tenham underline
Use marcações do HTML5
- header
- nav
- main
- aside
- footer
Use landmarks
Marcações do wai-aria:
- banner
- navigation
- main
- complementary
- contentinfo
Aplicar apenas 1x por página:
- banner
- main
- contentinfo
Atalhos
Coloque os links de atalhos antes do menu principal
<body> <header> <a class=”screen-reader-text skip-link” href="#content">Skip to content</a> <h1>Site title</h1> </header> <nav> <ul>
Botões
Botão com ícones de background
Não está correto <span class="menu-toggle"> <span class='dashicons dashicons-menu'></span></span>
Botões
Botão com ícones de background
Está correto
<button class="menu-toggle">
<span class="dashicons dashicons-menu"></span>
<span class="screen-reader-text">Menu</span></button>
Form
Como apresentar informações
Não está correto <input type='text' name='s' value=' <?php echo trim( get_search_query() ); ?>'>
Form
Como apresentar informações
Está correto: (label está escondido) <label for='s' class='screen-reader-text'><?php _e( 'Search', 'textdomain' ); ?></label> <input type='text' name='s' id='s' value='<?php echo trim( get_search_query() ); ?>'>
Form
Label visível é melhor
Melhor: (label é visível) <label for='s'><?php _e( 'Search', 'textdomain' ); ?></label> <input type='text' name='s' id='s' value='<?php echo trim( get_search_query() ); ?>'>
Teste de acessibilidade
Documentação do WP
Outros links
Bookmark da liviagabos no github
Valeu!
@zaniboni_filipe
@liviagabos
