{"id":870,"date":"2019-02-20T17:35:35","date_gmt":"2019-02-20T16:35:35","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/dipingi-il-quadro-non-la-cornice\/"},"modified":"2019-02-20T17:35:35","modified_gmt":"2019-02-20T16:35:35","slug":"dipingi-il-quadro-non-la-cornice","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/dipingi-il-quadro-non-la-cornice\/","title":{"rendered":"Dipingi il quadro, non la cornice: come i browser forniscono tutti ci\u00f2 di cui ha bisogno l&#8217;utente"},"content":{"rendered":"<div class=\"paragrafo\">\n<p>Kip Williams, professore di psicologia alla Purdue University, ha condotto <a href=\"https:\/\/en.m.wikipedia.org\/wiki\/Social_rejection#Ball_toss_\/_cyberball_experiments\"> un esperimento affascinante<\/a> chiamato &#8220;cyberball&#8221;. Nel suo esperimento, un soggetto di prova e altri due partecipanti hanno giocato a un videogioco il cui scopo \u00e8 di prendere al volo una palla. In un momento prestabilito, il soggetto del test \u00e8 stato escluso dal gioco, costringendolo a poter solo osservare lo scorrere del timer.<\/p>\n<div id=\"figure1\" class=\"image full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2019\/02\/cyberball.jpg\" border=\"0\" alt=\"Dal gioco del cyberball, tre figure delineate che giocano a prendere la palla al volo. Il Player 1 \u00e8 a met\u00e0 campo dal Player 3.\" width=\"100%\" \/><\/div>\n<p>L&#8217;esperienza ha mostrato un aumento dei livelli auto-riferiti di rabbia e tristezza, cos\u00ec come l&#8217;abbassamento dei livelli <a href=\"https:\/\/the-mouse-trap.com\/2017\/09\/09\/the-four-needs-for-meaning\/\">dei quattro bisogni necessari per sentire di avere significato<\/a>. La versione digitale dell&#8217;esperimento ha creato risultati che corrispondevano ai risultati di <a href=\"https:\/\/psycnet.apa.org\/record\/1999-10159-002\">quello fisico originale<\/a>, il che significa che questi sentimenti si sono verificati indipendentemente dal contesto.<\/p>\n<p>Dopo la conclusione del gioco, al soggetto del test \u00e8 stato detto che gli altri partecipanti erano robot, non altri umani. \u00c8 interessante notare che la rivelazione di concorrenti automatizzati non ha diminuito i sentimenti negativi segnalati. Anzi, ha <em>fatto aumentare<\/em> i sentimenti di rabbia, diminuendo anche il senso di forza di volont\u00e0 e\/o di autoregolazione dei partecipanti.<\/p>\n<p>In altre parole: le persone che si sentono rifiutate da un sistema digitale si sentiranno ferite e avranno il loro senso di autonomia ridotto, anche quando credono che non ci sia un altro umano direttamente responsabile.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section1\">Ma cosa c&#8217;entra tutto questo con i browser?<\/h2>\n<p>Ogni adeguamento all&#8217;aspetto e al comportamento delle funzionalit\u00e0 che i browser consentono di manipolare \u00e8 un lancio di dadi, la scommessa sulla gioia di alcuni a scapito dell&#8217;alienazione di altri.<\/p>\n<p>Quando si usa un browser per navigare sul Web, c&#8217;\u00e8 <a href=\"https:\/\/louderthanten.com\/coax\/design-machines\">un sacco di monotonia<\/a>, fino a quando non ce n&#8217;\u00e8. La maggior parte delle volte passiamo da pagina a pagina e da sito a sito, facendo click su collegamenti, premendo pulsanti, guardando video, compilando form, scrivendo messaggi, etc. Ma ogni tanto ci imbattiamo in qualcosa di nuovo e innovativo che ci fa fermare per capire cosa sta succedendo.<\/p>\n<p>Ogni sito e ogni web app \u00e8 un&#8217;esperienza autonoma a s\u00e9 stante, con le proprie idee su come le cose dovrebbero apparire e comportarsi. Alcune sono pi\u00f9 simili alle altre, ma ciascuna richiede di imparare a gestire in una certa misura l&#8217;interfaccia.<\/p>\n<p>Alcuni browser possono anche alterare parti della loro funzionalit\u00e0 e del loro aspetto, il che significa che, come con i siti Web, possono verificarsi discrepanze impreviste. Sveleremo alcune delle sfumature dietro alcune di queste funzionalit\u00e0 e, cosa ancora pi\u00f9 importante, perch\u00e9 \u00e8 meglio lasciar perdere la maggior parte di esse.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section2\">Scroll-to-top<\/h2>\n<p>Tutti i principali browser desktop vi consentono di premere il tasto <kbd>Home<\/kbd> sulla tastiera per saltare all&#8217;inizio della pagina. Alcune implementazioni della barra di scorrimento consentono di fare click sulla parte superiore dell&#8217;area della barra di scorrimento per fare la stessa cosa. Alcuni browser vi permettono di digitare anche <kbd>Command+Up<\/kbd> (macOS) \/ <kbd>Ctrl+Up<\/kbd> (Windows). Le persone che utilizzano tecnologie assistive quali gli screen reader possono utilizzare cose come i <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/landmarks\/\">banner landmarks<\/a> per navigare nello stesso modo (a condizione che siano dichiarati correttamente nel HTML del sito).<\/p>\n<p>Tuttavia, non tutti i dispositivi hanno un modo facilmente individuabile per richiamare questa funzionalit\u00e0: molti laptop non hanno un tasto <kbd>Home<\/kbd> sulla propria tastiera. La funzionalit\u00e0 <a href=\"https:\/\/9to5mac.com\/2018\/03\/02\/how-to-jump-top-of-webpages-twitter-facebook-iphone\/\">tap-the-clock-to-jump-to-the-top<\/a> su iOS \u00e8 difficile da scoprire e pu\u00f2 essere sorprendente e frustrante se attivata accidentalmente. Occorrono delle <a href=\"https:\/\/matatk.agrip.org.uk\/landmarks\/\">estensioni specializzate per il browser<\/a> per ricreare le tecniche di navigazione dei punti di riferimento (landmark navigation) dello screen reader.<\/p>\n<p>Una soluzione di interfaccia utente comunemente implementata per pagine pi\u00f9 lunghe \u00e8 il pulsante scroll-to-top. \u00c8 spesso fissato nell&#8217;angolo in basso a destra dello schermo. L&#8217;attivazione di questo controllo porta l&#8217;utente in cima alla pagina, indipendentemente da quanto \u00e8 arrivato in basso.<\/p>\n<p>Se il vostro sito presenta una grande quantit\u00e0 di contenuti per pagina, potrebbe valere la pena prendere in considerazione questo pattern di UI. Provate a guardare le statistiche e\/o a condurre degli user test per vedere dove e quanto spesso viene utilizzata questa feature. L&#8217;avvertenza \u00e8 che se \u00e8 usata troppo spesso, potrebbe essere il caso di esaminare seriamente l&#8217;architettura dell&#8217;informazione e la content strategy.<\/p>\n<p>Tre cose che mi piacciono del pattern scroll-to-top sono:<\/p>\n<ul>\n<li>la sua funzionalit\u00e0 \u00e8 piuttosto ovvia (specialmente se etichettata a dovere).<\/li>\n<li>Posto che sia progettato bene, pu\u00f2 fornire un target touch di dimensione decente in <a href=\"https:\/\/usabilla.com\/blog\/designing-thumbs-thumb-zone\/\">un&#8217;area facile da raggiungere col pollice<\/a>. Per le <a href=\"https:\/\/webaim.org\/articles\/motor\/motordisabilities\">considerazioni sulle disabilit\u00e0 motorie<\/a>, il suo target touch pu\u00f2 essere pi\u00f9 grande delle strette barre di scorrimento o di stato, che possono costituire dei target cos\u00ec piccoli da essere frustranti da toccare.<\/li>\n<li>Non altera n\u00e9 rimuove il comportamento di scroll esistente, al contrario, lo aumenta. Se qualcuno \u00e8 abituato a un modo di fare lo scroll verso l&#8217;alto, non lo state sovrascrivendo o interrompendo.<\/li>\n<\/ul>\n<p>Se state implementando questo tipo di funzionalit\u00e0, ho quattro richieste che aiutano a far s\u00ec che l&#8217;esperienza funzioni per tutti (trovo la libreria <a href=\"https:\/\/github.com\/cferdinandi\/smooth-scroll\">Smooth Scroll<\/a> un punto di partenza utile):<\/p>\n<ul>\n<li>Onorate le richieste di <a href=\"https:\/\/css-tricks.com\/introduction-reduced-motion-media-query\/\">movimento ridotto<\/a> da parte degli utenti. Il drammatico effetto di scroll a frustata dal basso della pagina verso l&#8217;alto potrebbe <a href=\"http:\/\/reverttosaved.com\/2018\/10\/16\/trying-to-explain-reduce-motion-to-designers-who-dont-have-a-vestibular-disorder\/\">innescare una reazione vestibolare<\/a>, una situazione in cui il sistema che controlla il senso della posizione fisica e l&#8217;orientamento del vostro corpo nel mondo viene interrotta, causando cose come mal di testa, nausea, vertigini, emicrania e perdita di udito.<\/li>\n<li>Assicuratevi che il focus della tastiera venga spostato in cima al documento, rispecchiando quello che avviene visivamente. Applicare questa regola migliorer\u00e0 l&#8217;esperienza di <em>tutti<\/em> gli utenti. Altrimenti, premere <kbd>Tab<\/kbd> dopo essere tornati in cima rimander\u00e0 l&#8217;utente gi\u00f9 al primo elemento interattivo che segue il punto in cui era il focus prima di attivare il pulsante di scroll.<\/li>\n<li>Assicuratevi che il pulsante non renda dell&#8217;altro contenuto inutilizzabile oscurandolo. Assicuratevi di tenere conto di quando il browser \u00e8 in uno stato \u201czoomed in\u201d, non solo nel suo stato di default.<\/li>\n<li>Siate consci di altri elementi con posizione fissa. Ho visto un certo numero di siti web che hanno anche un chatbot o un <a href=\"https:\/\/material.io\/design\/components\/buttons-floating-action-button.html\">floating action button<\/a> che competono per lo stesso spazio.<\/li>\n<\/ul>\n<div id=\"figure2\" class=\"image full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2019\/02\/floating-button.jpg\" border=\"0\" alt=\"Un'icona rossa di chat si sovrappone su un angolo all'icona scroll to top, oscurando una porzione della freccia.\" \/><\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section3\">Scrollbar<\/h2>\n<p>Se siete sufficientemente anziani per ricordarvelo, una volta era considerato alla moda assegnare uno stile alle scrollbar del vostro sito web. Internet Explorer permetteva questa personalizzazione attraverso <a href=\"https:\/\/www.hongkiat.com\/blog\/css-scroll-bar\/\">una serie di propriet\u00e0 vendor specific<\/a>. Nel migliore dei casi, apparivano ottime! Se il designer e il developer erano entrambe talentuosi e orientati al dettaglio, si poteva ottenere l&#8217;effetto di un&#8217;estensione naturale del resto del sito web.<\/p>\n<p>Tuttavia, la posta in gioco di un design di qualit\u00e0 \u00e8 piuttosto alta: le scrollbar fanno parte dell&#8217;interfaccia di un&#8217;applicazione, non di un sito web. Nell&#8217;inclusive design, fa parte di quella che chiamiamo <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2017\/08\/inclusive-design-principle-be-consistent\/#culturalconsistency\"><em>consistenza esterna<\/em><\/a>. La consistenza esterna \u00e8 l&#8217;idea che la funzionalit\u00e0 di un oggetto sia informata e rafforzata da implementazioni simili che si trovano altrove. \u00c8 il motivo per cui potete premere l&#8217;interruttore sul muro di quasi tutte le case ed essere sicuri che si accenderanno le luci piuttosto che si attivi lo scarico della toilet.<\/p>\n<p>Sebbene le scrollbar abbiano delle piccole differenze visuali tra i sistemi operativi (e <a href=\"https:\/\/imgur.com\/a\/q7nojaU\">tra le versioni di uno stesso sistema operativo<\/a>), la loro funzione \u00e8 esternamente consistente. Le scrollbar sono inoltre consistenti internamente, poich\u00e9 ogni finestra e programma nel OS che richieda uno scrolling tratta le scrollbar in modo identico.<\/p>\n<p>Se personalizzate i colori della scrollbar del vostro sito, per le persone meno istruite in materia tecnologia, avete cambiato un ulteriore aspetto dell&#8217;interfaccia senza avviso o istruzione per tornare all&#8217;originale. Se l&#8217;utente \u00e8 gi\u00e0 confuso su come funzionino le cose sullo schermo, ecco una cosa familiare in meno a cui aggrapparsi per stabilit\u00e0 e affidabilit\u00e0.<\/p>\n<p>Magari starete alzando gli occhi al cielo leggendo questo, ma vi chiederei invece di dare un&#8217;occhiata a <a href=\"https:\/\/jboriss.wordpress.com\/2011\/07\/06\/user-testing-in-the-wild-joes-first-computer-encounter\/\">questo incredibile articolo di Jennifer Morrow<\/a>. In esso, descrive la conduzione di un guerilla user test in un centro commerciale, quando la sessione \u00e8 stata completamente deragliata dalla scoperta di qualcuno che non aveva mai usato un computer prima di allora.<\/p>\n<p>Quello che scopre \u00e8 tanto importante quanto scioccante: la sostanza \u00e8 che alcune persone (anche chi ha usato un computer in precedenza) non comprendono le sfumature dei vari \u201clivelli\u201d in cui si naviga per far funzionare un computer: l&#8217;hardware, l&#8217;OS, il browser installato nell&#8217;OS, il sito web che il browser sta mostrando, le modali e i disclosure statement del sito, etc. Per loro, l&#8217;esperienza \u00e8 piatta.<\/p>\n<p>Non dovremmo aspettarci che questi utenti giochino con questo tipo di overhead cognitivo. Questi tipi di astrazioni sono create per essere degli <a href=\"https:\/\/uxplanet.org\/radio-buttons-ux-design-588e5c0a50dc#6500\">analoghi degli oggetti del mondo reale<\/a>, in modo specifico cos\u00ec che le persone possano ottenere ci\u00f2 che vogliono da un sistema digitale senza dover essere programmatori. Aggiungere complessit\u00e0 non necessaria indebolisce queste metafore e d\u00e0 agli utenti un punto di riferimento in meno su cui fare affidamento.<\/p>\n<p>Ricordatevi l&#8217;esperimento cyberball: quando un utente \u00e8 gi\u00e0 in uno stato emotivo stressato, la nostra scrollbar personalizzata mal progettata potrebbe essere la goccia che fa traboccare il vaso, ovvero la persona potrebbe rinunciare a cercare di ottenere quello che vuole e rifiutare l&#8217;intero sistema.<\/p>\n<p>Nonostante l&#8217;articolo di Morrow sia stato scritto nel 2011, \u00e8 tuttora rilevante. Sempre pi\u00f9 persone usano internet globalmente e vengono digitalizzati sempre pi\u00f9 servizi fondamentali per il vivere quotidiano. Sta a noi in qualit\u00e0 di designer e sviluppatori responsabili assicurarci che tutti si sentano i benvenuti, indipendentemente dal device, dalle circostanze o dalla capacit\u00e0.<\/p>\n<p>Oltre ad abbandonare inutilmente la consistenza esterna, c&#8217;\u00e8 un&#8217;altra questione dell&#8217;assegnare uno stile personalizzato alle scrollbar, ossia quello che potenzialmente non abbiano <a href=\"https:\/\/a11yproject.com\/posts\/what-is-color-contrast\/\">sufficiente contrasto nel colore<\/a>. I colori troppo tenui possono creare una situazione in cui una persona con problemi di vista non sia in grado di percepire, e pertanto far funzionare, il meccanismo di scroll di un sito web.<\/p>\n<p>Questo articolo non cercher\u00e0 nemmeno di tirare fuori le questioni implicate nelle implementazioni personalizzate di scrollbar, in cui invece di assegnare un tema con CSS alle scrollbar native dell&#8217;OS, le si sostituiscono invece con una soluzione JavaScript. Fidatevi di me quando dico che devo ancora vederne una implementata in maniera tale che possa ricreare con successo e affidabilit\u00e0 tutte le feature e funzionalit\u00e0 attraverso tutti i <a href=\"https:\/\/manuals.playstation.net\/document\/en\/ps4\/browser\/browse.html\">device<\/a>, OS, browser e <a href=\"https:\/\/medium.com\/@mandy.michael\/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9\">browsing mode<\/a>.<\/p>\n<p>La mia opinione? Non alterate l&#8217;aspetto di default delle scrollbar di un OS. Usate quel tempo per lavorare su qualcosa d&#8217;altro, come per esempio controllare e sistemare tutti i problemi di contrasto dei colori.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section4\">Scrolling<\/h2>\n<p>La preoccupazione principale dell&#8217;alterare il comportamento di scrolling \u00e8 di consenso: si prende un comportamento esternamente consistente e presente nel sistema e improvvisamente lo si altera senza permesso. Per descrivere questa pratica \u00e8 stato coniato il termine <em>scrolljacking<\/em>. Non va confuso con <a href=\"https:\/\/pudding.cool\/process\/how-to-implement-scrollytelling\/\"><em>scrollytelling<\/em><\/a>, un trattamento del comportamento di scroll pi\u00f9 considerato che onora le impostazioni si scrolling dell&#8217;OS.<\/p>\n<p>Alterare il comportamento dello scrolling sul vostro sito web o nella vostra web app pu\u00f2 essere in contraddizione con le preferenze specifiche espresse da qualcuno. Per alcune persone, si tratta semplicemente di una seccatura. Potrebbe rendere difficile muoversi all&#8217;interno del sito per le persone con problemi di controllo del movimento. In alcuni casi estremi, la discrepanza annunciata tra la quantit\u00e0 di scrolling e la distanza percorsa potrebbe anche costituire un trigger vestibolare. Un&#8217;altra considerazione da fare \u00e8 se il vostro comportamento di scrolling modificato <a href=\"https:\/\/www.sitepoint.com\/scrolljacking-accessibility\/\">esclude accidentalmente le persone<\/a> che non usano mouse, touch o trackpad per fare scroll.<\/p>\n<p>Tutto sommato, penso che <a href=\"https:\/\/robinrendle.com\/notes\/scrolljacking\/\">Robin Rendle l&#8217;abbia detto al meglio<\/a>:<\/p>\n<div id=\"figure3\" class=\"image full\">\n<blockquote><p>Scrolljacking, come mi riferir\u00f2 ad esso d&#8217;ora in poi, sarcasticamente e onestamente, \u00e8 un fallimento del primo obiettivo del web designer: attacca un pattern standardizzato e assume avidamente il controllo sull&#8217;input dell&#8217;utente.<\/p><\/blockquote>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section5\">Selezionare, evidenziare<\/h2>\n<p>Un&#8217;altra feature del sistema operativo a cui ci \u00e8 permesso di assegnare stili nel browser \u00e8 il testo selezionato. In maniera simile alle scrollbar, si tratta di un elemento di interfaccia condiviso da tutte le app dell&#8217;OS, non solo dal browser.<\/p>\n<p>Rompere la consistenza esterna del colore di selezione dell&#8217;OS ha molti degli stessi problemi delle scrollbar con stili personalizzati, cio\u00e8 l&#8217;alterazione del comportamento atteso di qualcosa che funziona in maniera affidabile altrove. \u00c8 potenzialmente disorientante e alienante e potrebbe negare le preferenze espresse da qualcuno.<\/p>\n<p>Alcune persone evidenziano il testo mentre lo leggono. Se il vostro stile di sottolineatura ha un basso contrasto tra il colore del testo sottolineato e il colore di sfondo del testo sottolineato, la persona che legge sul vostro sito o web app potrebbe non essere in grado di percepire il testo che stanno selezionando. L&#8217;effetto causer\u00e0 l&#8217;apparente sparizione del testo mentre cercano di leggere.<\/p>\n<p>Altre persone potrebbero non curarsi delle vostre sensibilit\u00e0 estetiche. Sia macOS sia Windows vi permettono di specificare un colore di selezione custom. In uno scenario in cui qualcuno ha deliberatamente impostato una preferenza diversa dal default di sistema, un colore di selezione a cui \u00e8 assegnato uno stile potrebbe sovrascrivere le loro specifiche dichiarate.<\/p>\n<p>Per me, i rischi potenziali sorpassano di molto la vanit\u00e0 di uno stile di selezione su misura: meglio lasciarlo cos\u00ec com&#8217;\u00e8.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section6\">Ridimensionare il testo<\/h2>\n<p><a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\">Molte persone cambiano la dimensione del testo<\/a> per adattarlo alle loro esigenze. Ed \u00e8 una cosa buona. Vogliamo che le persone siano in grado di leggere i nostri contenuti ed agirci, indipendentemente dalle loro circostanze.<\/p>\n<p>Per il problema del testo troppo piccolo, alcuni designer si rivolgono alle widget di ridimensionamento del testo, un pattern UI custom che permette a una persona di provare una serie di valori preimpostati di <code>font-size<\/code> del CSS. Si trova comunemente dove ci sono moltissimi contenuti testuali e le widget di ridimensionamento del testo sono spesso accoppiate a design complessi con pi\u00f9 colonne. I siti di notizie ne sono un esempio comune.<\/p>\n<p>Prima di buttarmi nelle mie preoccupazioni riguardanti le widget di ridimensionamento del testo, voglio chiedervi: se trovate che il vostro sito abbia bisogno di una widget specializzata per gestire la dimensione del vostro testo, perch\u00e9 non prendete semplicemente la strada pi\u00f9 facile e <a href=\"https:\/\/cushionapp.com\/journal\/improving-readability\">aumentate la dimensione del testo di base<\/a>?<\/p>\n<p>Come molti <a href=\"https:\/\/thatcrazycrippledchick.blogspot.com\/2013\/12\/this-is-what-disability-binarism-looks.html\">problemi di accessibilit\u00e0<\/a>, una richiesta di dimensioni di font maggiori non \u00e8 necessariamente indicativa di <a href=\"https:\/\/medium.com\/@mosaicofminds\/a-disability-is-a-mismatch-between-a-persons-abilities-and-their-environment-cc39e29e8e74\">una condizione permanente di disabilit\u00e0<\/a>. Spesso \u00e8 circostanziale, come una situazione in cui state mostrando un sito web sul pessimo proiettore del vostro ufficio.<\/p>\n<p>I browser permettono agli utenti di cambiare la loro dimensione del font preferita, ridimensionando il testo di conseguenza nei siti web. I browser eccellono nella gestione di questa impostazione quando scrivete CSS che sfrutti i <a href=\"https:\/\/allthingssmitty.com\/2017\/01\/30\/nope-nope-nope-line-height-is-unitless\/\">valori senza unit\u00e0 di <code>line-height<\/code><\/a> e <a href=\"https:\/\/thecssworkshop.com\/lessons\/relative-units\">le unit\u00e0 relative di <code>font-size<\/code><\/a>.<\/p>\n<p>Alcuni designer potrebbero pensare che garantire questa libert\u00e0 agli utenti riduca in qualche modo il branding pianificato. I bravi designer comprendono che c&#8217;\u00e8 di pi\u00f9 nel branding del semplice aspetto. Si tratta di implementare il design iniziale nel browser e poi di <a href=\"https:\/\/css-tricks.com\/building-resizeable-components-relative-css-units\/\">lavorare <em>con<\/em> le capacit\u00e0 del browser<\/a> per servire al meglio la persona che lo usa. Anche se cose come la dimensione del font vengono aggiustate, un brand solido briller\u00e0 ancora attraverso la facilit\u00e0 di scorrimento dell&#8217;utente, la qualit\u00e0 della tipografia e della palette, la forza del copywriting, etc.<\/p>\n<p>Sfortunatamente, alle widget personalizzate di ridimensionamento del testo del browser manca un approccio universale. Se fate affidamento sulle impostazioni di testo del browser, funziona e basta: in modo consistente, con gli stessi controlli, gesture e scorciatoie da tastiera per ogni pagina in ogni sito, anche in <a href=\"https:\/\/kryogenix.org\/code\/browser\/everyonehasjs.html\">condizioni meno che ideali<\/a>. Non dovete scrivere e mantenere codice extra, testare tramite regression o scrivere copy che istruisca l&#8217;utente su dove trovare la widget di ridimensionamento del testo nel sito e in che modo usarla.<\/p>\n<p>La consistenza nel comportamento \u00e8 incredibilmente importante. Il ridimensionamento del testo del browser \u00e8 applicato a tutti il testo sulla pagina in maniera proporzionata ogni volta che si cambia l&#8217;impostazione. Queste impostazioni vengono inoltre salvate per la vostra visita successiva. Non tutte le widget di ridimensionamento del testo custom lo fanno n\u00e9 ridimensionano tutto il contenuto al <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-scale.html\">punto stabilito dalle Web Content Accessibility Guidelines<\/a>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section7\">Temi ad alto contrasto<\/h2>\n<p>Quando parlo di temi ad alto contrasto, non sto parlando di cose come un <a href=\"https:\/\/paulmillr.com\/posts\/using-dark-mode-in-css\/\">dark mode<\/a>. Sto parlando di una risposta a persone che dicono di aver bisogno di <a href=\"https:\/\/accessibility.blog.gov.uk\/2017\/03\/27\/how-users-change-colours-on-websites\/\">cambiare i colori del vostro sito web o web app<\/a> perch\u00e9 sia per loro pi\u00f9 accessibile visivamente.<\/p>\n<p>In maniera simile ai controlli per ridimensionare il testo, i temi progettati per fornire valori di colore con contrasto\tmaggiore sono sconcertanti: se vi prendete del tempo per farne uno, perch\u00e9 semplicemente non fissare i valori di contrasto insufficienti nel vostro CSS regolare? <a href=\"https:\/\/csswizardry.com\/2016\/10\/pragmatic-practical-progressive-theming-with-custom-properties\/\">Gestire in maniera efficace i temi in CSS<\/a> \u00e8 un affare complicato e che impiega molte risorse, anche in situazioni ideali.<\/p>\n<p>La maggior parte dei temi ad alto contrasto forniti dai siti sono statici perch\u00e9 il designer o il developer ha preso delle decisioni in merito a quali valori di colore usare, che potrebbe essere un problema. Troppo contrasto \u00e8 noto per far scattare cose come le emicranie cos\u00ec come rendere potenzialmente difficile concentrarsi per gli utenti che hanno alcune forme di ADHD (attention-deficit hyperactivity disorder).<\/p>\n<p>Il dilemma del contrasto ci porta a una cosa difficile da accettare in materia di accessibilit\u00e0: quello che funziona per una persona potrebbe in realt\u00e0 bloccarne un&#8217;altra. Perci\u00f2, \u00e8 importante rendere le cose aperte e interoperabili. Lasciate il controllo ultimo all&#8217;utente finale cos\u00ec che possa decidere come interagire al meglio con il contenuto.<\/p>\n<p>Se comunque decidete di fornire questo tipo di feature, ecco un consiglio: <a href=\"https:\/\/support.microsoft.com\/en-us\/help\/13862\/windows-use-high-contrast-mode\">modellatelo sulla modalit\u00e0 High Contrast di Windows<\/a>. \u00c8 una feature specializzata di Windows che permette a una persona di forzare una palette ad alto contrasto in tutti gli aspetti delle UI dell&#8217;OS, inclusa qualsiasi cosa il browser mostri. Offre quattro temi pronti all&#8217;uso ma permette anche all&#8217;utente di soddisfare i propri bisogni specificando i propri colori.<\/p>\n<p>La vostra feature \u201chigh contrast mode\u201d dovrebbe fare lo stesso. Offrire un range di temi con diverse palette e lasciare che l&#8217;utente scelga i colori che funzionano meglio per lui: garantir\u00e0 che se quello che offrite non va bene, le persone potranno ancora fare una selezione da sole.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section8\">Spostare il focus<\/h2>\n<p>Il keyboard focus \u00e8 il modo in cui le persone che fanno affidamento su input quali tastiere, switch contro, voice input, eye tracking e <a href=\"https:\/\/webaim.org\/articles\/motor\/assistive\">altre forme di tecnologie assistive<\/a> possano navigare e interagire con le interfacce digitali. Anche se potete fare cose come usare <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input#autofocus\">l&#8217;attributo <code>autofocus<\/code><\/a> per spostare il keyboard focus al primo input su una pagina dopo che si \u00e8 caricata, non \u00e8 raccomandato.<\/p>\n<p>Per le persone con problemi di vista o non vedenti, \u00e8 equivalente a venire spostati in un nuovo posto all&#8217;improvviso e istantaneamente. \u00c8 un&#8217;esperienza che confonde e disorienta: c&#8217;\u00e8 un motivo per cui c&#8217;\u00e8 un tema ricorrente nei film sci-fi di gente che vomita dopo essere stata teletrasportata per la prima volta.<\/p>\n<p>Per le persone con problemi motori, spostare il focus senza il loro permesso significa che potrebbero venir trasportati in un punto in cui non intendevano andare. Tirarsi fuori da quel posto diventa fastidioso nel migliore dei casi e super faticoso nel peggiore. I siti web senza gli <a href=\"https:\/\/webdesign.tutsplus.com\/articles\/the-importance-of-heading-levels-for-assistive-technology--cms-31753\">elementi heading<\/a> o i document landmark che fungono da aiuti alla navigazione possono peggiorare questo effetto.<\/p>\n<p>Sta tutto nel consenso. Spostare il focus va bene finch\u00e9 una persona inizia deliberatamente un&#8217;azione che lo richiede (per esempio, <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2018\/06\/the-current-state-of-modal-dialog-accessibility\/\">spostare il focus ad una modale aperta<\/a>). Non vengo a casa vostra a obbligarvi a cliccare sulle cose, quindi non spostate il focus della mia tastiera a meno che non ve lo chieda io esplicitamente).<\/p>\n<p>Lasciate che sia il browser a gestire il keyboard focus. I browser lo faranno bene, ammesso che usiate markup semantico. Alcuni consigli:<\/p>\n<ul>\n<li>Usate <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2014\/08\/using-the-tabindex-attribute\/\">l&#8217;attributo <code>tabindex<\/code><\/a> con cura e discrezione.<\/li>\n<li>Non dichiarate <code>tabindex<\/code> su elementi interattivi (<code>a<\/code>, <code>button<\/code>, <code>input<\/code>, <code>select<\/code>, <code>summary<\/code> e <code>textarea<\/code>).<\/li>\n<li>Non usate <a href=\"http:\/\/www.karlgroves.com\/2018\/11\/13\/why-using-tabindex-values-greater-than-0-is-bad\/\">un ordine di  <code>tabindex<\/code> curato a mano<\/a> che vada in parallelo a quello che vi aspettate che clicchi un utente. Al contrario, create il vostro HTML in maniera tale che il DOM risultante <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/C27.html\">appaia come l&#8217;ordine visivo della pagina<\/a>. In questo caso, aiuta molto adottare un <a href=\"https:\/\/www.levelaccess.com\/what-does-responsive-web-design-have-to-do-with-accessibility\/\">approccio responsive e mobile first<\/a>.<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section9\">La clipboard e la cronologia del browser<\/h2>\n<p>La clipboard \u00e8 uno spazio sacro. Non impedite alla gente di copiarvi delle cose e non appendete contenuti extra a quello che copiano. Lo stesso vale per la cronologia del browser e per i pulsanti avanti e indietro. Non armeggiate con i viaggi nel tempo e lasciate che browser faccia il suo lavoro.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section10\">Concludendo<\/h2>\n<p>Nella parte di gioco del cyberball, il divertimento deriva dall&#8217;essere in grado di partecipare con gli altri, passandosi la palla avanti e indietro. Con il web, il divertimento deriva dall&#8217;essere in grado di navigarvi. In entrambe le situazioni, il divertimento si ferma quando le persone vengono escluse, costrette a guardare passivamente da bordo campo.<\/p>\n<p>Fortunatamente, il web non deve essere un lungo esperimento di cyberball. Sebbene alterando le potenti funzionalit\u00e0 assistive technology-friendly dei browser \u00e8 possibile migliorare l&#8217;esperienza per alcuni utenti, questa operazione comporta un grande rischio di alienazione di altri se vengono apportate modifiche ignorando esattamente quante cose ne saranno influenzate.<\/p>\n<p>Ricordate che tutto questo \u00e8 al servizio di ci\u00f2 che alla fine conta veramente: creare esperienze robuste che permettono alle persone di usare con successo il vostro sito o la vostra web app indipendentemente dalle loro abilit\u00e0 o dalle circostanze. A volte, la miglior strategia \u00e8 lasciare le cose come sono.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I designer vogliono creare delle esperienze completamente aderenti al brand, il che spesso risulta in colori di selzione personalizzati o tipografia \u201cpixel perfect\u201d. Sebbene questi tocchi di design possano migliorare l&#8217;esperienza per qualcuno, possono per\u00f2 renderla inaccessibile ad altri. Il designer Eric Bailey spiega come lasciare le funzionalit\u00e0 chiave di accessibilit\u00e0 al browser per garantire l&#8217;esperienza pi\u00f9 accessibile possibile.<\/p>\n","protected":false},"author":818,"featured_media":7000856,"comment_status":"open","ping_status":"open","template":"","categories":[245,241,86],"tags":[],"coauthors":[537],"class_list":["post-870","article","type-article","status-publish","has-post-thumbnail","hentry","category-accessibilita","category-numero-293-12-febbraio-2019","category-user-experience"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000856"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=870"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}