A “we use AI” notice in the footer is not enough to inform someone who opens a chatbot. Article 50 requires separate treatment of interactions with AI systems, certain generated or manipulated publications, and technical content marks. On the web, this translates into concrete interface and file-management decisions.
The European Commission indicates that the obligations under Article 50 apply from August 2, 2026. Its transparency guidelines, adopted on November 5, 2026, offer practical guidance; the Code of Practice is voluntary, but the legal obligations are not. A generic badge is not enough.
We’ll implement a chatbot that informs users before they type and an image that can carry a visible label when appropriate. The flow will be: identify the type of content, show the appropriate notice, and, in the case of the chatbot, do so before the first message.
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. Create the test page
The example uses native HTML, CSS, and JavaScript: a chat launcher, an initially closed panel, and a figure with its caption. The image’s visible label is enabled in the example to show the result; in a real application, the editorial system should decide this for each covered publication, not turn it on for every file with AI metadata.
Save this as index.html and open it in a browser. The image content is an example local path; replace it with a resource from your application.
<!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. Open the chat without delaying the notice
The launcher already displays “AI” as actual text, and the panel contains a full explanation. When it opens, the message is present before the user can send anything. Article 50(1) concerns informing users about their interaction with AI; the guidelines consider a prominent notice before the first interaction likely sufficient in many cases. A mention hidden in terms or documentation does not replace an in-context notice.
This JavaScript completes the basic interaction. It does not simulate an AI response: it presents the entered text as a local confirmation, so the example can run without an external service. In production, connect the form to the conversation service and keep the notice in place before submission.
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()}`;
});The control updates aria-expanded and moves focus to the field when the panel opens. However, the notice does not depend on that attribute or on an invisible accessible name: people who can see the page can read it too. The notice appears before typing.
3. Decide when to label an image
The visible label does not automatically apply to all AI-generated content. The Commission distinguishes deepfakes and, separately, certain texts on matters of public interest published without human review or editorial responsibility. For deepfakes, the definition described in the guidelines combines resemblance to an existing person, object, place, entity, or event with a false appearance of authenticity or truthfulness. Photorealism alone does not settle the question.
Therefore, record the editorial decision as an explicit field. This complete JavaScript snippet receives content data and builds a figure: when requiresVisibleLabel is true, it inserts a visible caption and prefixes the same idea to the alt text. It does not infer that the image is a deepfake from its metadata.
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);To test it without duplicating the static image from the first block, remove the example figure from the HTML. Then save the function in app.js and load it from the document. In a real application, the boolean value should come from editorial review and content classification, not from a rule such as “if the file is generated, show a label.”
The label must be perceivable without a special tool or a dedicated action. Alt text helps assistive technologies, but it does not replace a visible caption; a label that only appears on hover is not visible to everyone.
4. Keep the label and provenance separate
Article 50(2) concerns machine-readable marks on the outputs of generative systems. This is an obligation on the system provider; if a company only uses someone else’s API, responsibility for that mark normally lies with the provider. For a website, the practical challenge is not losing the mark when resizing, re-encoding, or generating derivatives through the CMS or CDN.
The technical mark and the visible caption are two distinct controls. A signed provenance manifest, such as a content credential, is not visible in the image and does not replace the perceptible labeling that may be required under Article 50(4). In the publishing workflow, record both states separately:
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.");
}This control does not inspect or create metadata: it requires the publishing process to record the result of checking the image pipeline. The mark must be tracked through uploads, transformations, and derivatives; do not assume that optimization preserves it.
5. Review the result as a visitor
Test the page with the chat closed: the launcher should communicate that it is AI without opening it. Then open the panel and verify that the notice appears before the message field. For images, check that the caption can be read without hovering and matches the editorial decision. If you offer a voice interface, the notice must also be in the audio; an isolated tone is not enough, and a voice interface that is also shown on screen must retain a visible line.
The human-readable label and the technical mark are distinct controls. The Article 50 transparency obligations have applied since August 2, 2026; the Commission describes a narrower transition period for certain provider marks, until December 2, 2026, for generative systems that were already on the market before the application date. The chatbot notice did not receive that additional period.
If a team decides not to follow the Code of Practice, the Commission says it must demonstrate by other equivalent means that its marking and labeling measures are adequate. The interface can determine where the notice appears; the publication must still preserve the applicable technical marks.
Sources: DEV Community, Shaping Europe’s digital future, Shaping Europe’s digital future, Shaping Europe’s digital future
