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
• 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
• 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.

• 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.

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.).