UNO ACADEMY

2024-08-05 05:47:45

Guida all'AltText su Mastodon

L’AltText, letteralmente “testo alternativo” e descrittivo dell’immagine, fu concepito e introdotto da Louis Braille, all’interno del suo Codice per non vedenti e ipovedenti, ideato nella prima metà del XIX secolo. Il W3C cominciò da subito a implementarlo fin dalla prima specifica HTML pubblicata nel 1993. Nel corso degli anni l’AltText è stato spesso ignorato e spesso abusato (in ottica SEO).

In questo articolo ci occupiamo solo degli aspetti pratici che devono interessare gli utenti, in particolare su Mastodon.

Perché “in particolare su Mastodon”? Perché ogni piattaforma è creata con una sua “anima”, un suo senso, un suo scopo, che poi evolvono nel tempo; ma occorre tenere presente la natura della piattaforma per non snaturarla con un utilizzo inconsapevole.

Mastodon nasce come piattaforma sociale testuale di microblogging, ovvero è nato come piattaforma orientata ai contenuti testuali brevi.

Non significa ovviamente che non si possono utilizzare immagini o video (lo stesso creatore di Mastodon, appassionato di fotografia, pubblica foto); significa che devono essere utilizzati con maggior attenzione, cura e responsabilità (immagini e video hanno un impatto decisamente maggiore nella gestione delle istanze).

Prima di porsi il problema di come scrivere AltText efficaci, ci si deve chiedere se l’immagine (o video) che stiamo inserendo nel post sia effettivamente necessaria.

Dopo aver stabilito che un’immagine (o video) è effettivamente necessaria, ci sono poche e semplici linee guida a cui attenersi per scrivere AltText efficaci.

1 – Sintetici e contestuali, ma descrittivi.

Una o due frasi, che non solo descrivano l’immagine ma che eventualmente la contestualizzino al post, sono già sufficienti. Se poi si vuole abbondare di dettagli, tanto meglio (le moderne tecnologie assistive non hanno più i limiti delle generazioni precedenti: Mastodon offre fino a 1500 caratteri). Concludere sempre la frase con un punto.

2 – Cosa evitare.

“Immagine di…”, “Foto di…”, “Video di…”. È già lo screen reader a segnalare che è un'immagine o un video.

Assolutamente da evitare il copia/incolla del testo già utilizzato nel post: gli screen reader, anzichè leggere la descrizione effettiva dell'immagine, rileggerebbero il post.

3 – Esempi pratici.

Prima di vedere come inserire l'AltText tramite interfaccia web e app ufficiali Mastodon, sottolineiamo ancora che l'AltText deve descrivere ciò che effettivamente c'è nell'immagine/video, fornendo eventualmente un contesto.

Alcuni esempi.

Se inserisco l'immagine dell'Uomo Vitruviano di Leonardo da Vinci, un buon AltText potrebbe essere:

L'Uomo Vitruviano di Leonardo da Vinci, realizzato intorno al 1490, è un disegno iconico che rappresenta un uomo nudo inscritto in un cerchio e in un quadrato, simboleggiando l'armonia tra il corpo umano e la geometria. Il disegno, eseguito con penna e inchiostro su carta, misura 34,4 x 24,5 cm ed è conservato alle Gallerie dell'Accademia di Venezia. Le proporzioni dell'uomo sono basate sui canoni di Vitruvio, evidenziando la centralità dell'uomo come misura di tutte le cose. Il volto dell'uomo, con un'espressione concentrata, e le sue braccia e gambe disposte in posizioni sovrapposte, riflettono un rigoroso studio delle proporzioni umane e un profondo legame tra arte e scienza.

Se inserisco la copertina di The Dark Side of the Moon dei Pink Floyd, un buon AltText potrebbe essere:

La copertina di The Dark Side of the Moon dei Pink Floyd presenta un prisma triangolare su uno sfondo nero. La luce bianca entra da sinistra e si scompone in un fascio di colori che esce a destra, rappresentando i colori dell'arcobaleno. Questo design, creato dallo studio Hipgnosis, simboleggia la trasformazione della vita e delle idee, riflettendo il concetto di come l'individuo (il prisma) elabora e restituisce la luce (la vita) in forme diverse. La copertina è diventata un'icona visiva della band e della musica rock in generale.

Se inserisco la copertina del romanzo Musashi di Eiji Yoshikawa, un buon AltText potrebbe essere:

La copertina del libro Musashi di Eiji Yoshikawa presenta un'immagine suggestiva che evoca il tema del samurai e della ricerca del perfezionamento personale. Al centro, si può vedere un guerriero con una katana, che rappresenta Miyamoto Musashi, in una posa che trasmette determinazione e forza. Lo sfondo è caratterizzato da elementi naturali, come montagne e nuvole, che simboleggiano il viaggio interiore e le sfide che affronta. La palette di colori è calda e terrosa, richiamando l'ambientazione storica del Giappone del XVII secolo. Il titolo del libro è in caratteri chiari e prominenti, enfatizzando l'importanza della figura di Musashi nella cultura giapponese. Questa copertina comunica visivamente l'epicità e la profondità del racconto, invitando il lettore a immergersi nella vita di uno dei più leggendari samurai.

Se inserisco una foto paesaggistica, un buon AltText potrebbe essere:

Il Lago di Como mostra un paesaggio sereno e pittoresco, con acque calme che riflettono le montagne circostanti. In primo piano, si possono vedere piccole barche a vela e pedalò che galleggiano dolcemente sul lago, mentre sullo sfondo si ergono le imponenti Alpi, parzialmente coperte da una leggera nebbia. La vegetazione lussureggiante lungo le rive del lago aggiunge un tocco di verde vibrante, mentre il cielo azzurro e luminoso contribuisce a creare un'atmosfera di tranquillità e bellezza naturale.

Gli AltText possono essere ovviamente molto più sintetici, ma non si possono ridurre a “copertina del disco/libro/film”, “titolo dell'opera d'arte” o “Lago di Como”. 😁

Se si inseriscono vignette o meme, oltre a riportare il testo si deve anche descrivere la scena.

Gli AltText devono sempre fornire una descrizione, anche sommaria, del contenuto effettivo dell'immagine/video.

Per degli ottimi esempi di AltText efficaci, la University of South Carolina offre un’ampia casistica, oltre a indicazioni molto dettagliate per chi vuole approfondire.

Per chi invece vuole approfondire gli standard W3C in merito al AltText, può fare riferimento ai relativi tutorial.

Come inserire l'AltText su Mastodon.

Ci riferiamo solo a interfaccia web e app ufficiali per dare un riferimento omogeneo a tutti. Dopo aver compreso i pochi passaggi, sarà più intuitivo replicare anche sulle innumerevoli interfacce e app di terze parti. In generale è sufficiente prestare attenzione all'interfaccia/app utilizzata subito dopo aver inserito l'immagine/video: c'è sempre un'icona o una voce di menu relativa all'inserimento/modifica dell'AltText.

Al momento Mastodon consente di inserite fino a 4 immagini (e quindi 4 AltText) per post e un solo video per post. La dimensione massima per ogni immagine è di 16MB. La dimensione massima per un file video (o file audio) è di 99 MB.

Attenzione alla dimensione dei file inseriti: è sempre buona prassi cercare di comprimere le dimensioni per non impattare eccessivamente sui costi di gestione delle istanze. Nel caso si avessero immagini o video di diversi MB, esistono vari servizi freemium per comprimere al volo le dimensioni; uno dei più efficienti e semplici da utilizzare è XConvert.

Tramite interfaccia web ufficiale Mastodon (sia desktop che mobile).

1) Cliccare sull'icona graffetta (Aggiungi un file immagine, video o audio) per selezionare e inserire l'immagine. 2) cliccare su “modifica” per accedere alla schermata di inserimento del AltText.

3) Inserire il testo alternativo nel campo “Descrizione per ipovedenti” e cliccare su Applica.

Per modificare l'AltText già inserito ripetere il punto 2. Per inserire un'altra immagine ripetere il punto 1.

Utilizzare la funzione OCR di Mastodon (solo via web).

Se si inseriscono immagini che contengono testo, Mastodon (tramite interfaccia web) consente di riconoscerlo (“Rileva il testo dall’immagine”) e scriverlo automaticamente nel campo “Descrizione per ipovedenti” (ci sarà da correggere qualche errore, principalmente accenti).

Tramite App ufficiale Mastodon.

La procedura è valida anche per tutte le app di terze parti che sono fork dell'app ufficiale Android (per esempio Megalodon e Moshidon).

1) dopo aver selezionato e caricato l'immagine/video tappare sull'icona matita (modifica testo alternativo)

2) inserire/modificare il testo alternativo e tornare alla schermata precedente cliccando sulla freccia in alto a sinistra o effettuando uno swipe

Per modificare l'AltText ripetere dal punto 1.

---

È importante stabilire obiettivi.

Se siete utenti che non hanno mai scritto AltText, semplicemente cominciate, create l’abitudine. Dopo aver cominciato, migliorate. E’ così che evolve una collettività: quando ognuno fa la sua parte.

L’obiettivo minimo di Mastodon Uno è avere sempre la maggioranza delle immagini, inserite quotidianamente, dotate di AltText scritti bene. Solo qualche mese fa si era mediamente sotto il 20%. Oggi siamo mediamente sopra il 50% e puntiamo al 70%.

Tra le prime 20 istanze Mastodon mondiali, Mastodon Uno è la prima per utilizzo di AltText. Vogliamo migliorare ancora, sia quantitativamente (percentuale di AltText inseriti), sia qualitativamente (AltText scritti bene).

La nostra Uno Community gioca sempre un ruolo chiave nel Fediverso italiano. 😉

---

Ultimo aggiornamento: settembre 2024.

---

Segui Uno Academy su Mastodon.

Uno Academy è pubblicato con licenza CC BY-NC-ND 4.0

Mastodon Uno esiste solo grazie alle donazioni degli utenti.
Offri un caffè ai Devol e/o sostieni Mastodon Uno.

mastodonitalia's profile - Liberapay

Mastodon Uno, il social network etico, open source, senza pubblicità, rispettoso della privacy.

^Liberapay

Moved to @bonfire@bonfire.cafe

2024-08-05 10:00:16

This week, we'll be sharing a glimpse into the diverse themes and possibilities we'll offer with Mosaic, an all-in-one platform built with Bonfire and tailored to each organization's unique needs. We begin with a federated journal and magazine theme—ideal for journalists, editors, and communities looking to organize and disseminate knowledge on the Fediverse. Explore what's possible with #Mosaic…
See our previous post on for context: indieweb.social/@bonfire/11288…
🧵 1/3

Moved to @bonfire@bonfire.cafe

2024-08-01 14:54:51

🔥 📣 We're gearing up to launch Bonfire Mosaic, a revolutionary service unifying your digital presences, coming this September! 🌐 If you're interested in a cutting-edge, custom all-in-one solution that integrates your website, social networking, and coordination tools, DM us or email team@bonfire.cafe to learn more. Stay tuned! #mosaic

UNO ACADEMY

2024-08-05 05:47:45

Guida all'AltText su Mastodon

L’AltText, letteralmente “testo alternativo” e descrittivo dell’immagine, fu concepito e introdotto da Louis Braille, all’interno del suo Codice per non vedenti e ipovedenti, ideato nella prima metà del XIX secolo. Il W3C cominciò da subito a implementarlo fin dalla prima specifica HTML pubblicata nel 1993. Nel corso degli anni l’AltText è stato spesso ignorato e spesso abusato (in ottica SEO).

In questo articolo ci occupiamo solo degli aspetti pratici che devono interessare gli utenti, in particolare su Mastodon.

Perché “in particolare su Mastodon”? Perché ogni piattaforma è creata con una sua “anima”, un suo senso, un suo scopo, che poi evolvono nel tempo; ma occorre tenere presente la natura della piattaforma per non snaturarla con un utilizzo inconsapevole.

Mastodon nasce come piattaforma sociale testuale di microblogging, ovvero è nato come piattaforma orientata ai contenuti testuali brevi.

Non significa ovviamente che non si possono utilizzare immagini o video (lo stesso creatore di Mastodon, appassionato di fotografia, pubblica foto); significa che devono essere utilizzati con maggior attenzione, cura e responsabilità (immagini e video hanno un impatto decisamente maggiore nella gestione delle istanze).

Prima di porsi il problema di come scrivere AltText efficaci, ci si deve chiedere se l’immagine (o video) che stiamo inserendo nel post sia effettivamente necessaria.

Dopo aver stabilito che un’immagine (o video) è effettivamente necessaria, ci sono poche e semplici linee guida a cui attenersi per scrivere AltText efficaci.

1 – Sintetici e contestuali, ma descrittivi.

Una o due frasi, che non solo descrivano l’immagine ma che eventualmente la contestualizzino al post, sono già sufficienti. Se poi si vuole abbondare di dettagli, tanto meglio (le moderne tecnologie assistive non hanno più i limiti delle generazioni precedenti: Mastodon offre fino a 1500 caratteri). Concludere sempre la frase con un punto.

2 – Cosa evitare.

“Immagine di…”, “Foto di…”, “Video di…”. È già lo screen reader a segnalare che è un'immagine o un video.

Assolutamente da evitare il copia/incolla del testo già utilizzato nel post: gli screen reader, anzichè leggere la descrizione effettiva dell'immagine, rileggerebbero il post.

3 – Esempi pratici.

Prima di vedere come inserire l'AltText tramite interfaccia web e app ufficiali Mastodon, sottolineiamo ancora che l'AltText deve descrivere ciò che effettivamente c'è nell'immagine/video, fornendo eventualmente un contesto.

Alcuni esempi.

Se inserisco l'immagine dell'Uomo Vitruviano di Leonardo da Vinci, un buon AltText potrebbe essere:

L'Uomo Vitruviano di Leonardo da Vinci, realizzato intorno al 1490, è un disegno iconico che rappresenta un uomo nudo inscritto in un cerchio e in un quadrato, simboleggiando l'armonia tra il corpo umano e la geometria. Il disegno, eseguito con penna e inchiostro su carta, misura 34,4 x 24,5 cm ed è conservato alle Gallerie dell'Accademia di Venezia. Le proporzioni dell'uomo sono basate sui canoni di Vitruvio, evidenziando la centralità dell'uomo come misura di tutte le cose. Il volto dell'uomo, con un'espressione concentrata, e le sue braccia e gambe disposte in posizioni sovrapposte, riflettono un rigoroso studio delle proporzioni umane e un profondo legame tra arte e scienza.

Se inserisco la copertina di The Dark Side of the Moon dei Pink Floyd, un buon AltText potrebbe essere:

La copertina di The Dark Side of the Moon dei Pink Floyd presenta un prisma triangolare su uno sfondo nero. La luce bianca entra da sinistra e si scompone in un fascio di colori che esce a destra, rappresentando i colori dell'arcobaleno. Questo design, creato dallo studio Hipgnosis, simboleggia la trasformazione della vita e delle idee, riflettendo il concetto di come l'individuo (il prisma) elabora e restituisce la luce (la vita) in forme diverse. La copertina è diventata un'icona visiva della band e della musica rock in generale.

Se inserisco la copertina del romanzo Musashi di Eiji Yoshikawa, un buon AltText potrebbe essere:

La copertina del libro Musashi di Eiji Yoshikawa presenta un'immagine suggestiva che evoca il tema del samurai e della ricerca del perfezionamento personale. Al centro, si può vedere un guerriero con una katana, che rappresenta Miyamoto Musashi, in una posa che trasmette determinazione e forza. Lo sfondo è caratterizzato da elementi naturali, come montagne e nuvole, che simboleggiano il viaggio interiore e le sfide che affronta. La palette di colori è calda e terrosa, richiamando l'ambientazione storica del Giappone del XVII secolo. Il titolo del libro è in caratteri chiari e prominenti, enfatizzando l'importanza della figura di Musashi nella cultura giapponese. Questa copertina comunica visivamente l'epicità e la profondità del racconto, invitando il lettore a immergersi nella vita di uno dei più leggendari samurai.

Se inserisco una foto paesaggistica, un buon AltText potrebbe essere:

Il Lago di Como mostra un paesaggio sereno e pittoresco, con acque calme che riflettono le montagne circostanti. In primo piano, si possono vedere piccole barche a vela e pedalò che galleggiano dolcemente sul lago, mentre sullo sfondo si ergono le imponenti Alpi, parzialmente coperte da una leggera nebbia. La vegetazione lussureggiante lungo le rive del lago aggiunge un tocco di verde vibrante, mentre il cielo azzurro e luminoso contribuisce a creare un'atmosfera di tranquillità e bellezza naturale.

Gli AltText possono essere ovviamente molto più sintetici, ma non si possono ridurre a “copertina del disco/libro/film”, “titolo dell'opera d'arte” o “Lago di Como”. 😁

Se si inseriscono vignette o meme, oltre a riportare il testo si deve anche descrivere la scena.

Gli AltText devono sempre fornire una descrizione, anche sommaria, del contenuto effettivo dell'immagine/video.

Per degli ottimi esempi di AltText efficaci, la University of South Carolina offre un’ampia casistica, oltre a indicazioni molto dettagliate per chi vuole approfondire.

Per chi invece vuole approfondire gli standard W3C in merito al AltText, può fare riferimento ai relativi tutorial.

Come inserire l'AltText su Mastodon.

Ci riferiamo solo a interfaccia web e app ufficiali per dare un riferimento omogeneo a tutti. Dopo aver compreso i pochi passaggi, sarà più intuitivo replicare anche sulle innumerevoli interfacce e app di terze parti. In generale è sufficiente prestare attenzione all'interfaccia/app utilizzata subito dopo aver inserito l'immagine/video: c'è sempre un'icona o una voce di menu relativa all'inserimento/modifica dell'AltText.

Al momento Mastodon consente di inserite fino a 4 immagini (e quindi 4 AltText) per post e un solo video per post. La dimensione massima per ogni immagine è di 16MB. La dimensione massima per un file video (o file audio) è di 99 MB.

Attenzione alla dimensione dei file inseriti: è sempre buona prassi cercare di comprimere le dimensioni per non impattare eccessivamente sui costi di gestione delle istanze. Nel caso si avessero immagini o video di diversi MB, esistono vari servizi freemium per comprimere al volo le dimensioni; uno dei più efficienti e semplici da utilizzare è XConvert.

Tramite interfaccia web ufficiale Mastodon (sia desktop che mobile).

1) Cliccare sull'icona graffetta (Aggiungi un file immagine, video o audio) per selezionare e inserire l'immagine. 2) cliccare su “modifica” per accedere alla schermata di inserimento del AltText.

3) Inserire il testo alternativo nel campo “Descrizione per ipovedenti” e cliccare su Applica.

Per modificare l'AltText già inserito ripetere il punto 2. Per inserire un'altra immagine ripetere il punto 1.

Utilizzare la funzione OCR di Mastodon (solo via web).

Se si inseriscono immagini che contengono testo, Mastodon (tramite interfaccia web) consente di riconoscerlo (“Rileva il testo dall’immagine”) e scriverlo automaticamente nel campo “Descrizione per ipovedenti” (ci sarà da correggere qualche errore, principalmente accenti).

Tramite App ufficiale Mastodon.

La procedura è valida anche per tutte le app di terze parti che sono fork dell'app ufficiale Android (per esempio Megalodon e Moshidon).

1) dopo aver selezionato e caricato l'immagine/video tappare sull'icona matita (modifica testo alternativo)

2) inserire/modificare il testo alternativo e tornare alla schermata precedente cliccando sulla freccia in alto a sinistra o effettuando uno swipe

Per modificare l'AltText ripetere dal punto 1.

---

È importante stabilire obiettivi.

Se siete utenti che non hanno mai scritto AltText, semplicemente cominciate, create l’abitudine. Dopo aver cominciato, migliorate. E’ così che evolve una collettività: quando ognuno fa la sua parte.

L’obiettivo minimo di Mastodon Uno è avere sempre la maggioranza delle immagini, inserite quotidianamente, dotate di AltText scritti bene. Solo qualche mese fa si era mediamente sotto il 20%. Oggi siamo mediamente sopra il 50% e puntiamo al 70%.

Tra le prime 20 istanze Mastodon mondiali, Mastodon Uno è la prima per utilizzo di AltText. Vogliamo migliorare ancora, sia quantitativamente (percentuale di AltText inseriti), sia qualitativamente (AltText scritti bene).

La nostra Uno Community gioca sempre un ruolo chiave nel Fediverso italiano. 😉

---

Ultimo aggiornamento: settembre 2024.

---

Segui Uno Academy su Mastodon.

Uno Academy è pubblicato con licenza CC BY-NC-ND 4.0

Mastodon Uno esiste solo grazie alle donazioni degli utenti.
Offri un caffè ai Devol e/o sostieni Mastodon Uno.

mastodonitalia's profile - Liberapay

Mastodon Uno, il social network etico, open source, senza pubblicità, rispettoso della privacy.

^Liberapay