Making my website accessible

TABLE OF CONTENTS

• The benefits
• Visual aspects
• a. Colors / Contrasts
• b. Typography and layout
• Content
• a. Formulation
• b. Get to the point
• c. Images
• d. Videos
• Indiquer un changement de langue dans un texte
• Why is this important?
• How to add a language to a word or phrase
• How to check or change an existing language setting
• If the language code is invalid
• Structuration & Storytelling
• a. Hiérarchie des titres
• b. Habitudes d’utilisation
• Information architecture & Storytelling
• a. Title hierarchy
• b. Usage habits

The benefits

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

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.

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.

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.

To add alternative text to all your media:

1. Click on Media in the Dashboard.
2. Add the desired information for each image.

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
• The alternative text added in this field is global. In other words, if you reuse this image in another block, on another page, the content will be the same. Even though in most cases this text doesn't differ from one page to another, it's possible to add a locally-scoped textual alternative, meaning making the text different only for the image added in that particular block: see the documentation on localized alternative text. If you have a multilingual site, no worries, that's been thought through too!
• The description field (see image below) is not taken into account in Minos, so there's no point filling it in. We encourage you to put this description directly in the text before or after where the image is placed (article, page, etc.). There's no need to over-inform (and only for users relying on assistive technologies). If you think a description needs to be added, it's probably because the information is important, and therefore useful for everyone!

• Do you have a multilingual site and use PolyLang (free or Pro)?

No worries, WordPress lets you translate your global alternative texts. All you need to do is enable the following feature.

1. In PolyLang's settings, click on "settings"
2. Enable it for media
3. Go back to the image library and select the image's language (it might be a logo with a different name in English than in French, or a graphic with different captions, etc.)
4. Add the image as many times as you have languages, and add alternative text if needed in the applicable language.

For more information, see configuring images for multilingual sites.

• Localized textual alternative (also called "local alternative text") This is a feature specific to Minos.

If you don't want to use the image's global alternative text, or if you want to modify/add the alternative text only for a specific instance, you can change the content of this text locally.

In every Minos block where you have the option to add an image, you can add a local alternative text associated with that image (blocks Hero, Column, Text-Image, and Image) Very specific concrete example: You want to add a chart. By definition, and according to the decision tree for the alt attribute, an image containing a chart is an informative image: it contains content that conveys information, figures, a legend, etc. It must therefore be described in detail for people who cannot see the image and/or fully understand its content.

You add a column block that will contain 3 columns. In one of them, you add the chart as an image. You don't have enough space to describe the chart in the column's content or in the global alternative text field (max 150 characters), so in this case you can:

1. add a local alternative text for the image such as "More information about the chart available."
2. and add a button/link with an accessible name like "View detailed chart" in the column to redirect to a new page that details the chart directly in the page's text (so it's visible to everyone).

When you redirect people to the chart's page, you can use, for example, a Text-Image or Image block: you can add the image and you'll have enough space to describe the chart in the "image description" or "image caption" field.

Why make the text accessible to everyone?

• Because we're not all equal when it comes to reading a chart, for example. So it's important to restate what the chart shows and add a detailed but clear reading of it.
• Because the chart may use colors that aren't accessible, and you don't have a designer on hand to rework the image.

🔥 Think carefully before adding a local textual alternative!

It will only rarely be useful, and you shouldn't add noise for assistive software, nor should you wear yourself out adding a different alternative text for every image added locally in a Minos block…

If your case is similar to the concrete example mentioned above, then you might need to use the local field. Reminder: Most images added to a website are purely decorative, they don't add any further information.

• Your image doesn't contain text? It's very likely a decorative image.
• Your image doesn't contain text, but what's in the image adds something to help understand what you're talking about? In that case, why provide the information only to people using assistive technologies? It's better to detail it in the surrounding text, next to your image, so it's clear for everyone.
• Your image doesn't contain text and it doesn't add anything beyond what the adjacent text already says? Then your image is decorative.

Use the decision tree to help you determine when the field should be filled in or not. Also prefer the general field over the local field: this field is available from the WordPress media library (see explanation above).

• Alternative text on logos
• Don't describe the logo
• If there's no text in the logo, it's simply the name of the organization, agency, or institution
• Don't start with the word "logo" or "image" or "this is an image…"
• Repeat exactly what's written in the logo, even if it includes a slogan or subtext

The logos of your partners, or even your own, are informative images! Whether or not they contain text, in every case it represents your partner's name. You must therefore add an alternative text.

• The image caption - option to make it "collapsible"

This is feature specific to the Image block: you can make the text linked to your image visible on request.

To do this :

1. enable the "Caption in collapsible text" option
2. add an accessible label to invite people to expand the text

• Watermark images and readability

Use transparent colors if you want to use styles where your image is under text (as a watermark), to ensure that the text remains legible. You can adjust the transparency of a color using the second slider in the color settings.

• The weight of images greatly impacts the loading speed of a web page.

For more details on how to resize and compress your images, please refer to our article “Digital pollution” and the “Optimize your images for performance”.

d. Videos

Videos are not accessible to everyone. Consider people who are visually impaired, hearing impaired, or simply people in noisy places or places where silence is required, who would not have access to sound.

Some tips:

• Add subtitles. Please note that these must appear in sentence form (not word for word), they must be synchronized and equivalent to the content of the video.
• Add an audio description. For purely visual elements of a video that provide information.
• Add a transcript. This transcript can be read by a Braille reader.
• Do not play videos automatically, and allow users to disable or pause videos and animated content. This applies to carousels, image slideshows, background sound, and videos.

Indiquer un changement de langue dans un texte

Why is this important?

Your website is configured in a specific language (for example, English). However, you may sometimes have a word or phrase within a text that is written in a different language; a French expression, a Dutch name, a Spanish quote, etc.

Without any specific indication, people using a screen reader (software that reads website content aloud, commonly used by people with visual impairments) will hear this passage pronounced using the accent of the website's main language, which can make it difficult to understand.

By specifying the correct language for that particular passage, the screen reader automatically switches to the appropriate pronunciation while reading the word or phrase, then switches back to the website's default language.

How to add a language to a word or phrase

1. In the text editor of the relevant block, select the word or phrase written in another language.

2. Click the "Lan attribute" icon in the editor toolbar.

3. A window opens with a few explanations and a field where you can enter the language code (for example fr for French, nl for Dutch, es for Spanish, etc.).
💡

Don't know the code for a language? A link in the window takes you directly to the official list of language codes.


4. Click "Save".

The word or phrase will now appear underlined with a dotted line and a subtle blue background in the editor. This is normal and makes it easy to identify passages that have already been marked.

This underline only appears in the editor (and in the block preview). Once the page is published, it is invisible to visitors. It is simply a visual indicator for you on the administration side.

How to check or change an existing language setting

There is no need to select the text again: simply click directly on the word or phrase that is already underlined. The same window will open, with the language code already filled in.

• To change the language: edit the code and click "Save".
• To remove the language indication (without deleting the text): click "Remove".

If the language code is invalid

If the language code you enter is not recognised, a message will appear with a link to the list of valid codes. Correct the code and try again.

Structuration & Storytelling

Si vous avez eu l'occasion de participer aux ateliers de Spade, vous connaissez déjà nos plaquettes de contenus-types Minotaure UXKit.

Ces ateliers participatifs peuvent se réorganiser en interne selon les besoins de contenus à créer.

Développer son storytelling nécessite de tenir compte de quelques règles, qui permettent de garder la cohérence.

a. Hiérarchie des titres

Le premier champ à remplir d’un bloc Minotaure est généralement son titre, et par défaut il est défini en H1.

Pensez à manuellement le passer en H2 si vous avez déjà en amont défini le titre principal de votre page.

C’est un élément structurel qui vous aidera à la bonne compréhension de votre site en terme d’accessibilité mais également pour l’indexation par les moteurs de recherche (SEO).

b. Habitudes d’utilisation

Le Storytelling, en plus du choix du ton utilisé et de la structuration cohérente des blocs de contenus, se construit autour d’habitudes d’utilisation.

• Créez des habitudes de consultation : un "univers familier" où les utilisateurs et utilisatrices se retrouvent facilement. Par exemple, commencez toujours par un Hero et terminez avec un formulaire de contact, ou envisagez des contenus contenant des liens vers d'autres pages.
• La répétition d'éléments (aussi bien de contenus que de style ou de mise en forme) permet de rappeler ce que vous jugez essentiel, de mettre en avant les actions attendues, et de répondre plus rapidement aux attentes de vos publics cibles.
• Vos illustrations aussi sont importantes pour la cohérence. Si vous utilisez des dessins, faites appels à la même personne pour toutes les images de votre site. S'il s'agit de photos, exploitez les cadrages, les sujets, les filtres (noir et blanc, sepia, etc.) de manière unifiée.

Information architecture & Storytelling

If you have had the opportunity to participate in Spade workshops, you are already familiar with our Minotaure UXKit content templates.

These participatory workshops can be reorganized internally according to the content needs to be created.

Developing your storytelling requires taking into account a few rules that help maintain consistency.

a. Title hierarchy

The first field to fill in for a Minotaure block is usually its title, which is set to H1 by default.

Remember to manually change it to H2 if you have already defined the main title of your page upstream.

This is a structural element that will help you understand your site in terms of accessibility, but also for search engine indexing (SEO).

b. Usage habits

In addition to the choice of tone and consistent structuring of content blocks, storytelling is built around usage habits.

• Create viewing habits: a “familiar universe” where users can easily find their way around. For example, always start with a Hero and end with a contact form, or consider content that contains links to other pages.
• Repeating elements (in terms of content, style, and formatting) allows you to highlight what you consider essential, emphasize expected actions, and respond more quickly to the expectations of your target audiences.
• Your illustrations are also important for consistency. If you use drawings, use the same person for all the images on your site. If you use photos, use consistent framing, subjects, and filters (black and white, sepia, etc.).