Accessibility Checklist

This is a checklist to be used to gain an overview of accessibility in a project. Additional information for each item will be found in our Accessibility guidelines.


Language attribute

<html lang="sv"> Specify a language in the <html> element.

Landmarks

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

<header role="banner"> Global menu / page header.

<nav role="navigation"> Primary navigation for example the global menu, local menu and footer.

<main role="main"> The page's main content. May only be used once per page.

<article role="article"> Article, puff or similar.

<aside role="complementary"> Related content of the article or the main content.

<footer role="contentinfo"> Contains information about the document (meta info, copyright, company info, etc).

<div role="search"> Role search should be for example in a <div> in conjunction with <form>.

Accesskeys

Enable accesskeys to quickly navigate on the page.

Semantics

Follow the guidelines for HTML5 and use a logical structure and hierarchy of headings.

Links

All links will have a distinctly focus state. Distinguishable links It should be easy to distinguish the links from other content.

Images

All images that are important for the user should have descriptive <img alt="..."> text.

Icons

Font icons should have a descriptive text and screen readers will not read out the icon itself.

Javascript

Javascript should be seen as progressive enhancement. All content must be operational and accessible without javascript.

Forms

Logical order of form elements, navigate with tab to the test your device. Labels for input and select elements <input>, <select>, etc. must have a <label> attached to it.

Dynamic content

Content that is loaded dynamically must be made clear to users with for example <aria-live> or <aria-expanded>.

Contrast

The contrast between text and background should at least meet WCAG 2.1 AA Compliant. Test the contrast with our Contrast checker.

Zoom

Zoom is not disabled.

Test

Try using only the keyboard to navigate and test with a screen reader such as VoiceOver, ChromeVox or Jaws.

400% zoom

Increases zoom requirements to 400% without horizontal scroll. Usually by browser zoom and requires web page to reflow to a single column with responsive design.

Speech input

We believe that voice will become more common as input and therefore we build stuff that not break normal speech software interaction with the site.

Target size

A minimun of 44 x 44px targets on mobile for finger targets and 24 x 24px for mouse, and stylus targets.

Orientation

Do not rely on a screen orientation. All content sholud work regardless of diffrent screen orientation.