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

Millorar l’accessibilitat i l’estètica en el disseny web: un enfocament en l’estil del focus

*:focus{outline:none!important}

Aquest codi és una regla CSS que s’utilitza per modificar el comportament predeterminat dels navegadors en ressaltar els elements enfocats, com enllaços o botons, quan es navega amb el teclat. Per defecte, els navegadors solen afegir un contorn al voltant dels elements enfocats per indicar on es troba l’usuari a la pàgina. Tanmateix, aquest contorn pot desentonar amb el disseny general del lloc i trencar la cohesió visual. En aplicar aquest codi, eliminem aquest contorn, cosa que permet tenir el control total sobre l’aparença dels elements enfocats.

Aquesta pràctica, tot i que millora l’estètica del lloc, s’ha de gestionar amb cura per no sacrificar l’accessibilitat. És fonamental oferir una alternativa visual clara per indicar el focus, garantint que el lloc web sigui fàcil de navegar per a tots els usuaris, inclosos els que depenen de la navegació per teclat per limitacions físiques o preferències personals.

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

add_action('wp_footer', 'quitar_foco_con_css');