TABLE OF CONTENTS
Web accessibility refers to access to web content for all people (including those with visual or hearing impairments, etc.), regardless of the device used (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.
Since 2021 in Belgium, all public services are required to offer accessible web platforms (websites or mobile applications) in accordance with WCAG 2 AA criteria. Don't wait for this obligation to apply to the private sector to get up to speed! (opens in a new window)
- For website creation (design and development), the Minos technical framework is natively ready to accommodate various accessibility requirements. Several websites created with it have obtained the Belgian accessibility label AnySurfer (opens in a new window).
- When writing and preparing website content, there are a number of best practices to consider. Here are a few of them below.
Structure your content
The principle behind Minotaure 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. The main challenge is to enable users to quickly scan pages to find the information they are looking for in the shortest possible time.
To achieve this, there are two ways of approaching things.
Develop your own storytelling using Minos blocks
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.
Minotaure wooden blocks, used during workshops
Developing your storytelling requires taking a few rules into account to maintain consistency.
- Create consultation habits within the pages you develop, i.e., elements that recur regularly and form a “familiar universe” where users can easily find their way around. Always start with a Hero, for example, and end with a contact form, or consider content containing 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.
- Think about the tone used on your website. Do you use formal language? Informal language? Do you take a friendly, educational, or formal approach? Do you identify with we or with the company name? Once you have decided on your tone, stick to it throughout the production of your content. If you're unsure about the tone to use, base it on your audience: who are they? How do they like to be spoken to? Think about your personas (which Spade can help you define). In any case, keep in mind that not everyone on your site is an expert in your field—in other words, explain jargon, use simple sentences, and make it accessible!
- Do the same for your illustrations, as they 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.).
- Find the right block for the right content! This may sound easy when you put it like that 😃 We know that in practice, content is longer and more complex than in the approved mock-ups... that's the whole point! Summarize, your readers will thank you. Above all, think about adapting the content to the block, and if that really doesn't work, change the block. With the range of options available to you, there's bound to be one that's right for you.
- Think Mobile First: Don't forget that many of your users will be reading you on their smartphones...
Tips for making text content more readable and accessible
- Keep it short! This is what will largely determine the readability and accessibility of a page, as short sentences and paragraphs allow for a rhythmic reading pace and make the page easier to understand for all audiences. Large blocks of text are intimidating and tedious to read. Readers want to access what interests them immediately and effortlessly. So make it easy for them... and if you're lacking inspiration, put yourself in their shoes: what would you look for on your site? What would you want to see/read first?
- Add visuals to your content. They can illustrate or complement the text, making it easier to understand the ideas.
- Give each page a unique title Each page should have a unique and useful title that indicates the purpose of the page.
- Structure your content with headings. The heading levels indicated by H1, H2... H6 are used to structure the editorial content of a web page. H1 is the most important (and largest), H6 the least important. Use them on all your pages. Proper use of headings allows users to scan your content more easily and quickly and ensure they are in the right place. Example: use subheadings. They encourage the user to continue reading, but also provide structure to make it easier for the reader to understand the sequence of different ideas.
- Use short, explicit labels for your buttons (more information on the use of calls to action) A button should not contain more than three words. It should only contain one action at a time, and this action must be clearly understandable. Example: Contact us. Also, be sure to maintain consistency! All buttons that link to the same content must have the same label. Example: All buttons leading to the contact form must be labeled Contact us. Keep in mind that on a mobile phone, a button that is too long may extend beyond the viewport (the visible area of the page on the screen).
- Use enhancements to make reading easier. Words in bold, italics, numbers, etc., are all enhancements that help a person find their place from page to page. Also use elements that stand out from the ordinary—a quote, for example. Example: Use bulleted lists because they allow you to enumerate items and help readers remember ideas more easily. Remember, however, that for titles, quotes, paragraph alignment, etc., a number of settings are already defined in your site's style sheet—there is no need to add bold, underlining, or other formatting: it will be done automatically. Your site's style sheet ensures consistency and aesthetics.
- Be consistent The terms used on the site must be consistent. This makes them familiar and predictable. Example: After learning about a feature, the user will find it easier to use it again later.
Copy and paste
It is common for the content of future web pages to be written first in a word processing document (Microsoft Word or similar). The text is then copied and pasted into the content block. This often leads to a series of problems, whether functional or layout-related.
The main reason is that we don't usually copy just plain text, but an entire layout environment.
Copying text also copies information about the font used, font size, line spacing, color, etc. However, most of these elements are not necessary in the environment where we want to paste the content. This is because the typography, line spacing, style of structural elements (headings, subheadings), color, etc., are already managed by the style sheet (CSS) of your website. This is what guarantees your visual identity and a consistent graphic environment.
You should therefore always avoid importing anything other than plain text content.
Editing tips
Don’t copy and paste
The first solution is to write directly into 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 programs allow 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.
Make sure you only have one level 1 heading per page!
The first field to fill in a Minotaure block is usually its title. By default, it is set to H1. Remember to manually change it to H2 if you have already defined the main title of your page. This is a structural element that will help you understand your site in terms of accessibility, but also for search engine optimization (SEO).
Insert meaningful images
All images you upload to your website must be linked to certain information:
- They must have a clear title (this will help you find them when you want to insert them somewhere and your library contains hundreds or thousands of media files).
- They must have alternative text if they are intended to illustrate a point or if they provide information in the content of your page. If they are purely decorative, alternative text is not essential.
Alternative text
It is useful for several reasons:
- To help users with physical or visual disabilities navigate your site and understand what is on your page (since they cannot see the image, the screen reader will read its alternative text, which describes its content and provides any information it may contain).
Is your image informative or decorative? Alternative text is not always necessary.
Alternative text is an alternative to all meaningful images, i.e., all images that provide additional information to the text they accompany.
You need to ask yourself a few questions before adding alternative text:
Is my image decorative? Or does it provide information?
Example 1: an image showing a person walking their dog. This image is purely decorative. It accompanies my article and has no function.
Example 2: I add my partners' logos to the footer. The image provides information and therefore alternative text is necessary: the content will be the name of the partner. See how to add partner logos to the footer while taking accessibility into account.
Example 3: I add an image of my company's organizational chart without text. Here, the image is informative, but the alternative text is not designed to add as much description of the entire organizational chart. It will therefore be important to create text explaining the structure of my company.
Anysurfer provides more information on alternative text
To add alternative text to all your media:
- Click on Media in the Dashboard
- Add the desired information for each image
Optional
- a caption
- a description