La Regina Sono #Me
E-commerce e moda
L'e-commerce di un brand fiorentino di abbigliamento e accessori: pezzi unici cuciti nel laboratorio interno al negozio e personalizzabili con pittura a…
Siti che funzionano per tutti. Anche per la legge.
Sono una UX/UI designer a Firenze. Progetto siti e piattaforme accessibili secondo le WCAG 2.2 e conformi a GDPR e normativa europea, e li seguo dal primo incontro alla messa online.
- Esperienza utente Ricerca e interfacce
- Accessibilità WCAG 2.2 livello AA
- Compliance GDPR e AgID
- Sviluppo sicuro Studi in Informatica
Chi sono
Progetto siti e piattaforme che funzionano per tutti: per chi li usa, per chi li gestisce e per chi deve rispettarne le regole.
Mi chiamo Nicole Michielin e lavoro a Firenze. Studio Informatica all'Università degli Studi di Firenze. Seguo i progetti dall'inizio alla fine: il confronto con il cliente, l'analisi di chi userà il sito, l'architettura dei contenuti, il design dell'interfaccia e la verifica di accessibilità.
Conoscere il codice e i principi della sicurezza informatica cambia il modo in cui disegno: propongo cose che si possono davvero costruire, tengo conto dei vincoli tecnici dal primo wireframe e parlo la stessa lingua di chi sviluppa. Quando il sito lo costruisco io, il passaggio di consegne non esiste, perché non c'è nessun passaggio.
Ho lavorato con un comune, con un atelier di alta gioielleria, con una software house, con due piattaforme di creator, con una comunità religiosa, con una scuola di ballo e con un negozio di abbigliamento. Pubblici molto diversi: è la ragione per cui parto sempre dall'ascolto e non da un modello da riempire.
- 6
- anni di esperienza
- 20+
- progetti portati online
- 9
- casi raccontati per intero
- 4
- lingue nei progetti: IT, EN, DE, ES
- AA
- livello WCAG 2.2 di riferimento
Competenze
Di solito sono quattro fornitori.
Qui sono una persona sola, e le decisioni si prendono una volta. Niente progetto che passa di mano, niente pezzi che si perdono fra un fornitore e l'altro.
Parto da chi userà il sito e dai compiti che deve portare a termine, non da una tavolozza di colori. Ricerca, architettura dei contenuti, wireframe, prototipi, interfacce: quando arriviamo al colore, la struttura regge già.
- Discovery
- Percorsi utente
- Wireframe
- Design responsive
WCAG 2.2 livello AA verificate a mano, non con un punteggio automatico: gli strumenti trovano circa un terzo dei problemi reali. Contrasti misurati, tutto raggiungibile da tastiera, focus sempre visibile.
- WCAG 2.2 AA
- Screen reader
- Tastiera
- Contrasto
Consenso cookie e informative conformi al GDPR, senza dark pattern: «Rifiuta» pesa quanto «Accetta». Per gli enti pubblici, dichiarazione di accessibilità su AgID e linee guida di design rispettate.
- GDPR
- Cookie consent
- AgID
- Privacy by design
Studio Informatica all'Università di Firenze. Conosco il codice e lo sviluppo sicuro, quindi disegno cose che si possono davvero costruire: fra il mio file e il sito online non c'è un passaggio di consegne in cui si perde qualcosa.
- HTML e CSS
- WordPress
- Sviluppo sicuro
Metodo
Dal primo incontro a quello che viene dopo.
Cinque passaggi, sempre gli stessi, fino alla messa online. Poi scegli tu: ti consegno il sito, oppure resto a seguirlo.
-
01
Ascolto
Ci parliamo. Raccolgo obiettivi, vincoli, pubblico e obblighi normativi. Quando questo passaggio è chiuso sai che cosa ti serve, anche se poi decidi di non farlo con me.
-
02
Struttura
Architettura dei contenuti e percorsi utente. Prima di qualunque scelta estetica si decide che cosa deve trovare una persona, e in quanti passaggi.
-
03
Design
Interfaccia, sistema visivo e componenti, pensati insieme per schermo grande e telefono. Vedi e approvi tutto prima che si scriva una riga di codice.
-
04
Verifica
Controllo WCAG 2.2 AA, privacy e consenso, qualità dei contenuti. Non è l'ultimo adempimento: è il passaggio che decide se il sito è finito.
-
05
Messa online
Il sito va online solo dopo aver passato la verifica. Da qui la strada si divide, e la scegli tu.
Dopo la messa online, due strade.
-
Consegna del progetto
Ti passo il sito, le chiavi e il modo di usarli. Ti lascio qualcosa che sai aggiornare da sola, non una dipendenza da me.
- Formazione su come aggiornare testi e immagini senza perdere l'accessibilità
- Documentazione del progetto e delle scelte fatte
- Dichiarazione di accessibilità e informative aggiornate alla consegna
Se più avanti cambi idea, l'assistenza si può attivare anche dopo.
-
Quella che consiglio
Assistenza continuativa
Il sito resta seguito da chi l'ha costruito. Non devi rispiegare niente a nessuno: conosco già il progetto, le scelte e i loro perché.
- Aggiornamenti di WordPress, tema e plugin, provati prima di andare online
- Backup e controlli di sicurezza
- Ogni pagina nuova verificata per l'accessibilità prima di pubblicarla
- Informative e dichiarazione di accessibilità tenute al passo con norme e contenuti
- Modifiche ed evoluzioni senza ripartire ogni volta da capo
Verifiche
L'accessibilità non è un plugin. È una scelta di progetto.
Queste otto cose le controllo su ogni progetto, prima di dirti che è finito. Apri una voce e vedi la differenza fra come si trova di solito e come la faccio io: non è una descrizione, è la cosa vera.
-
Testo normale almeno 4,5:1, testo grande e componenti almeno 3:1. Misurato, non stimato a occhio.
Spesso si trova così
Grigio chiaro su bianco. Si legge solo con una luce buona e occhi riposati: alla terza riga molti smettono.
Io lo faccio così
Lo stesso testo, misurato. Il minimo richiesto è 4,5:1 e qui siamo molto sopra, anche con lo schermo al sole.
-
Ogni funzione raggiungibile senza mouse, con il focus sempre visibile e mai coperto da barre o banner.
Spesso si trova così
Il contorno è stato rimosso per ragioni estetiche. Chi naviga con Tab preme invio senza sapere su cosa.
Io lo faccio così
Lo stesso anello arancio che vedi su questo sito premendo Tab: si vede su qualsiasi fondo e non lo copre niente.
-
Un solo H1, gerarchia dei titoli senza salti, landmark e link «salta al contenuto» come primo elemento.
Spesso si trova così
I livelli scelti per dimensione, non per gerarchia. Chi naviga per titoli si trova una mappa con i piani mancanti.
Io lo faccio così
Un solo h1 e nessun salto. La dimensione la decide il foglio di stile, il livello lo decide la struttura.
-
Testi alternativi che dicono qualcosa; le immagini decorative restano invisibili agli screen reader.
Spesso si trova così
Quello che uno screen reader pronuncia davvero. Chi ascolta sa che c'è un'immagine e nient'altro: non sa nemmeno che si tratta di un gioiello.
Io lo faccio così
Scritto a mano, guardando la foto e il testo che la accompagna. Chi non vede l'immagine riceve la stessa informazione di chi la vede.
-
Etichette che si capiscono fuori contesto, aree di tocco adeguate, nuove schede annunciate prima del clic.
Spesso si trova così
Tre link identici dentro un testo corrente. Chi li scorre uno dopo l'altro con uno screen reader sente «Scopri di più» tre volte e deve rileggersi il paragrafo per capire dove portano.
Io lo faccio così
Ogni etichetta dice dove porta anche letta da sola. Nelle schede del portfolio, dove sopra al link c'è già il titolo del progetto, «Leggi tutto» va benissimo: il criterio 2.4.4 ammette il contesto. È nel testo corrente che non basta.
-
Etichette sempre visibili, errori spiegati con le parole per rimediare, nessun CAPTCHA come unica strada.
Spesso si trova così
L'etichetta era dentro il campo e si è cancellata appena hai scritto. Chi si distrae non sa più cosa stava compilando.
Io lo faccio così
L'etichetta sta sopra e resta. Occupa una riga in più e fa risparmiare tutti gli errori che nascono dal dubbio.
-
«Rifiuta» visibile quanto «Accetta», e nessun cookie non necessario installato prima della scelta.
Spesso si trova così
Il rifiuto c'è, ma scritto in grigio chiaro e grande la metà. Formalmente una scelta, nella pratica un imbuto.
Io lo faccio così
Identici: stessa forma, stessa dimensione, stesso colore, stesso contrasto. Dare al rifiuto anche solo un grigio più tenue basta a renderlo la scelta secondaria. E il rifiuto viene prima nell'ordine di tabulazione.
-
Informative privacy aggiornate e, per gli enti pubblici, dichiarazione di accessibilità pubblicata su AgID.
Spesso si trova così
Pubblicata una volta e mai più toccata. Per un ente pubblico va rivista ogni anno, ed è la prima cosa che si controlla.
Io lo faccio così
Con la data della rilevazione e i limiti noti dichiarati. Una dichiarazione senza limiti è credibile solo se è vera.
Progetti
Nove lavori scelti tra più di venti.
Settori diversi, pubblici diversi, ognuno seguito dal primo incontro alla messa online. Per ogni progetto trovi la sfida di partenza, le scelte fatte e le verifiche di accessibilità, con la data del controllo.
-
-
ScoutBerry
Piattaforme digitali
Una rete europea di creator selezionati: i brand scrivono un brief, l'intelligenza artificiale propone i profili più adatti e i contenuti arrivano…
-
Grimaldo Firenze
Gioielleria e lusso
Il sito di un atelier fiorentino di gioielli, a conduzione familiare da tre generazioni, con studio e laboratorio nel cuore di Firenze.
-
Proposta in gara
Blome Uhren & Schmuck
Gioielleria e lusso
Il prototipo navigabile dell'e-commerce di una gioielleria di Düsseldorf, concessionario ufficiale Rolex e Patek Philippe: undici schermate che aggiungono al negozio online…
Perché adesso
L'accessibilità digitale è diventata un obbligo anche per i privati.
Da quella data l'European Accessibility Act, recepito in Italia con il decreto legislativo 82/2022, estende gli obblighi di accessibilità a molti servizi digitali privati: commercio elettronico, banche, trasporti, telecomunicazioni, editoria digitale. Per la pubblica amministrazione l'obbligo c'era già, con la Legge 4/2004.
Chi vigila può chiedere conto, e un utente può segnalare. Nella pratica, però, la cosa che cambia prima è un'altra: un sito conforme è un sito che si usa meglio, e che quindi vende e informa meglio. Gli obblighi sono il motivo per cui ci si muove adesso, non il motivo per cui vale la pena farlo.
Dal blog
Quello che chiedono tutti, scritto una volta sola.
Obblighi di legge, dark pattern, strumenti che promettono scorciatoie. Con i riferimenti normativi al loro posto, così puoi controllare quello che scrivo.
-
Banner cookie: come farlo a norma senza trattare i visitatori da nemici
Il «Rifiuta» nascosto sotto due clic non è furbizia: è un consenso fragile e un visitatore infastidito. Come si costruisce un banner che regge una verifica.
-
Perché un plugin di accessibilità non mette il tuo sito a norma
Il widget con l'omino blu promette conformità in una riga di codice. Ecco cosa può fare davvero, cosa non può fare per costruzione, e cosa guarda…
-
Il tuo sito deve essere accessibile per legge? Come capirlo in cinque minuti
Dal 28 giugno 2025 l'accessibilità digitale è un obbligo anche per molti privati. Ma non per tutti, e non allo stesso modo. Tre domande per capire…
Chi mi ha affidato un progetto.
Pubblica amministrazione, moda ed e-commerce, gioielleria, ingegneria, industria, software, non profit, associazioni e studi professionali.
Contatti
Parliamo del tuo prossimo progetto.
Scrivimi che cosa ti serve. Ti rispondo entro due giorni lavorativi con una prima lettura del problema, anche se poi non lavoriamo insieme.
Oppure scrivimi direttamente
- Email hello@michielinnicole.com
- Telefono +39 340 650 8013
- Sede Firenze, Italia