Accessability

Accessible Content

Accessibility starts with a focus on making the content accessible.

Standards

There is a standard named "Web Content Accessibility Guidelines" (WCAG) that describes how to make web content more accessible to people with disabilities.

The guidelines are categorized into Levels (A, AA and AAA). Countries has different rules and laws on what to follow. In EU, public organizations must ensure their websites and mobile apps fulfill the success criteria for Level A and Level AA. There is also an European Accessibility Act that requires private organizations to follow accessability standards for their digital services that needs to be implemented 2025.

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.

Read more about reading levels and how to keep your content accessible at https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html

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.

Use one <h1> per page and make sure your <h2>, <h3> (and so on) appear in a logical order.

Images

Make sure you add alt-texts to your images. The alt-text should describe the what is shown on the image. If the image is purely decorative, add an empty alt tag.

If you use a CMS, make sure that alt-texts are added and that the templates prints them (validate with your developers).

<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 (like Windows, MacOS, Android and iOS) has a setting to turn off or minimize animation and motions in the user interface. When set, web sites should also respect this. If you have non essential animations, make sure to disable those if the user prefers reduced motion.

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

const hasReducedMotion =
  window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
  window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true

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.

In Safari, applying list-style: none; to a <ul> or <ol> may result in the browser not recognizing it as a list. This can hinder the experience of users relying on screen readers and other assistive technologies, as these tools depend on correct HTML structures to communicate content effectively.

To remedy this, you can use the ARIA attribute to explicitly define the role of these elements. Adding role="list" to your <ul> or <ol> tags informs assistive technologies that they are indeed lists, maintaining their semantic integrity. This is especially crucial if the list is not contained within a <nav> element, which Safari typically interprets more accurately.

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>

Hiding text and labels

Hidden text, while not visible to sighted users, can still play a crucial role in web accessibility, particularly for screen reader users. Common CSS properties like display: none; and visibility: hidden; are often used to hide content visually. However, these methods also hide content from screen readers, making it inaccessible to users who rely on these assistive technologies.

To maintain accessibility while hiding text visually, alternative methods should be used. One such technique involves positioning the text off-screen. This can be achieved by using CSS to move the text far off the left edge of the screen. This way, the text remains readable by screen readers but is not visible on the screen.

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

By adopting this approach, you ensure that important information is accessible to all users, regardless of how they interact with your site.

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.