Skip to content

Accessible web content: Easy readability for better understanding

Keywords: , ,

Text appearance affects readability

If you create content directly on the web using a publishing tool, you may not be able to influence the appearance of the text very much. Even when formatting is available, it is usually better to stick with the default definitions: if the admin later changes the default definitions service-wide, items that deviate from the default settings will not change accordingly.

If you set out to share files on the web, you are responsible for their appearance. Nowadays, you should primarily create files designed to be read on a screen. Good readability reduces the need to print the file on paper. For example, you can follow the below checklist, which is partly based on an article about plain language (in Finnish) in the Finnish Kielikello journal and partly on the accessibility standard (a summary version of the checklist (in Finnish) is available here: Format your text clearly – text layout checklist for content providers (DOCX).)

Text appearance recommendations

  1. Use the default settings: this way, the font and font size selection are the responsibility of the service administrator.
  2. If you create files that are shared online and are not bound by any graphic guidelines, you can choose the font and font size yourself.
    1. Choose a clear, easy-to-read font for the body text. For example, Word has the much-used, display-friendly Calibri font as the default for body text. The default for the headings is Calibri Light. MS products also feature the Sitka font family, which is made especially with readability in mind. If you want to use other fonts, Georgia is another easy-to-read font. With Georgia, Arial is suitable for headings. A good rule of thumb is to only use two different fonts in one document. The two fonts can be clearly different from each other.
      • Do not select a narrow font for the body text. Some fonts are narrow by design, and many fonts have a separate narrow or condensed version. Narrow fonts are primarily designed to save expensive column inches on paper, which is not a consideration with texts published online. You can use condensed fonts in ’small doses‘ in online publications’ headings, for example, because a larger font size improves the legibility of the fonts. (Read more about using condensed fonts in a Lifewire article.)
    2. Set a distinguishable font size: A suitable size for the body text (= actual content) would be 12, for example.
    3. Set a generous line spacing: a larger line spacing helps those with reading difficulties in particular. Set the line spacing to 1.5, especially if you are creating a PDF file, because it is not possible to change the layout of the PDF file.
    4. Set a narrow column width: The column width should ideally be only 50–70 characters per line.
    5. Set the colour of the body text, i.e. the actual content text, to black: black provides good contrast with a white background. You can use other colours in headings as well as long as you have sufficient contrast. Keep to dark colours if the background is light. For example, in Word, you can check the contrast with Word’s Accessibility Checker (Tarkista helppokäyttöisyys) feature. (Contrast requirement, WCAG 1.4.3)
    6. Keep the tables simple and, if possible, fit them on one page. If you need to split a table into multiple pages, the headers should appear on every page. For screen reader users, keep the table structure simple. Use the header cell styles. (For example, Word’s Accessibility Checker (Tarkista helppokäyttöisyys) checks the table for header cells and that the table structure is not too complicated.)
    7. Use hyphenation with caution. You can always hyphenate compound words as long as you do it between two words (in Word, you can add an optional hyphen between two words). If you apply hyphenation everywhere, make sure that automatic hyphenation observes the hyphenation rules.
    8. Do not leave orphan or widow lines, or lonely lines, at the top or bottom of a page.
  3. Use hierarchical headings: provide the content with a clear hierarchy using headings and subheadings. Use heading styles. (Requirement on the presentation of the information structure, WCAG 1.3.1)
  4. Do not use justified column alignment: left alignment is the best option for readability. Consistent word and font spacing and different length lines make it easier for the reader to stay on the right line. (This is an easy way to comply with the minimum level AAA visual presentation recommendation, WCAG 1.4.8)
  5. Consider colour-blind people: Do not use colours as the only identifiers. (Requirement regarding the use of colours, WCAG 1.4.1)

For emphasis, bold is preferable to italics. (Note that a screen reader does not distinguish between bold, italicised, underlined or strikethrough text for the listener by default.)

« Back

This article was published in categories English version available, All instructions, Oamk , for Oamk staff, for Oamk students, for the University of Oulu staff, for the University of Oulu students, accessible content, UniOulu and tags , , . Add the permalink to your favourites.