Accessibility Checklist

This checklist can be used to gain an overview of accessibility in a project.

Language attribute

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


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>.


Enable accesskeys to quickly navigate on the page.


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

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


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


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


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


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>.


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


Zoom is not disabled.


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.


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