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
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.
The benefits
Far from stifling your creativity and making your website boring, you have everything to gain.
→ 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.
→ 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.
→ 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...
→ 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!
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.
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).
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.
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)
To add alternative text to all your media:
- Click on Media in the Dashboard.
- 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).
We recommend that you always follow the following structure within a page or piece of content, depending on your needs (a single level 1 heading per page, then level 2 headings to structure your content, which can themselves be subdivided using level 3 headings, then level 4, etc.).
In short, do not skip heading levels simply for aesthetic reasons.
<H1>
<H2>
<H3>
<H3>
<H2>
<H3>
<H4>
<H3>
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.).
→ Discover the article Digital pollution