 bene ciao a tutti una domanda innanzitutto per iniziare quanti di voi qui sono designer ok quanti sviluppatori ok va bene non c'è problema perché tanto oggi ce n'è per tutti perché parlerò nella prima parte del talk di contenuti e design quindi dell'accessibilità dell'icone dal punto di vista dei contenuti e dei design nella seconda parte di come invece andare nello sviluppo più nello specifico a lavorarci sopra partiamo quindi a livello di contenuti e design una definizione fondamentale due definizioni fondamentali ve le portate a casa sono contento per oggi la differenza tra quelle che sono le icone decorative e quelle che sono le icone semantiche ok qual è la differenza e quali sono le definizioni diciamo che un'econa decorativa è quella che viene utilizzata esclusivamente per rafforzare il significato di qualcos'altro che è contenuto all'interno della pagina web diciamo che se la toglessi un utente riesce comunque a navigare sulla pagina senza grossi problemi diverso il discorso nel momento in cui parlo di icone semantiche un icona semantica invece è un icona che trasmette in se stessa un significato se ho un icona che viene utilizzata per una certa interazione che deve essere utilizzata per indicare che viene effettuata un'interazione sulla pagina ovviamente questa sarà un icona semantica giusto per capire se è chiara la differenza abbiamo da lato sinistro l'icona del menu con di fianco la scritta menu e nel lato destro soltanto l'icona del menu quella destra con solo icona del menu è semantica oppure decorativa semantica molto bene dall'altra parte invece c'è quella decorativa tutto chiaro fino adesso perfetto da questo momento in avanti il mio scopo è quello di distruggere tutte le volte le vostre certezze vi spiego in che maniera vi farò vedere adesso una serie di 5 icone una in fila all'altra quello che vi chiedo è di cercare di capire qual è il significato tenete cercate di individuare a quale icona capite il significato della prima che vi faccio vedere la prima icona che vi faccio vedere quella di un globo terrestre ok qualcuno ha idea di che cosa sia significato di questo icona tenetevelo per voi questa è l'icona di facebook invece la prima icona è quella che ci interessa se state capendo adesso qual è il significato della prima buon per voi adesso abbiamo twitter e successivamente instagram adesso abbiamo invece le quattro icone del globo terrestre di facebook di twitter e di instagram la domanda è a che passaggio quante persone hanno capito qual era il significato dell'icona del globo terrestre al primo passaggio ok bene non male quanti al secondo o al terzo al quarto quanti all'ultimo quanti non hanno capito cosa significa ok perfetto allora quest'icona del globo terrestre è un icona che viene utilizzata per indicare il sito web vero questa è un'interfaccia che è un esempio che tratto da una delle più importanti testate di news italiane televisive in cui vengono fatte vedere le quattro icone prima una dopo l'altra poi tutte di fianco tutti affiancate io credo di averci impiegato una quindicina di giorni per aver capito che la prima icona era quella del sito web quindi chi ha rezza sul significato dell'icone che state utilizzando a livello di ideazione dell'icona secondo esempio questa è un icona di una lente di ingrandimento che è significato a molto bene solo cerca anche zoom però attenzione perché possono essere ci sono alcune interfacce in cui vengono utilizzate contemporaneamente le due icone della lente di ingrandimento con significati diversi e ovviamente io devo fare in modo che sia che sia comprensibile quale viene utilizzata e quale in un caso è quale nell'altro ad esempio nel caso dello zoom posso mettere un più o un meno all'interno dell'icona per far capire che cosa sto andando utilizzare terzo esempio che vi faccio questa icona è l'icona che ha il significato di molto bene e che cosa rappresenta quest'icona vi sbagliate è un distributore di bevande con una lattina poggiata sul fondo questa è una cosa che è stata osservata da un ragazzo giapponese molto giovane evidentemente che non aveva mai visto un flop disc però tenete presente questo per farvi capire che il significato dell'icone può anche cambiare nel tempo e quindi può essere necessario che io debatantare la mia interfaccia per far capire col passare del tempo come cambia in realtà il significato che io do a quell'icona ok un' cosa a livello di design che è molto importante parlando di icone web e in realtà di qualsiasi tipo di contenuti web anzi no ci arriviamo dopo su queste il contrasto ok fate attenzione se un icona soprattutto è un icona di tipo semantico deve avere un contrasto rispetto allo sfondo su cui la sto utilizzando la pizza di sinistra non si riesce a vedere bene perché è di colore rosa su fondo bianco la pizza di destra invece che è un bel blu su fondo bianco sicuramente è molto molto molto più chiara ok torno in dietro un attimo abbiamo a questo punto la di nuovo la slide che avevo all'inizio con dal lato sinistro l'icona del menu con di fianco la scritta menu e dal lato destro soltanto l'icona qual è la più comprensibile secondo voi quella di sinistra stanno dicendo in molti quindi l'icona in cui c'è oltre che l'icona anche la scritta non è detto che si possa sempre utilizzare purtroppo perché se io prendo in considerazione interfacce mobile in cui magari devo mettere diversi elementi interattivi uno di fianco all'altro allora in quel caso io devo perforza utilizzare l'icona da sola l'altra alternativa potrebbe essere quella di andare a utilizzare soltanto la scritta menu invece che affiancare l'icona al menu secondo voi una scelta buona no perché ok no in realtà c'è un altro motivo non solo per questione di con al di là del contrasto che in realtà è sufficiente in realtà per poterla leggere forse è l'illuminazione dello schermo che non è il massimo ok non è neanche questo vi dico io la cosa perché va un po per le lunghe tenete conto che ci sono anche delle persone che hanno delle disabilità o meglio dei disturbi dell'apprendimento parla ad esempio della dislessia voi immaginatevi una persona dislessica ci sono alcuni studi recenti fatti che dimostrano che in realtà l'utilizzo dell'icona web dal momento che l'icona è un disegno quindi più facilmente memorizzabile come simbolo rispetto alle singole lettere che compongono una parola per i dislessi c'è più facile utilizzare un'interfaccia in cui c'è l'icona di fianco alla parola quindi utilizzare solo la parola non è detto che comunque sia una soluzione ok abbiamo finito con la parte di design passiamo allo sviluppo e qui andiamo un pochino più nel dettaglio diciamo che esistono due modi fondamentali per andare a implementare le icone si possono utilizzare o degli icon font oppure degli svg qui vi ho portato quattro esempi di hamburger in realtà l'unico hamburger che c'è vero è proprio quello sulla destra le altre sono tre icone con tre linee sovrapposte una all'altra che però vengono chiamati in gergo tecnico hamburger che rappresentano i menu di queste tre icone in realtà il file svg è uno solo che è quello in terza posizione da sinistra il primo è un icon font e per essere precisi è una lettera dell'alphabeto copto il secondo invece è uno dei simboli che vengono utilizzati dei trigrammi che vengono utilizzati soprattutto in corea in realtà se vedete la bandiera se avete presente la bandiera coreana nei quattro angoli ci sono quattro di questi trigrammi questo è il trigramma del paradiso sono diversi modi con cui posso implementare o come icon font o come svg non esiste un modo che è intrinsiccamente più corretto utilizzare quando si parla di accessibilità ma bisogna adottare delle tecniche diverse a seconda che si utilizzi uno piuttosto che l'altro ok come si implementano le icone decorative la risposta è estremamente semplice devo semplicemente andare a aggiungere un attributo aria id tru all'interno del dell'oggetto che mi descrive l'icon font piuttosto che l' svg che sto andando utilizzare nel dettaglio se ho un icon font decorativo vado semplicemente a mettermi un attributo aria id tru all'interno dell'oggetto che mi descrive l'icon font in questo caso l'icona della birra che c'è in alto a destra e vado a utilizzarlo in questa maniera una nota su questa cosa sto utilizzando il tag span per indicare le icone che vengono utilizzate come icon font non usate la lettera i perché semanticamente ha un uso diverso e noi dobbiamo anche fare un uso corretto della semantica dell'html a livello di svg in line non cambia assolutamente niente vado semplicemente ad aggiungermi l'attributo aria id tru questo mi permette di nascondere alle tecnologie assistive l'oggetto che io sto facendo vedere in questo caso l'icona ok se invece voglio andare a risolvere il problema delle icone semantiche quello che devo andare a fare semplicemente andare a inserire un testo alternativo che mi indichi non tanto che cos'è l'icona che io sto inserindo ma quello a cui serve l'icona che io sto inserindo nella mia interfaccia vediamo un esempio anzi no prima vi presenterò la vostra migliore amica da questo giorno in avanti per quanto riguarda le classi di warpress questa è una classe che è stata ottimizzata ed è inserita anche nel core del backend di warpress però potete inserirla tranquillamente all'interno del vostro tema anzi vi consiglio di farlo se non l'avete ancora fatto tanti visual composer guttenberg eccetera eccetera ci l'hanno già all'interno per cui non preoccupate ve ne troppo eventualmente andate a cercarverla e vedete come è diversa cosa serve serve per fare in modo che un testo che io inserisco all'interno della mia pagina web venga sostanzialmente nascosto in maniera ottimizzata questo funziona ad esempio sia con testi che vengono le con scritture che vengono scritte da sinistra destra scritture che vengono scritte da destra sinistra non avete problemi che ci sono con altri tipi di classi simili a questo qui vediamo un esempio pratico devo andarmi a costruire un'interfaccia di una compagnia a erea e devo andare a indicare in poco spazio qual è l'orario di partenza che cosa vado a fare mi vado a mettere un icon font di un aereo plano che sta decollando ma aggiungo la classe aria id dentro perché non voglio far vedere l'icona perché potrebbe essere interpretata male dal browser dopo di che vado aggiungere in realtà una classe un un testo che è orario di partenza dell'aereo non nascondo visivamente per cui l'utente che riesce a vedere non ha non si trova questo testo davanti che compliccarebbe l'interfaccia e poi un testo che viene letto sia degli in screen reader che dagli utenti normali che sei eventi che è il mio orario di partenza un altro esempio può essere quello di un pulsante di ricerca che viene inserito all'interno della mia pagina nella stessa maniera semplicemente io vado a mettermi il pulsante quindi il button vado a no vado a inserire un testo che ricerca no in questo caso scusate mi sto confondendo allora in questo caso lavoro in maniera diversa vado a nascondermi in realtà il carattere di ricerca il carattere che mi rappresenta la lente di ingrandimento quindi il carattere che mi rappresenta la ricerca e vado a inserire nel button che in realtà mi contiene l'icona un'etichetta che viene letta soltanto dalle tecnologie assistive che ricerca quello che stavo dicendo prima in realtà è questo tipo che è una variante rispetto quella precedente in cui io vado a mettermi il pulsante che mi permette di effettuare la ricerca vado a inserirmi due oggetti uno è l'icona con che però vado a nascondere utilizzando aria identro di nuovo e un testo che invece vado a leggere potete utilizzare l'una potete utilizzare l'altra sostanzialmente equivalente questo sistema è un filino meglio perché vi permette eventualmente di andare a recuperare in altra maniera il testo che state inserendo come testo alternativo dell'icona quindi ad esempio se voleste anche creare un un'etichetta che compare quando si fa l'over sull'icona stessa non utilizzate title perché è un po più complicato il gestione dei title a livello di svg funziona in maniera molto simile però è un pochino più complicato nel senso che io in cui nell svg vado in sostanza a dire con un etich vado a aggiungere un etichetta due etichette in realtà una che mi dà il titolo e una che mi dà la descrizione quindi una versione corta una versione lunga la descrizione potete evitarla ma la descrizione corta lascia il titolo quindi lasciatelo sempre e vado a inserirmi all'interno del file svg il titolo vero è proprio ok a questo punto l'unica cosa che devo aggiungere in questo caso è un role immagine all'interno dell'svg perché gli svg non sono immagini e quindi non vengono interpretate come tali dai browser devo andare a indicarglielo esplicitamente una seconda versione alternativa di questa cosa è una versione in cui vado a nascondermi l'icona e vado a aggiungermi un testo alternativo utilizzando la classe screen reader text e un'altra versione in questo caso andiamo di nuovo con un pulsante con un elemento interattivo quindi di nuovo torniamo all'esempio del pulsante anche in questo caso o mi vado a aggiungere l'area labelled by e vado a utilizzare il titolo all'interno della mia icona in formato svg si può utilizzare per recuperare in questa maniera oppure come abbiamo visto prima mi vado semplicemente a nascondere l'icona e mostrare il testo alternativo ok spero di avervi confuso per bene le idee qui trovate un po di risorse aggiuntive da cui potete andare a pescare un grano salis perché in realtà ci sono alcune cose che non sono secondo me chiarissime qualche errore in realtà in queste pagine c'è però andate a vedere un po di cose da cui ho pescato abbondantemente per preparare questa presentazione momento pubblicità se il mese prossimo ci sarà il work camp milano siete tutti invitati a partecipare ovviamente anzi guai a voi se non vi scrivete sarà il 22 il 23 di novembre ci saranno tre track per cui avremo ancora più talk tra cui potrete scegliere ci saranno due track di talk veri e propri come quelli che state sentendo oggi e una track invece di workshop per cui potrete interagire in maniera ancora più diretta con la persona con il relatore e ricordatevi che anche l'ultimo work camp del d'Italia per quest'anno per cui se no poi dopo mi sa che ci si rivede a torino ad aprile del 2020 qui trovate i miei contatti se avete bisogno di contattarmi tanto sono in giro per tutta la giornata per cui potete sfinirmi di domande fino all'inverso simile anche perché adesso ci sarà poco tempo per le domande e grazie a tutti le domande a questo punto mi sa che non c'è molto tempo una domanda