Tips for writing accessible web texts

Adapt your language

Below you can find some general tips to use when working on the language of your text.

• Write in a polished, simple and comprehensible manner (Swedish Language Act).
• Adapt the text to the visitor’s needs and existing knowledge.
• Adopt an appropriately personal tone, using informal titles.
• Use active verbs.

Writing Clearly and Simply – webaim.org

Give your text a structure

A visitor to a website often has one or more concrete tasks they have come to the website to solve. By creating easily browsable pages you can help the visitor find their way around quickly.

Tips for creating an overview and structure on a webpage:

• Formulate a relevant title (main heading) for the webpage.
• Provide the visitor with a summary of the most important points in the introduction to the page.
• Write informative headings and subheadings that lead the reader through your text. When a text has informative headings, those headings will form a summary of the text which makes it easier to follow for the visitor.
• Use a logical and well thought-out outline for your text. Start with the most important points for your target group.
• Use bullet points to make it easier to get an overview of lists.
• Start a new paragraph frequently; around three lines per paragraph make a text easily readable while also facilitating reading on a mobile phone, where there are many more lines in the same paragraph.
• Write simple sentences, ideally in line with the principle of “one idea, one sentence.”

Avoid

• Negations. The word “not” is difficult for our brains to process. Instead, write “Remember to...” instead of “Don’t forget...”
• Bold text. Only use bold text in exceptional cases, for example to emphasise individual words.
• Italics.
• Abbreviations. Readability improves when words are written out.

Format your text in the content management system (CMS)

Remove text copied over from the formatting code

If you are going to copy a text from a Word document and paste the text into the editor of your CMS, for example, it is important to first remove any formatting code. If you don’t, it could cause problems for visitors using assistive technology. To paste unformatted text into the editor of your CMS, use the command ctrl + shift + v (if you are using a PC with the Windows operating system) or command + shift + v (if using a Mac computer).

Remove empty paragraphs and empty headings

Ensure you remove any empty paragraphs and empty headings from your webpages. People sometimes think it looks more attractive to have two line breaks instead of one, for example, but this creates an empty paragraph, which leads to accessibility problems.

Headings

Headings and subheadings should be correctly HTML-coded to ensure they are read correctly by assistive audio technologies. However, you do not as a rule need to edit the HTML code for the headings to be correctly coded. Take a look at the editor of your CMS and check whether there are any predefined formats for headings and subheadings.

Bullet points

Use bullet points when a list includes three or more words/elements/links. It is important for bullet points to be correctly HTML-coded. Take a look at the editor of your CMS and check whether you can find any predefined formats for creating either bullet points or a numbered list.

Only use a numbered list when the points in the list follow an actual sequence, as shown in the following example instruction:

1. Start the computer
2. Enter your user name
3. Enter your password
4. Click on OK

Links

It is important for a link to be relevant, informative and specific. Visitors should understand where the link is taking them and what content is to be expected.

Read more about how to create accessible links

Specify language changes in the HTML code

If the webpage contains content in a different language to the page’s main language, this should be specified in the HTML code. If it is not, a Swedish word on a website that has English as its main language could, for example, be read out using English pronunciation instead of Swedish.

In order to specify language changes in a webpage’s text, you need to activate full HTML mode in your CMS editor. You also need to be familiar with different language codes.

Examples of HTML code for language changes

The following example shows how the code may look for a website where some Swedish words deviate from the page’s main language:

<span lang="sv">Text på svenska</span>

In the example above, the language code “sv” is used to indicate the Swedish language.

See the list of current language codes – w3schools.com

Explain abbreviations in the HTML code

Try to avoid abbreviations as far as possible; write out the words instead. If you find yourself in a situation where for some reason you need to write an abbreviation, you can use HTML code to explain what that abbreviation stands for. The visitor can then hold the pointer over the abbreviation and see an explanation. Here is an example of how this looks: EU.

Examples of HTML code for clarifying an abbreviation

<abbr title="European Union">EU</abbr>