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'>&lt?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'>&lt?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

Teste de acessibilidade na prática

By Livia Gabos

Made with Slides.com

Teste de acessibilidade na prática

Apresentação feita no WordCamp 2019 sobre teste de acessibilidade com o Filipe Zaniboni

  • 1,554

More from Livia Gabos