Accessability

Semantic HTML

Writing semantic HTML means using HTML tags that has a meaning. Semantic tags describes to accessibility tools what content to expect. Examples of semantic tags are <nav> and <article>. Examples of non semantic tags are <div> and <span>.

General

Make sure your <html> tag has a lang attribute that specifies the languages of the page. Set the page <title> to a descriptive text. Make sure viewport is zoomable and that text can be resized.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Descriptive title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>...</body>
</html>

WCAG level AA expects text (with the exception captions and images of text) to be able to be zoomable to 200%. Make sure that your design and styling can handle this.

Landmark elements

Use elements specific to what content they contain. Only use one <main> per page to contain the main content of that page. When using multiple landmark elements, provide a aria-label attribute with a description.

<nav aria-label="Social media">
  <!-- links to social media -->
</nav>

<header> is considered role="banner" and <footer> is considered role="contentinfo" when in context of the <body> element. Contain your page header section and footer section with these elements to help assistive tools understand your page. These roles are not applied when used inside a <article>, <aside>, <main>, <nav> or <section>.

Landmark roles

Landmark elements has default roles (the role attribute) in some situations. These roles helps screen readers to navigate to different parts of the web sites. Do not use too many landmark roles (notice, this is not necessarily the same as using landmark elements - since elements does not have a default role in all situations).

Headings

Make sure you only use one <h1> on the page. All other headings (<h2> - <h6>) should be considered as you would structure a table of content. Any headers under the <h1> should be a <h2>. After the <h2> there should be a <h3> if it is considered a subheader of the <h2>.

<h1>Main page title</h1>
<section>
  <h2>Section title</h2>
  <h3>Section subtitle</h3>
</section>
<section>
  <h2>Next section title</h2>
</section>

Different heading should be considered a priority in a structure and not necessarily have a specific styling per heading level.

Test your site

You can use pa11y, a command line tool to test your site.

npx pa11y https://www.itiden.se

To do

The <html> tag has a lang attribute with to language of the content.
The <title> tag has a descriptive text.
The viewport can be user scalable.
Texts can be zoomed to 200% without breaking the page.
Only one <main> tag is used to mark the main content of the page.
<nav> tags is used for areas with navigation.
If there are multiple <nav> tags, add a descriptive aria-label.
Landmark elements are used where applicable.
Heading elements are structured logical.