--- title: "Web accessibility: tecnologia assistiva e consigli di UI" description: "Web accessibility: tecnologia assistiva e consigli di UI Design. Scopri come rendere il tuo sito accessibile, garantendo un'esperienza user-friendly." image: /hubfs/blog-images/accessibility-testing-websites-design.png#keepProtocol --- [Design](https://blog.talentgarden.com/it/blog/tag/design) 6 min di lettura # Web accessibility: tecnologia assistiva e consigli di UI Scritto da ![Talent Garden](https://blog.talentgarden.com/hubfs/logo-tag-blog.png) [Talent Garden](https://blog.talentgarden.com/it/blog/design/web-accessibility-tecnologia-assistiva-consigli-ui#) ![](https://blog.talentgarden.com/hubfs/blog-images/accessibility-testing-websites-design.png) Condividi su ![](https://blog.talentgarden.com/hubfs/blog-images/accessibility-testing-websites-design.png) Non ti va di leggere? Prova ad ascoltare l'articolo in modalità audio 🎧 **Esistono diversi modi per utilizzare il web**. La maggior parte delle persone interagisce con un sito tramite gli occhi o attraverso l’uso del mouse o, in caso di un dispositivo mobile, con la punta delle dita. È inutile negare che durante il momento di progettazione di interfacce ed esperienze **sono esattamente questi gli utenti di riferimento che abbiamo in mente**. Ma la realtà è ben diversa e sicuramente non così semplice. C’è una frase molto famosa di **Tim Berners-Lee**, direttore del W3C e inventore del **World Wide Web**, che recita: *“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”.* Questa citazione è una sintesi immediata ed efficace di quelli che sono gli **obiettivi dell’accessibilità.** **Il web ha un'origine intrinsecamente accessibile** che, solo successivamente, si è parzialmente persa. Negli anni di maggiore crescita del web, la caotica introduzione di numerose estensioni del linguaggio (che favorivano l'attenzione alla presentazione grafica dei contenuti) finì per **sconvolgere gli standard** e scatenò una vera e propria guerra di specifiche tra i browser, in competizione per un aspetto più accattivante della pagina a ogni costo. Da questa **situazione disfunzionale** e dalle prime considerazioni sull'accesso ai disabili, nasce l'esigenza di **riportare il web alla sua naturale accessibilità.** **Infatti, non dobbiamo dimenticarci che non tutti usano il web allo stesso modo e non tutti hanno a disposizione le stesse competenze per navigare online.** ## **Chi ha bisogno di un sito web accessibile?** ** **Accessibilità significa rendere disponibile un prodotto al maggior numero di persone possibile.** Ad esempio: un **giovane sviluppatore** che utilizza un laptop con tastiera e mouse, un **non vedente** che utilizza un desktop con tastiera e screen reader, un utente** non vedente e sordo** che utilizza un computer desktop con tastiera, screen reader e braille display - ma anche un **viaggiatore** che utilizza uno smartphone sul treno con la connessione lenta o un **anziano** che utilizza un iPad in una giornata soleggiata. Per quanto riguarda le disabilità, è stimato che circa il **20% della popolazione abbia un qualche tipo di disabilità.** E man mano che questa invecchia, questo numero tenderà ad aumentare sempre di più. Non facciamo quindi l’errore di dare per scontato in che modo gli utenti – con disabilità o meno – utilizzeranno i nostri siti web. E poi, in generale, **u****n progetto accessibile darà beneficio a *tutti* gli utenti.** Ci sono** tre modi** per ottenere informazioni da una pagina web: l'**udito**, attraverso il parlato, la musica e il suono; la** vista**, come immagini, testi e video; e il **tatto**, attraverso punti, barre e vibrazioni. Se uno di questi sensi viene a mancare, possono subentrare gli altri. Un utente non vedente ad esempio può utilizzare uno **screen reader** per ascoltare il testo. Qualcuno che non può vedere e sentire, può ancora leggere il testo braille attraverso un **display braille**. Chi è sordo può leggere testi, sottotitoli, trascrizioni e immagini descrittive. Ognuno è diverso, ovviamente, e non possiamo etichettare le persone. Tuttavia, ci sono abbastanza somiglianze per identificare **4 diversi gruppi di utenti** e ciò che è importante per loro: ### **Utenti non vedenti o ipovedenti** È un gruppo di persone molto ampio e diversificato. [L'Organizzazione Mondiale della Sanità (OMS)](https://www.who.int/) stima che il numero di persone **ipovedenti** nel mondo sia di **285 milioni**,** di cui 39 milioni ciechi**. Questo dato corrisponde a circa il **4,5% dell'intera popolazione**. A questo gruppo appartengono: persone con ipermetropia e miopia, che hanno bisogno di occhiali; ciechi, ipovedenti e daltonici, che hanno difficoltà a identificare determinati colori. ### **Utenti non udenti o con problemi di udito** I dati raccolti nel 2019, stimano che circa **466 milioni di persone in tutto il mondo non sono udenti, o con deficit del sistema uditivo invalidanti**, di cui un terzo hanno un’età superiore ai 65 anni. Questo corrisponde a circa il **5%** della popolazione mondiale.  ### **Utenti con disabilità motoria** Secondo il Center for Disease Control and Prevention, questa forma di disabilità riguarda il** 15% di tutti gli adulti**; alcuni più gravi di altri. Se non puoi usare le braccia o le dita è chiaro che l’interazione con un sito web avverrà in modo diverso. ### **Utenti con disabilità cognitiva** Esistono molti tipi di disabilità cognitive e alcune di esse influenzano il modo in cui usiamo e comprendiamo il web. Le più comuni sono: **l’autismo, il disturbo da deficit di attenzione, l’iperattività (ADHD), l’ansia e la paura, la demenza e il morbo di Parkinson**. In ognuno di questi casi, l'utente disabile ha difficoltà a concentrarsi ed è costantemente distratto dai vari elementi grafici della UI, animazioni, pop-up, ecc. ## **Tecnologia assistiva** ** Le persone che non vivono la disabilità difficilmente riescono a comprenderla fino in fondo. Gli **strumenti di tecnologia assistiva** sono per lo più alla portata di tutti, integrati in vari sistemi operativi o disponibili come estensioni. **Testarli, utilizzarli, confrontarsi con le loro difficoltà può davvero avvicinarci all'utente e aumentare la nostra sensibilità di designer. ** Di seguito ho elencato le **tecnologie** più popolari, ma ce ne sono molte altre.  ### **Navigazione da tastiera** [*"Everything should work with keyboard only"*](https://medium.com/@elisa.viglianese/all-you-need-to-know-about-keyboard-navigation-accessibility-testing-f31bc0e54412): tutto dovrebbe funzionare solo con la tastiera, perché a quel punto anche le persone che possono navigare il sito solo attraverso di essa – tramite vari strumenti di tecnologia assistiva, come lo screen reader o il software di riconoscimento vocale – non avranno impedimenti. Non essere in grado di gestire un sito Web solo con una tastiera è uno dei maggiori problemi di accessibilità del Web al giorno d'oggi. ### **Zoom** **Alcuni utenti ipovedenti utilizzano uno zoom dello schermo del 200%**: infatti, per alcune persone ingrandire i caratteri dello schermo non è sufficiente, richiedono un ingrandimento maggiore e maggiori opzioni. I browser offrono l'ingrandimento dello schermo per impostazione predefinita e c'è un collegamento software dedicato ZoomText con impostazioni e opzioni più sofisticate. https://www.youtube.com/watch?v=EEN79RRvKqE [Zoom Text Demo](https://www.youtube.com/watch?v=EEN79RRvKqE) ### **Display setting** Particolarmente utile per le persone anziane, ipovedenti o daltoniche, è il display setting, che permette di **migliorare colori e contrasti del dispositivo**. Microsoft Windows ha la cosiddetta modalità Contrasto elevato, mentre Mac OS X ha le impostazioni di visualizzazione in Accessibilità nelle Preferenze di Sistema. https://www.youtube.com/watch?v=MU1fDBSps5g [Impostazioni di visualizzazione Demo — Windows](https://www.youtube.com/watch?v=MU1fDBSps5g) https://www.youtube.com/watch?v=zIHC68aa5i4 [Demo impostazione display — Mac](https://www.youtube.com/watch?v=zIHC68aa5i4) ### **Screen reader** Gli utenti non vedenti possono utilizzare uno screen reader per **ascoltare il testo e per navigare e utilizzare un sito web**. Gli screen reader sono software che possono essere facilmente installati sui dispositivi, e vengono forniti gratuitamente con i vari sistemi operativi, come VoiceOver per Mac. Un buono screen reader non solo legge il testo sullo schermo, ma permette anche la navigazione. ### **Braille display** Solitamente abbinato a uno screen reader. Non tutte le persone non vedenti o ipovedenti sanno leggere il braille, quindi non tutti usano una regola braille. Tuttavia, le persone sorde e cieche non possono sentire lo screen reader e dipendono quindi da questo dispositivo. ### **Software di riconoscimento vocale** Il controllo vocale è una caratteristica sempre più integrata nella nostra vita quotidiana. Dispositivi come Siri di Apple e Alexa di Amazon sono ormai nomi familiari. È possibile navigare un sito usando solo la voce? SÌ. Ci sono diverse opzioni per questo. La soluzione a pagamento più utilizzata è Dragon [NaturallySpeaking](https://www.nuance.com/it-it/index.html) per Windows. ![](https://blog.talentgarden.com/hubfs/blog-images/Screenshot-2023-03-15-at-16.47.01.png) ## **Consigli di UI per un design accessibile** ** Ecco alcuni consigli da tenere a mente durante il tuo progetto di UI Design: - Fornisci un contrasto cromatico sufficiente tra il testo e lo sfondo - Non attribuire significato al colore - Quando utilizzi l'audio, fornisci anche testo, sottotitoli video e trascrizione audio - Non aggiungere musica alla parola parlata, questo rende il testo molto più difficile da capire - Assicurati che tutto funzioni solo con la tastiera - Rendi i bersagli grandi, in modo che siano facilmente selezionabili - Fornisci una struttura di navigazione coerente - Evita di includere animazioni o video in loop che non possono essere fermati ************ ****** ****** Articolo aggiornato il: **17 agosto 2023** ![Talent Garden](https://blog.talentgarden.com/hubfs/logo-tag-blog.png) Scritto da Talent Garden, Digital Skills Academy ****** **** **** **** ### Subscribe to our newsletter Subscribe to the newsletter to stay up-to-date on the latest digital industry news and trends ### Continua a leggere ![](https://blog.talentgarden.com/hubfs/image_processing20221128-4-kg49a5.jpg) 4 min di lettura ### Design inclusivo: cos’è e perché è sempre più importante Secondo una recente ricerca, condotta dall’Istituto delle cose ovvie, pare che non basti inserire qualche arcobaleno o ... Talent Garden 15/03/2024 ![Cos'è l'EAA?](https://blog.talentgarden.com/hubfs/Navigare%20l%E2%80%99European%20Accessibility%20Act.jpg) 5 min di lettura ### Navigare l’European Accessibility Act: una Guida Semplice per le Aziende Lavori nell'Unione Europea? Allora è il momento di prepararti a un cambiamento importante in arrivo. L'European ... Talent Garden 30/05/2024 ![](https://blog.talentgarden.com/hubfs/blog-images/aryel-tag-e1606995709570.jpg) 4 min di lettura ### L’incontro vincente tra Realtà Aumentata e Marketing: la storia di Aryel Democratica, accessibile a tutti e nata da un’esigenza concreta: utilizzare la Realtà Aumentata per rendere più ... Talent Garden 03/12/2020 ![](https://blog.talentgarden.com/hubfs/blog-images/shiroi-scaled.jpg) 3 min di lettura ### Top 5 trend siti web 2023: UX e UI design, struttura e accessibilità Inizia un nuovo anno, e non poteva mancare la previsione che tutti i designer stavano aspettando. Quali sono i trend ... Talent Garden 23/12/2022 ![Marketing-Banner-IMG](https://24164004.fs1.hubspotusercontent-na1.net/hub/24164004/hubfs/Marketing-Banner-IMG.png?width=1925&height=1287&name=Marketing-Banner-IMG.png) ## Non sprecare il tuo talento. Valorizzalo con il Master più adatto alle tue esigenze. Talent Garden è la Digital Skills Academy che ti forma su HR, Digital Marketing, UX Design o Data Analysis, e poi lancia la tua carriera. [ Scopri i Master ](https://talentgarden.org/it/innovation-school/) **** **** **** **** **** **** **** **** **** ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Talent Garden", "url" : "https://blog.talentgarden.com/it/blog/author/talent-garden" }, "dateModified" : "2023-08-17T13:28:18.849Z", "datePublished" : "2023-03-15T14:52:09.000Z", "headline" : "Web accessibility: tecnologia assistiva e consigli di UI", "image" : [ "/hubfs/blog-images/accessibility-testing-websites-design.png" ], "mainEntityOfPage" : { "@id" : "https://blog.talentgarden.com/it/blog/design/web-accessibility-tecnologia-assistiva-consigli-ui", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.talentgarden.com/hubfs/cmyk_Talent_Garden-Mar-07-2022-09-15-47-73-AM.png" }, "name" : "Talent Garden S.p.A." } } ```