Accessibility

Creating and managing accessible web content

Creating inclusive digital experiences requires a commitment to accessible content, following WCAG standards to ensure that information is perceivable and navigable for all users.

Standards

The Web Content Accessibility Guidelines (WCAG) are the international standard for making web content accessible to people with disabilities.

WCAG has three levels of conformance: A, AA and AAA. For new websites, you should normally target WCAG 2.2 Level AA, unless a project has other specific requirements.

Legal accessibility requirements vary depending on country, organization and type of service.

Within the EU, public sector websites and mobile applications are covered by the Web Accessibility Directive and the European standard EN 301 549.

The European Accessibility Act (EAA) has applied since 28 June 2025 and introduces accessibility requirements for certain consumer products and services, including e-commerce, banking, electronic communications, e-books and parts of passenger transport.

The exact legal requirements for a project should always be verified separately.

Readability

Content should be written as clearly and simply as possible.

Reading levels

Read more about reading levels and how to keep your content accessible at w3.org.

Headings and labels

Use headings and labels to introduce content. When using a screen reader, the user can skip between sections and have your headings being read.

As a general convention, use one <h1> for the main page heading. Structure subsequent headings (<h2>, <h3> and so on) in a logical hierarchy and avoid skipping heading levels where possible.

Images

Make sure images have appropriate alternative text. The alt text should communicate the relevant information or purpose of the image in its context.

Decorative images that do not convey useful information should use an empty alt attribute (alt="").

For functional images, such as images used as links or buttons, the alt text should describe the action rather than the appearance of the image.

If you use a CMS, make sure editors can provide alt text and that templates output it correctly.

<img src="image.webp" alt="An apple tree in a garden" />

Videos

Make sure videos does not autoplay, that any controls are clearly visible, that it can be paused and has captions if it contains speech.

Reduced motion

Most operating systems, including Windows, macOS, Android and iOS, allow users to reduce motion and animations. Websites should respect this preference.

Use prefers-reduced-motion to remove, reduce or replace non-essential animations and motion.

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches

Styling implications on accessibility

Lists

When crafting accessible web content, it's important to consider how different browsers interpret HTML elements, particularly in the case of lists (<ul> and <ol>). The use of the CSS property list-style: none; for aesthetic purposes can inadvertently lead to accessibility issues in certain browsers, such as Safari.

Safari may not expose <ul> and <ol> elements as lists to assistive technologies when list-style: none is applied.

If the content is semantically a list and list markers are removed, add role="list" to preserve the list semantics.

Here's how you can implement this:

<ul style="list-style: none;" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Content that is not visible on screen can still be useful for screen reader users, for example to provide additional context or accessible labels.

CSS such as display: none;, visibility: hidden; and the hidden attribute hide content from both visual users and assistive technologies. These methods should therefore not be used when the content still needs to be available to screen readers.

Instead, use a visually hidden utility that removes the content from the visual layout while keeping it available to assistive technologies.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Use visually hidden content sparingly. Prefer visible labels and instructions whenever possible.

To do

The content of the web site is written in a understandable and simple language.
All headings of your page is structured in a logical way.
All images have alt-texts, decorative image has an empty alt-text.
No video has autoplay and videos with speech contain captions.
If a user prefers less motion as a OS setting, no or minimal animation and motion should be used.