Un avviso «usiamo l’IA» nel piè di pagina non basta a informare chi apre un chatbot. L’articolo 50 richiede di trattare separatamente l’interazione con i sistemi di IA, alcune pubblicazioni generate o manipolate e i contrassegni tecnici dei contenuti. Sul web, questo si traduce in decisioni concrete sull’interfaccia e sulla gestione dei file.
La Commissione europea indica che gli obblighi dell’articolo 50 si applicano dal 2 agosto 2026. I suoi orientamenti sulla trasparenza, adottati il 5 novembre 2026, forniscono indicazioni pratiche; il Codice di buone pratiche è volontario, ma gli obblighi di legge non lo sono. Un badge generico non basta.
Implementeremo un chatbot che informa prima che la persona scriva e un’immagine che, quando opportuno, può avere un’etichetta visibile. Il flusso sarà il seguente: identificare il tipo di contenuto, mostrare l’avviso appropriato e, nel caso del chatbot, farlo prima del primo messaggio.
flowchart TD
A["Identificar contenido"] --> B{"¿Interacción con IA?"}
B -->|"Sí"| C["Aviso junto al chat"]
B -->|"No"| D{"¿Deepfake o texto cubierto?"}
D -->|"Sí"| E["Etiqueta visible"]
D -->|"No"| F["Sin etiqueta automática"]
C --> G["Conservar marcas técnicas aparte"]
E --> G
F --> G1. Creare la pagina di prova
L’esempio usa HTML, CSS e JavaScript nativi: un pulsante per aprire la chat, un pannello inizialmente chiuso e una figura con la sua didascalia. Nell’esempio l’etichetta visibile dell’immagine è attivata per mostrare il risultato; in un’applicazione reale, il sistema editoriale deve decidere caso per caso per ogni pubblicazione interessata, senza attivarla per qualsiasi file con metadati di IA.
Salva il codice come index.html e aprilo in un browser. Il contenuto dell’immagine è un percorso locale di esempio; sostituiscilo con una risorsa della tua applicazione.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Avisos de transparencia</title>
<style>
body { font: 1rem/1.5 system-ui, sans-serif; margin: 2rem auto; max-width: 48rem; padding: 0 1rem; }
button, textarea { font: inherit; }
.chat-panel { border: 1px solid #777; margin-top: 1rem; padding: 1rem; }
.notice, figcaption { background: #f0f0f0; padding: .5rem; }
figure { margin: 2rem 0; }
img { height: auto; max-width: 100%; }
</style>
</head>
<body>
<main>
<h1>Ayuda y contenidos</h1>
<button id="chat-launcher" type="button" aria-expanded="false" aria-controls="chat-panel">
Hablar con el asistente <span>IA</span>
</button>
<section id="chat-panel" class="chat-panel" hidden aria-labelledby="chat-title">
<h2 id="chat-title">Asistente</h2>
<p class="notice" role="status">Estás hablando con un sistema de IA, no con una persona.</p>
<form id="chat-form">
<label for="message">Mensaje</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Enviar</button>
</form>
<p id="chat-result" role="status"></p>
</section>
<figure>
<img src="imagen-ejemplo.jpg" alt="Imagen generada por IA de una taza sobre una mesa">
<figcaption>Imagen generada por IA</figcaption>
</figure>
</main>
<script src="app.js" defer></script>
</body>
</html>2. Aprire la chat senza ritardare l’avviso
Il pulsante per aprire la chat mostra già «IA» come testo effettivo e il pannello contiene una spiegazione completa. Quando viene aperto, il messaggio è presente prima che la persona possa inviare qualsiasi cosa. L’articolo 50(1) riguarda l’informazione sull’interazione con l’IA; secondo gli orientamenti, in molti casi è probabilmente sufficiente un avviso ben visibile prima della prima interazione. Una menzione nascosta nei termini o nella documentazione non sostituisce l’avviso nel contesto.
Questo JavaScript completa l’interazione di base. Non simula una risposta dell’IA: mostra il testo inserito come conferma locale, così l’esempio può essere eseguito senza un servizio esterno. In produzione, collega il modulo al servizio di conversazione e mantieni l’avviso prima dell’invio.
const launcher = document.querySelector("#chat-launcher");
const panel = document.querySelector("#chat-panel");
const form = document.querySelector("#chat-form");
const message = document.querySelector("#message");
const result = document.querySelector("#chat-result");
launcher.addEventListener("click", () => {
const opening = panel.hidden;
panel.hidden = !opening;
launcher.setAttribute("aria-expanded", String(opening));
if (opening) {
message.focus();
}
});
form.addEventListener("submit", (event) => {
event.preventDefault();
result.textContent = `Mensaje preparado: ${message.value.trim()}`;
});Il controllo aggiorna aria-expanded e, all’apertura, sposta il focus sul campo. L’avviso, tuttavia, non dipende da questo attributo né da un nome accessibile invisibile: anche chi vede la pagina può leggerlo. L’avviso compare prima che si inizi a scrivere.
3. Decidere quando etichettare un’immagine
L’etichetta visibile non si applica automaticamente a tutti i contenuti generati dall’IA. La Commissione distingue i deepfake e, separatamente, alcuni testi su questioni di interesse pubblico pubblicati senza revisione umana né responsabilità editoriale. Per i deepfake, la definizione descritta negli orientamenti combina la somiglianza con una persona, un oggetto, un luogo, un’entità o un evento esistente e un’apparenza ingannevole di autenticità o veridicità. Il solo realismo fotografico non è sufficiente a determinare se il criterio è soddisfatto.
Per questo, registra la decisione editoriale in un campo esplicito. Questo frammento JavaScript completo riceve i dati del contenuto e crea una figura: quando requiresVisibleLabel è true, inserisce una didascalia visibile e antepone lo stesso concetto al testo alternativo. Non deduce dai metadati che l’immagine sia un deepfake.
function createImageFigure({ src, alt, label, requiresVisibleLabel }) {
const figure = document.createElement("figure");
const image = document.createElement("img");
image.src = src;
image.alt = requiresVisibleLabel ? `${label}: ${alt}` : alt;
figure.append(image);
if (requiresVisibleLabel) {
const caption = document.createElement("figcaption");
caption.textContent = label;
figure.append(caption);
}
return figure;
}
const generatedFigure = createImageFigure({
src: "imagen-ejemplo.jpg",
alt: "una taza sobre una mesa",
label: "Imagen generada por IA",
requiresVisibleLabel: true
});
document.querySelector("main").append(generatedFigure);Per provarlo senza duplicare l’immagine statica del primo blocco, elimina dal codice HTML la figura di esempio. Poi salva la funzione in app.js e caricala dal documento. In un’applicazione reale, il valore booleano deve derivare dalla revisione editoriale e dalla classificazione del contenuto, non da una regola come «se il file è generato, mostra l’etichetta».
L’etichetta deve essere percepibile senza strumenti speciali né azioni dedicate. Un testo alternativo aiuta le tecnologie assistive, ma non sostituisce una didascalia visibile; un’etichetta che appare solo al passaggio del cursore non è visibile a tutti.
4. Tenere separate l’etichetta e la provenienza
L’articolo 50(2) riguarda i contrassegni leggibili dalle macchine nelle uscite dei sistemi generativi. È un obbligo che ricade sul fornitore del sistema; se un’azienda utilizza soltanto un’API di terzi, normalmente la responsabilità di quel contrassegno spetta al fornitore. Per un sito web, il problema pratico è evitare di perdere il contrassegno quando si ridimensiona, si ricodifica o si generano versioni derivate tramite il CMS o la CDN.
Il contrassegno tecnico e la didascalia visibile sono due controlli distinti. Una dichiarazione di provenienza firmata, come una credenziale dei contenuti, non è visibile nell’immagine e non sostituisce l’etichettatura percepibile eventualmente richiesta dall’articolo 50(4). Nel flusso di pubblicazione, registra separatamente entrambi gli stati:
function validatePublication(asset) {
const errors = [];
if (asset.requiresVisibleLabel && !asset.visibleLabel) {
errors.push("Falta la etiqueta visible requerida.");
}
if (asset.providerMarkExpected && !asset.machineReadableMarkPreserved) {
errors.push("No se ha confirmado la conservación de la marca técnica.");
}
return errors;
}
const asset = {
requiresVisibleLabel: true,
visibleLabel: "Imagen generada por IA",
providerMarkExpected: true,
machineReadableMarkPreserved: true
};
const publicationErrors = validatePublication(asset);
if (publicationErrors.length > 0) {
console.error(publicationErrors.join(" "));
} else {
console.log("La publicación supera las comprobaciones configuradas.");
}Questo controllo non esamina né crea metadati: impone che il processo di pubblicazione registri l’esito della verifica della catena di elaborazione delle immagini. Il contrassegno deve essere seguito durante il caricamento, le trasformazioni e la creazione delle versioni derivate; non dare per scontato che un’ottimizzazione lo conservi.
5. Verificare il risultato come visitatore
Prova la pagina con la chat chiusa: il pulsante per aprirla deve comunicare che si tratta di IA senza aprirla. Poi apri il pannello e verifica che l’avviso compaia prima del campo del messaggio. Per le immagini, controlla che la didascalia sia leggibile senza passare il cursore e che corrisponda alla decisione editoriale. Se offri un’interfaccia vocale, l’avviso deve essere presente anche nell’audio; un semplice segnale acustico non basta e un’interfaccia vocale mostrata anche sullo schermo deve mantenere una dicitura visibile.
L’etichetta per le persone e il contrassegno tecnico sono controlli distinti. Gli obblighi di trasparenza dell’articolo 50 sono in vigore dal 2 agosto 2026; la Commissione descrive un periodo transitorio più limitato per alcuni contrassegni dei fornitori, fino al 2 dicembre 2026, per i sistemi generativi già sul mercato prima della data di applicazione. L’avviso del chatbot non beneficia di questo termine aggiuntivo.
Se un team decide di non seguire il Codice di buone pratiche, la Commissione indica che deve dimostrare con altri mezzi equivalenti l’adeguatezza delle proprie misure di marcatura ed etichettatura. L’interfaccia può stabilire dove mostrare l’avviso; il processo di pubblicazione deve comunque preservare i contrassegni tecnici pertinenti.
Fonti: DEV Community, Il futuro digitale dell’Europa, Il futuro digitale dell’Europa, Il futuro digitale dell’Europa
