Da un pezzo non scrivo un bel post sull’accessibilità del web. Forse perché, rispetto ai tempi del far west dei siti fatti a colpi di tabelle per allineare le immagini , di tempo ne è passato tanto. Oramai gli standard sono consolidati in lungo e largo, e con le linee guida da un lato e l’allineamento dei browser sulla tecnologia dall’altro, non ci sono più scuse per non creare uno spazio che sia fruibile quanto più possibile da parte tutti gli utenti, a prescindere dalla loro disabilità e dal fatto che siano umani o no. Ricordo ancora quando facevamo una faccia schifata scrivendo il codice bruttissimo per supportare quel disgraziato di Internet Explorer, in tutte le sue incarnazioni, o per fare in modo che Safari mostrasse il contenuto di una pagina in maniera decente. Oramai i fogli di stile che mettevano una pezza a quelle stranezze sono solo un lontano ricordo. E proprio di fogli di stile vorrei parlare oggi.
Nello specifico, di una delle croci e delizie di noi sviluppatori web: i moduli da compilare, altrimenti noti come <FORM>. In questo post ti guiderò nella creazione di un semplice modulo di contatto utilizzando HTML semantico e una fantastica pseudo-classe CSS conosciuta come :focus-within, che consente di controllare in maniera più intelligente il focus, ovvero quando un campo del modulo è attivo e si può interagire con esso, ad esempio digitando una parola al suo interno. In termini di accessibilità, il focus è importante perché informa l’utente esattamente dove si trova nella sua esperienza di navigazione. A differenza della pseudo-classe :focus, questa consente di definire uno stile per tutti i discendenti (o gli antenati) dell’elemento stesso nella gerarchia della pagina. Sarà quindi possibile fare cose come cambiare lo sfondo dell’intero modulo, quando uno dei campi è attivo.
Prima eravamo abituati a scrivere
:focus {
/* Metti i tuoi stili qui */
}E siccome alcuni pensavano che quel bordo nero intorno ai campi fosse brutto a vedersi, allora si andava a colpi di outline: 0 per nasconderlo, creando di fatto un problema, ad esempio, per i visitatori con problemi di ipovisione. Capisco che bisogna trovare il giusto equilibrio tra estetica ed accessibilità: ancora oggi, strano ma vero, gente con cui parlo storce il naso non appena pronuncio la parola accessibilità del web, pensando che il sito verrà fuori necessariamente brutto, dovendo sottostare ai rigidi canoni di questa branca dell’informatica. Ma non è più così, e proprio la pseudo-classe di cui ti sto parlando ne è un esempio lampante. Con i giusti accorgimenti, si potrà ad esempio cambiare lo sfondo dell’intero modulo, per indicare all’utente dove si trova il cursore in questo momento:
form:focus-within {
background: #ff7300;
color: black;
padding: 10px;
}Qualcuno potrebbe chiedersi se tutti i browser supportano questa proprietà, e come ci conferma il buon Can I Use, la risposta è che non ci sono di questi problemi, nella stragrande maggior parte dei casi. Insomma, tutto questo per dire che è arrivato il momento di cominciare a pensare fuori dagli schemi tradizionali, e di convincersi che accessibilità ed estetica possono andare di pari passo.