Accessibility

At SVTi we follow the Web Content Accessibility Guidelines (WCAG) 2.1 AA to ensure that all pages on SVT are accessible for all users. This is a quick guide to get you started.


About 20% of the Swedish population between 16 and 84 have some kind of disability, make sure your project is accessible so all users can use your site. Think accessibility early in the project.

Use our Accessibility Checklist for a quick way to get a picture of how accessible your project is.

We conduct regular workshops together with the the organisation Funka to get their input regarding accessibility and usability.

Under some sections, such as color and buttons, you will find further information on accessibility and WCAG regarding the same.

Contrast

The contrast between text and background should at least meet WCAG 2.1 AA Compliant. WCAG 2.1 AA depends on the size of text.

  • The color contrast between text and background should be at least 4.5:1 for text less than 18 pt.

  • Text that is larger than 18 pt (or text that is bold and larger than 14pt) will have a color contrast ratio of 3:1.

Headlines

Headers are used to convey document structure information with a correct hierarchy. There should be no space in the heading hierarchy and subheadings should always be linked in content to the title above. Remember that HTML elements <article>, <section>, <aside> should contain a <h1>. Test with an outline tools to ensure that the heading structure seems logical.

  • Follow the HTML5 standard.
  • The top level heading should explain the content of the page.
  • Separate semantics from visual appearance.

Example. Separate semantics from visual appearance.

<h1 class=”svt_h1”>
  <span class=”svt_h2">Uppdrag Granskning</span>
  Köper svarta adresser för att kringgå systemet
</h1>

Links

More info about links

Buttons

Buttons are used for clickable elements that perform/influence something on the current page, when activated by the user. Use the HTML element <button> and it will work with both mouse and keyboard. If you have good reasons for not using <button> you can use the attribute <role="button"> on other HTML elements. There are several ARIA attributes that can be used to clarify the button function and condition. For example <aria-pressed> is used to show in what state a "toggle" switch is in, <aria-haspopup> for a button which affects something not in direct contact with the button. Buttons must always have an available self-explanatory text. For most buttons, this will be the button text. In some cases, such as the icons used as buttons, you can use the attribute <aria-label> or <aria-labelledby> or with the help of a text that may be hidden, but visible to screen readers.

Focus

When an element receives focus, it should be clear and easy to distinguish. Ideally, both the shape and the color change so that even color-blind user can see where the focus is. Use the same color and pattern throughout the service.

More info about focus

Access Keys

Access Keys should be present and could be used with a keyboard shortcuts.

Read more at about access keys

Changing content dynamic

Content added dynamically must be made clear to the user. As more elements are loaded into a list, for example a "view more" feature, focus should be on the first element in the loaded content or if its contents are directly adjacent to the button/link. <aria-live> can be used to make the user alerted to changes on the page.

Interconnected elements

Buttons that open or "toggle" other elements should have this in direct access in the HTML structure alternatively move focus there (if appropriate). <aria-controls> helps to identify which element is affected by the button and <aria-expandend> notify the users if the element is open or closed

Make links, clickable areas and menus available

Links and clickable areas should be so large that it is easy for users to use them no matter what you use to navigate. For example, mouse, keyboard or your fingers. Select the same type of links in the same way across the site to increase understanding what a click means.

Landmarks

Use the ARIA role to increase the ability to navigate with screen readers and assistive technology. You can receive warnings when validate your HTML5 but still it´s necessary to use landmark roles.

Example

<header role=”banner”>
  <nav role=”navigation”>
      <form role=”search”></form>
  </nav>
</header>
<main role=”main”></main>

Tabindex

If possible use only tabindex="0" and tabindex="- 1". Use other tabindex cautiously as the semantics of the page should be good enough to handle the order they are tabbed.

Images

All images must have an explanatory text to mediate content to our visitors who can not access the content of an image visually. Alt text can be presented in two different ways Within the alt attribute of the <img> element. Within the context or surroundings of the image itself. All images should have an alt attribute, but depending on the context in which the image is, it may be ok to have an empty alt attribute.

Read more at WebAIM: Alternative Text

Text

Text and especially body text should be easy to read and should not be too wide (between 60-70 characters). Font size for body text should be at least 16px.

WCAG Guidelines

There are WCAG guidelines both for desktop and for mobile, so please ensure that both are covered so that all our users can experience all the great stuff that we do.