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.
Header elements (
<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.
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>
<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.
Simple links should have a text that is descriptive enough to understand on its own but not unnecessarily elaborate.
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>
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.
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.