How to implement EU AI Act Article 50 transparency in a web app

Article 50 of the EU AI Act is three different implementation jobs, not one "AI badge" you can stamp on a site.

• Article 50(1) — if an AI system talks with people, tell them that at the first interaction, clearly and in the interface itself.
• Article 50(4) — if you publish a deep fake, add a visible or audible label people can perceive without a special tool.
• Article 50(2) — if you provide a generative system, the output should carry a machine-readable mark. That mark is not a visible label.

The Commission's Article 50 guidelines, adopted 5 November 2026 (C(2026) 7702 final, paragraph 5; non-binding), are the practical reference for how those duties are being read. This article is general information for web teams, not legal advice.

What an October 2026 scan actually saw

This is not a rare edge case. In Article50.io's October 2026 study, State of Article 50 on EU Websites, 58 of 59 popular EU websites with a chat widget the scanner could detect (98.3%) showed no AI disclosure at first view, before the chat was opened. Only 1 of 59 did. The batch was 2,279 popular home pages, taken from the top of Tranco list GQG5K across ten EU country domains, scanned on 21–22 October 2026. The 59 sites are the ones where a chat widget was detected.

Those figures come with limits you should keep in view if you cite them (the study publishes totals only and names no site):

• Only the home page was loaded. The chat was never opened, so a disclosure that appears only after opening the widget was not counted.
• Automated detection can miss unusual wording, some languages, and widgets the scanner does not recognise. A detected widget is not always an AI system.
• 862 of the 2,279 sites could not be checked (blocked or unusable pages, robots.txt exclusions, or an unreachable robots.txt).
• This is what an automated scan saw, not a legal assessment.

The useful engineering takeaway is narrower. The Act requires a clear notice at the latest at the first interaction, which in practice usually means the launcher or the first message, and that is the step most teams still skip. Our October scan measured something stricter: whether a disclosure was visible at first view, with the chat still closed.

1. Chatbot disclosure: put it in the widget, at first view

Article 50(5) requires the information in a clear and distinguishable manner, at the latest at the first interaction. The guidelines treat a single, prominent notice before that first interaction as likely to suffice in most cases (paragraph 40). A line only in the terms, in documentation, or a site-wide "we use AI" sentence is not enough on its own (paragraph 38). Machine-readable marks and generic words such as "assistant" also do not do this job.

What works in a web app is ordinary, visible text, next to the control people use:

<button type="button" class="chat-launcher">
  Chat with us
  <span class="chat-launcher__badge">AI</span>
</button>

<section class="chat-panel" hidden>
  <p class="chat-panel__notice" role="status">
    You're chatting with an AI assistant, not a person.
  </p>
  <label>
    Message
    <textarea name="message"></textarea>
  </label>
</section>

A few implementation details matter more than the exact wording:

• The badge and the first-line notice should be real text in the document, not only an aria-label. An accessible name that sighted visitors never see is not a clear, in-context disclosure.
• Do not put aria-hidden="true" on the "AI" badge. If you style it as a pill, keep the contrast readable and the type large enough to see on a phone.
• Show the first-line notice when the panel opens, before the visitor types. A disclosure after they have already sent a message is later than "the first interaction".
• Match the language of the page. A German site with an English-only notice is easy to miss.
• For longer or riskier chats (sensitive advice, or a companion-style product), the guidelines say reminders or context-aware disclosure are likely to be needed (paragraph 40). There is no universal interval in the text. A second short line after a long session, or when the visitor asks whether they are talking to a person, is the practical pattern.

A voice interface is the same duty in a different medium. Paragraphs 36 and 37 give a spoken opening statement as an example, with reminders on longer calls as appropriate. A tone or earcon alone is not enough:

"Hello — this is an AI assistant, not a person. How can I help?"

If the product also shows an on-screen phone or voice widget, keep a visible line there too, not only in the audio.

2. Visible labels for AI-generated content: only when it is a deep fake

Not every AI-touched asset needs a visible Article 50(4) label. That duty applies to deep fakes (and, separately, to certain AI text on matters of public interest). The guidelines read the deep-fake definition as a cumulative test (paragraph 113): the content must resemble an existing person, object, place, entity or event, and it would falsely appear authentic or truthful. That false appearance is judged in context (paragraph 114). Photorealism alone is not enough.

Two consequences for a front-end and a CMS:

• An AI marker or metadata flag does not, by itself, establish that an image is a deep fake. Do not auto-print a visible label on every file whose generator wrote "AI" into the metadata.
• Alt text alone may not satisfy the visible-disclosure duty. Paragraph 117 says a deep-fake label should be perceivable without a special tool or a dedicated action. Alt text helps assistive technology, but many visitors never hear it, and a label that appears only on hover or click is a dedicated action.

When a 50(4) label is required, associate it with the image in the HTML, as a real caption, and put the same words at the start of the alt text:

<figure>
  <img
    src="hero.jpg"
    srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="AI-generated image of a ceramic mug on a kitchen counter">
  <figcaption>AI-generated image</figcaption>
</figure>

Avoid a label that exists only as a CSS ::after on a background-image. Background images have no alt and no caption of their own, and a pseudo-element is a weak bet for assistive technology. Prefer a real <img> in the markup. If the picture has to stay a background, put a visible HTML caption next to the element, not only in the stylesheet.

3. Machine-readable marking: keep the provenance, don't confuse it with a label

Article 50(2) sits with the provider of the generative system: the output (audio, image, video, or text) should be marked in a machine-readable way so it can be detected as AI-generated. If you only call someone else's image or speech API and publish the file, that marking duty is usually theirs. If you place a generative system on the market under your own name, it is likely yours.

For a web team, the practical failure mode is stripping the mark on the way to production. A common image pipeline resizes, re-encodes, or "optimises" a file and drops XMP, IPTC or a C2PA Content Credentials manifest. Check that your upload, CDN and CMS derivatives preserve that metadata when a mark is present. A signed manifest is tamper-evident provenance data. It is not a visible label, and it is not a watermark you can see on the picture.

The guidelines are explicit that a deployer cannot rely on the provider's Article 50(2) mark to meet an Article 50(4) labelling duty, because people cannot perceive that mark unaided (paragraph 117). Treat the two as separate checks in the codebase: one field for "the file still carries its provenance mark", and a different field for "a visible caption should render".

Dates are narrower than they first appear. Most of Article 50 has applied since 2 August 2026. Paragraph 153 describes a provider-only transition, until 2 December 2026, for Article 50(2) marking of generative systems already on the market before 2 August 2026. A chatbot that talks to people did not get that extra time. Paragraph 154 says outputs and deep fakes generated before 2 August 2026 do not need a retroactive mark or label; later-published public-interest text can still need a label where Article 50(4) applies.

Check a live page

Once the markup is in, look at the page the way a first-time visitor sees it: launcher visible, chat closed, images in their captions, no hover. You can also run a free scan of a public page. It loads one URL in a real browser, usually in under a minute, and is capped at 45 seconds. It is an automated look at that page, not a legal assessment.

This is general information, not legal advice. For the study figures and method, see State of Article 50 on EU Websites (October 2026). For the guideline cites above, see the Commission's Article 50 guidelines, C(2026) 7702 final, adopted 5 November 2026, non-binding.