L''estil del focus: estètica i accessibilitat en el disseny web

L'estil del focus: estètica i accessibilitat en el disseny web

*:focus{outline:none!important}

Aquesta regla CSS (el full d'estil que diu com es veu una web) canvia el comportament per defecte dels navegadors quan navegues amb teclat. Normalment, en arribar a un enllaç o un botó, el navegador hi dibuixa un contorn: marca on és l'usuari a cada moment. Sovint aquest contorn desentona amb el disseny i trenca la cohesió visual. Amb la regla el traiem i guanyem control total sobre l'aparença dels elements enfocats.

Ara bé, hi ha un límit que no cal perdre de vista: gent que es mou per la web només amb el teclat, per limitacions físiques o per preferència. Si treus la seva marca visual sense donar-ne una altra, no sabran on són. Abans de treure'l, decideix com indicaràs el focus d'una altra manera.

Si fas servir WordPress, pots injectar el codi amb un plugin de snippets (el mateix camí que explico a Com eliminar elements del menú d'administració de WordPress amb Code Snippets):

<?php
function quitar_foco_con_css() {
    echo '<style type="text/css">
        *:focus{outline:none!important}
    </style>';
}

add_action('wp_footer', 'quitar_foco_con_css');

I si vols una altra millora d'estètica i experiència d'usuari, aquí tens com afegir un botó de canvi de mode dia/nit.