WCAG

WCAG (in particular WCAG 2.1 AA) is the standard (guidelines) that the Swedish government turns to to when deciding if a webpage adheres to the laws about web accessability and discimination. It is therefore important that content creators that are using the components in this styleguide are aware of the implications and restrictions of components they use.

Things to consider

Headers

Background

Header elements (<h1>, <h2> etc.) are primarily used in html to create structure and organization (it can be used by assistive tools to provide in-page navigation). They are ranked from 1 (most important) to 6 (least important) and it is not recommended to skip levels, but several of the same level can be siblings.

In practice

The components have been implemented with certain contexts in mind where a specific hierarchy of headers makes sense. This means that if they are used out of context, the header levels should be revised. Headers of different levels have different styles, it is possible to style according to one level but still stick to the structure by using the correct level like this (the pattern goes all the way through).

<h2 class="h3">A slightly smaller level 2 heading</h2>

Background

Links (<a> elements) and buttons are targeted by default when navigating a page using a keyboard and by assistive tools such as screen readers. The text they contain is extra important in the case of screen readers as that is what is being read out.

In practice

Simple links should have a text that is descriptive enough to understand on its own but not unnecessarily elaborate.

  • Bad Click here
  • Ok Click here to send us an email
  • Good Send us an email

Complicated links (e.g. an <a> element that contains a title and a large paragraph) and buttons (e.g. with only an icon inside) can be supported by an aria-label attribute as such

<a href="some url" aria-label="Send us an email">
  <h2>Contact</h2>
  <p>We are happy to hear from you! Please don't hesitate to sent us an email.</p>
</a>

<button aria-label="Send us an email">maybe this is an icon</button>

Element identification

Background

Identifying an element in html is done by giving it the id attribute (<h2 id="my_title">). The id can be used to create links that scrolls directly to a given part of a page (e.g. www.example.com/index.html#my_title) or to create a binding between a form input and its label (<label for="my_input">My input</label><input id="my_input>") that is used by screen readers. Both of those cases make it quite clear that it is important to keep ids on a page unique.

In practice

Since components are created on their own the above rules are not always met on demo pages in this styleguide (components are reused and implemented as trivial as possible). Make sure there is always only one of each id present at any given time.