Use plain language and avoid figures of speech, idioms, and complicated metaphors. A good rule of thumb is that text content should be understandable by a 8th grader.

Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages. Centered-aligned or justified text is difficult to read.

TL;DR

• Use plain language, preferably on a B1 level (comparable to the 1st year of high school);
• Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages;
• Only use one <h1> per page as the first heading;
• Use headings in a subsequent order;
• Do not skip heading levels;
• Use CSS to style headings, do not use heading elements just for a visual representation/styling;
• Make proper use of paragraphs to structure your text in readable chunks;
• Use descriptive text content for button, link and label elements.

Headings

It is important that headings should be used in a subsequent order. Also make sure that you do not skip heading levels.

Every page in your application should have only one <h1> element. Use it as the first heading element.

Don't use heading elements just for a visual representation/styling. Use CSS styles to style headings.

Technical implementations of headings

Example

Let's take a newspaper as an example.
<h1> The main heading (h1) is the title of the newspaper.
<h2> Each article has their own heading (h2) with optional subtitles (<h3> - <h6>).

<h1>Daily Times</h1>

<article>
  <h2>Article title</h2>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Subtitle</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</article>

<article>
  <h2>Article title</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</article>

Paragraphs

Use paragraphs (<p>) to structure your text content. Make sure to break up long chunks of text into smaller paragraphs. This will make it easier for users to read and understand the content and your content will be easier to scan.

Buttons, links and labels

Make sure that button (<button>), anchor link (<a>), and label element content is unique and descriptive.

Terms like “click here” and “read more” do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.

ARIA labels

Some CMS software provides ways to override the text inside a button, label or link. In most cases this will be called an ARIA label. The content of an ARIA label will be read by screen readers and other assistive technologies instead of the visual text.

Example

<!-- button -->
<button aria-label="Submit contact form">Submit</button>

<!-- anchor link -->
<a
  href="#"
  aria-label="Read more about British Shorthair cats"
>
  Read more
</a>