Ti

Neste artigo irei abordar uma experiência recente que me incomodou bastante e vale a pena ser compartilhada.

Estava navegando em um site que tinha um MENU grande, com vários submenus. Experimentei fazer uma navegação usando apenas o teclado, por motivos de estar sem o mouse temporariamente… e digo: foi horrível!! O desenvolvedor simplesmente “matou” a navegação com apenas uma linha de código de CSS: outline: none;.

Fiz um teste simples para vocês tentarem visualizar esse acontecimento. Tentem acessar o menu “Áudio”, usando apenas o teclado com a tecla (TAB). Se conseguirem, vocês serão redirecionados ao site da Plan B. Acessem a aba “Result” a seguir e façam o teste.

Teste sem outline

Conseguiram? Provavelmente não. Uma propriedade de CSS chamada outline auxilia a nossa navegação, principalmente se usada com apenas o teclado. É uma “bordazinha inteligente” que fica em volta do elemento quando tiver em foco.

Tente realizar o mesmo procedimento com a outline acessível:

Teste com outline

Viu como é mais fácil?! A propriedade outline está aí para nos ajudar a navegar pelos sites e sistemas. Essa situação que citei é apenas uma de várias outras situações que podem ocorrer, para a não utilização do Mouse. Sem falar nas pessoas com deficiência visual, motora, surdocegos, entre outras. O outline é muito importante para Acessibilidade na Web. Nós, desenvolvedores, temos que ficar atentos e pensar em nossos usuários.

São propriedades como o outline que facilitam a inclusão de todas as pessoas ao seu site e na Web. 🙂

Bom pessoal, era isso que gostaria compartilhar com vocês hoje! Obrigado! E deem seus feedbacks! 😀