TABLE OF CONTENTS

<aside>

A good website is an accessible website, a website where as many people as possible can successfully access the information provided.

Web accessibility concerns access to web content for:

• all people (including those with visual or hearing impairments, etc.)
• regardless of the device used to access it (mobile phone, tablet, etc.)
• and their environment (noise level, lighting, etc.)

The challenge is therefore to take into account all viewing conditions when creating your website and its content.

</aside>

The benefits

Far from stifling your creativity and making your website boring, you have everything to gain.

<aside>

→ Complying with the law

In Belgium, the law requires all websites and mobile applications of public bodies to be accessible. This requirement has been in force since June 23, 2021 for mobile applications, and since September 23, 2021 for websites.

</aside>

<aside>

→ Improve your image

A company's reputation is partly determined by its website. If it is properly accessible to all internet users, this can only be positive for your overall communication. This will enable you to fulfill your ethical commitments.

</aside>

<aside>

→ Expand your audience

An accessible website is able to welcome and satisfy a larger number of people. Keep this in mind: seniors, people with color blindness, visual impairments, dyslexia, etc., represent about 25% of the people you want to reach...

</aside>

<aside>

→ Boost your SEO

An accessible website is extremely well structured, both in terms of its semantic structure (the code) and its content. It is a website that has worked on its wording to ensure that it can be understood by everyone. Its content is clear, consistent, and well constructed.

Everything that search engines look for and love!

</aside>

Visual aspects

There are accessibility requirements for people with visual impairments. Some people have low contrast sensitivity (often older people) or cannot distinguish between all colors (a condition known as “color blindness”). In addition, content must be readable by everyone, even in different lighting conditions.

One solution is to ensure sufficient color contrast.

a. Colors / Contrasts

Some tips :

• When creating your graphic identity, use existing tools to check that your color contrasts are sufficient (https://colourcontrast.cc/) (opens in a new window). Keep in mind that level AA is an indicator of the minimum accessibility requirement.
• Ensure that essential information is not conveyed solely through color. Use icons, symbols, or notifications in addition to colors.

b. Typography and layout

Decorative fonts can be more difficult to read for people with disabilities. If you use them, limit their use.

Some tips :

• Avoid condensed or decorative fonts that are difficult to read, or limit their use to short, easily recognizable elements.
• Use sufficient text sizes for both readability and information hierarchy (e.g., very large titles or subtitles that group several sections of text together to indicate that they belong to a common theme).
• Feel free to use lists (rich text), images, illustrations, audio, and symbols to clarify your content
• Text written in capital letters will be less readable for everyone
• Line spacing should be at least 1.5
• Prefer left-aligned text, especially for long content

Content

The Minotaure principle is to make the most of the considerable flexibility given to writers to create content that is appealing, clear (and concise); in short, enjoyable to read.

a. Formulation

Think about the tone used on your website (in English, tone of voice). Do you tend to use formal language? Informal language? A friendly, educational, or formal approach? Once you have decided on your tone, stick to it throughout the production of your content. If you are unsure about the tone to use, think about your personas (which Spade can help you define).

A few tips :

• Avoid overly long lines of text.
• Write clear and concise content.
• Explain acronyms when you first use them.

b. Get to the point

The mobile-first approach involves designing a website's content, structure, and layout with the smallest screen size in mind. This approach, promoted by Spade, ensures a responsive website (one that adapts to all screen sizes, including mobile, tablet, and desktop views), but that's not all: it also and above all involves thinking about the best way to communicate. It is easier to adapt content and layouts from a mobile view to a desktop view than the other way around, in which case it is often necessary to cut content. This methodology influences both content and layout.

Short, easy-to-understand texts Getting to the point when writing your texts allows you to communicate more effectively by getting rid of the superfluous. In addition, some people have difficulty understanding information. This may be because they have an intellectual disability, but this is not necessarily the case. Easy-to-Read & understand language aims to make this information easily accessible.

<aside>

Easy-to-Read & understand

This is a language that can be understood by everyone. There are [rules to follow](https://www.unapei.org/wp-content/uploads/2018/11/ Information-for-all-European-rules-for-easy-to-read-and-understand-information.pdf) (opens in a new window).

</aside>

Copying and pasting

The content of future web pages is often first drafted in a word processing program (Microsoft Word or similar). The problem is that when you copy and paste, you don't just copy plain text, but an entire layout environment.

Copying the text also copies information about the font used, the font size, line spacing, color, etc. However, these elements are not necessary in the final environment.

Some tips :

• Don't copy and paste: the first solution is to write directly in the appropriate blocks: this allows you to create or adapt your content according to your own environment.
• How can you avoid problems if copying and pasting is unavoidable? If you still need to copy and paste, it is best to use an intermediate tool that does not retain the layout. This could be a plain text editor (Notepad on Windows, TextEdit on Mac), or an HTML code editor (Atom, SublimeText, etc.). Some software allows you to do a “special” paste that will automatically remove tags: this is the case with TextEdit on Mac, with the Paste and Match Style option.

<aside> 🤗 Tip If you copy your text directly into the “Text” tab of the block (rather than “Visual,” which is the default), your text will be pasted without styles. Handy!

</aside>

c. Images

Alternative text can be read by screen readers and is displayed by browsers if the image fails to load. It plays an important role in your site's SEO, as Google uses it to index images.

<aside>

Do I need to provide alternative text for every image on my website?

No, you don't need to add alternative text for images that are purely decorative, or where the alternative text would be redundant with the associated text content. If the information is available on the page, the image is considered decorative.

Still not clear?

→ You will find the decision tree for the alt attribute here (opens a new page)

→ Anysurfer’s advices (opens a new page)

</aside>

To add alternative text to all your media:

Some tips:

• Use a single sentence that provides information (maximum 150 characters).
• Include a keyword in the alternative text, at least for featured images or the first image in your article/content (for SEO purposes).
• Don't start with “This is an image of...”, as this is unnecessary because screen readers indicate to users that it is an image
• If your alt text is longer than 150 characters, you will need to add a long description and mention in your alt text that a long description follows.