How to Make an Accessible Media Gallery for the European Accessibility Act

An accessible media gallery needs both an operable interface and accessible media. Give meaningful images useful text alternatives; make filters, thumbnails, pagination, carousels, and image viewers keyboard accessible; and provide media access such as synchronized captions and visual description where applicable. The European Accessibility Act (EAA) sets accessibility principles for covered services, but a standalone gallery is not automatically covered just because it is a gallery. Applicability depends on the service, operator, target market, exemptions, and national implementation.

This guide covers practical implementation and a careful way to assess the legal context. It is not a legal determination of whether a particular service is in scope.

1. Understand what the European Accessibility Act covers

Directive (EU) 2019/882 is the European Accessibility Act. Annex I addresses websites, related online applications, and mobile-device-based services in defined contexts, using the principles of being perceivable, operable, understandable, and robust. It also addresses accessibility components in audiovisual media services, including captions, audio description, spoken subtitles, and sign-language interpretation, with adequate quality and synchronization and user control. These provisions should not be read as a rule that every standalone image gallery is automatically covered. Read the directive, including Annex I.

Before drawing a legal conclusion, identify:

The operator and service: Who provides the gallery, and is it part of a service covered by the EAA?
The target market: Which country or countries does the service address?
The national rules: How has the relevant country transposed the directive, and which requirements apply to this service?
Exemptions and circumstances: Do any applicable exemptions or specific rules affect the service?
The technical basis: Which current standard and version are relevant to the specific compliance question?

The EAA is distinct from the Web and Mobile Accessibility Directive, which is directed at public-sector bodies. W3C’s EU policy overview describes the EAA as relevant to public and private sectors and links to national transposition measures. Check the national law and actual service details where the answer has legal consequences. W3C WAI: European Union accessibility policy.

2. Make the gallery interface perceivable and operable

Write useful image alternatives

For a meaningful image, write concise alternative text that communicates its purpose or essential information in context.
For a decorative image that adds no information, avoid a redundant announcement; use an empty alternative where appropriate.
For a chart, diagram, or image containing substantial detail, provide the necessary information in adjacent text or a longer description. A short alt attribute alone may not convey the content.
Do not use filenames, generic labels such as “image,” or repeated captions as a substitute for a meaningful alternative.

Give controls names, focus, and a sensible order

Make category filters, thumbnails, pagination, carousel controls, close buttons, and lightbox actions operable by keyboard. Use native buttons and links where possible, provide visible focus indication, and give each control a name that explains its action. Keep the focus order aligned with the visual and reading order.

When a viewer opens, move focus into the viewer in a predictable way. Keep keyboard navigation within a modal viewer while it is open if the interaction is modal. Escape should close it when appropriate, and closing should return focus to the thumbnail or control that opened it. Do not leave keyboard or screen-reader users stranded behind an overlay.

Use structure and associations

Organize the page with semantic headings and landmarks. Associate captions and descriptions programmatically with the image or media they explain, rather than relying on visual proximity alone. Make state changes, such as the selected filter or current slide, available to assistive technology.

These are implementation recommendations for a gallery. The directive establishes broader accessibility principles; it does not prescribe this exact gallery UI pattern. Directive (EU) 2019/882.

3. Make video and audio accessible

A gallery that includes video or audio needs a media plan as well as accessible controls. W3C WAI recommends planning access from the start, including visual description during scripting and production where possible. Its guidance covers captions, description of visual information, transcripts, sign language when the audience needs it, and an accessible player. W3C WAI: Making Audio and Video Media Accessible.

Captions

For prerecorded video, provide synchronized captions that cover speech and meaningful non-speech audio needed to understand the content. This can include speaker identity, relevant sound effects, music, laughter, and location. Let users control captions and keep them synchronized with the media. A transcript is useful, but should not be casually treated as a replacement for every caption requirement.

Visual information

Make essential visual information available to people who cannot see the video adequately. Audio description can narrate relevant visual information. A descriptive transcript can include both spoken content and visual information. Choose the applicable alternative based on the media and the relevant criterion; a transcript and audio description are not interchangeable in every situation.

Transcripts and sign language

Provide transcripts where useful and applicable, and make them available and clearly associated with the relevant player. Consider sign-language interpretation when the audience needs it; do not imply that it is automatically necessary for every media item based on general guidance alone.

Player access

Use a media player that supports accessibility. Check keyboard operation and assistive-technology access for playback, pause, volume, captions, and track selection. Avoid autoplay that takes control away from visitors. WAI’s advice to use an accessible player is guidance, not a verbatim rule from the EAA.

4. Build and review the gallery step by step

Inventory the media. List images, charts, audio, video, captions, transcripts, descriptions, and any sign-language versions. Identify who supplies each asset.
Write the alternatives with context. Distinguish informative from decorative images. Prepare longer descriptions or adjacent explanations for complex visuals.
Design the interaction before styling. Define keyboard behavior, focus order, viewer open and close behavior, selected states, and control names.
Prepare media access during production. Plan captions and visual description early; this can reduce retrofitting work. Attach transcripts and alternatives to the correct media item.
Implement semantic markup and accessible controls. Prefer standard elements and ensure captions, descriptions, and states are programmatically associated.
Review with keyboard and assistive technology. Traverse filters, slides, pagination, and viewer controls without a pointer. Confirm focus is visible, announced names make sense, and closing a viewer restores the previous focus.
Review media itself. Check that captions are synchronized and include meaningful non-speech sounds, visual information is available through an appropriate alternative, and the player can be controlled accessibly.
Check the legal context separately. Confirm the service type, relevant national transposition, exemptions, and applicable technical requirements for the actual operator and target market.

5. Example gallery markup

This small example shows semantic grouping, a useful text alternative, an associated caption, and a native button for opening an image viewer. It does not implement a complete lightbox, filter system, or media player; those interactions need the keyboard and focus behavior described above.

<section aria-labelledby="gallery-title">
  <h2 id="gallery-title">Coastal restoration photographs</h2>

  <ul class="gallery">
    <li>
      <figure>
        <button type="button"
                aria-label="Open photograph: volunteers planting dune grass">
          <img src="/media/dune-planting.jpg"
               alt="Volunteers plant grass along a sandy dune to reduce erosion">
        </button>
        <figcaption>Volunteers plant native grass at the north beach.</figcaption>
      </figure>
    </li>

    <li>
      <figure>
        <img src="/media/project-mark.png" alt="">
        <figcaption>Project mark used as a decorative divider.</figcaption>
      </figure>
    </li>
  </ul>
</section>

In production, ensure the button’s accessible name does not make the image alternative needlessly repetitive. If a caption already communicates the key information, decide whether the image alternative should add distinct visual information or whether the image is redundant in that particular context. The correct text depends on what the image contributes to the page.

6. Troubleshooting common accessibility failures

Problem	Likely cause	Fix
Screen reader announces “image” or a filename	Missing, generic, or autogenerated alternative text	Write a concise alternative based on the image’s purpose, or use an empty alternative when decorative.
A chart cannot be understood from its alt text	Complex information has been compressed into a short label	Provide key findings in nearby text or a longer description and associate it with the chart.
Keyboard users cannot open a thumbnail	The thumbnail is a non-interactive element with pointer-only behavior	Use a native button or link and support keyboard activation.
Focus disappears after closing the viewer	The dialog is removed without restoring focus	Remember the opener and return focus to it when the viewer closes.
Users cannot tell which slide or filter is selected	Selection is only indicated by color or visual styling	Expose the selected state programmatically and provide a visible non-color cue.
Captions omit sounds needed to follow the scene	Captions were transcribed as speech only	Include meaningful non-speech audio and speaker identification, synchronized with playback.
Video information is still missing for blind users	Captions or a speech-only transcript were assumed to cover visual information	Add audio description or an appropriate descriptive transcript for essential visual content.
The media works with a mouse but not a keyboard	Player controls or custom overlays lack keyboard support	Use a player that supports accessibility and check playback, volume, captions, and track selection by keyboard and assistive technology.
A checklist says “compliant,” but legal coverage is unclear	Technical checks were mistaken for a legal scope assessment	Verify the operator, service category, target country, national transposition, exemptions, and applicable technical standard.

7. Reliability, maintenance, and cost considerations

Accessibility is an ongoing content and interaction responsibility. Assign ownership for writing alternatives, producing synchronized captions, preparing visual descriptions and transcripts, and reviewing player changes. Keep those assets associated with the correct media when content is moved or replaced. Include the viewer and player in regression review whenever their controls or focus behavior change.

Plan captioning, description, and transcript work as part of media production so content does not ship without its needed alternatives. The research sources do not establish prices, service costs, or performance figures for a particular implementation or provider; estimate these from your content volume and workflow. No vendor is endorsed here.

8. Or skip the browser setup

If you need screenshots of gallery pages for visual review or documentation, ScreenshotNeo is a website screenshot API and MCP server for developers. It does not assess accessibility or establish EAA compliance; use it to capture pages, then perform the accessibility checks above.

One GET request returns a PNG, JPEG, WebP, or PDF. Example using the API as supplied:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/gallery -o gallery.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/gallery"},
    timeout=90,
)
open("gallery.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/gallery'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('gallery.webp', image));

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, no card required.

9. Frequently asked questions

Does the European Accessibility Act apply to my website?

It depends on the operator, service type, target market, applicable exemptions, and national implementation. A gallery alone does not establish that a service is in scope.

Do videos need captions under the European Accessibility Act?

The Act addresses accessibility components in audiovisual media service contexts. Whether and how a particular video service is covered depends on the applicable rules. As an implementation practice, provide synchronized captions for prerecorded video, including meaningful non-speech audio where needed.

Is a transcript enough for a video?

Not necessarily. A transcript can help, but it does not automatically provide synchronized captions or communicate essential visual information in the same way as audio description or a descriptive transcript.

Does every gallery need sign-language interpretation?

The cited general media guidance says to offer it when the audience needs it; it does not establish that every media item universally requires sign-language interpretation. Check the rules that apply to the service.

Does this checklist make a site EAA compliant?

No checklist can establish that by itself. Use it to improve the gallery, then assess the actual service against current national law and applicable technical requirements.

Sources

Directive (EU) 2019/882, including Annex I.
W3C WAI, Making Audio and Video Media Accessible, updated 17 September 2024.
ETSI EN 301 549 v3.2.1, dated November 2020. Verify the present status and applicable version before relying on a standard for a legal presumption.
W3C WAI, European Union policy overview, updated 23 July 2025.