🫂 Content accessibility
We at fusillo give you all the tools to create design products for everyone. That means all the people can use your product and feel welcome, understood and valued. Here’s how.
POUR principle
We follow the WCAG guidelines (opens in a new tab) that are driven by four principles:
Perceivable
All users will be able to perceive the information presented in your design - with all of their senses.
That means a large use of empathy. Also, keep in mind that people will read your content on screen - seems obvious, but sometimes it’s not. Timing, colors, size, spacing and a lot of other aspects are essential.
Take care of each of them - some users can’t see or hear, have low vision or are color blind. All the people need to have access to your content 🧡.
DO
Use captions and subtitles for videos.
DON'T
Don’t publish videos without context, subtitles or saying who is talking.
DO
Make sure your links are meaningful and precise, and stand out from the text.
DON'T
Avoid generic links as click here.
DO
Keep in mind that font face, size and weight should be nice and readable.
DON'T
Avoid fonts that are cute but hard to read.
DO
Be careful with the emojis - they can add value but the sentence must be readable without them
(example: “What a nice unicorn! 🦄”).
DON'T
Do not use an emoji in place of a word (example: “What a nice 🦄!”).
Operable
All users will be able to operate your interface: content must be meaningful and navigation must be simple. Keep in mind that the experience shouldn’t require too much effort and users should have enough time to read what you’re telling them. Use vampa components and follow these principles:
- When you write your content, think about how much time a person would take to read it and match it with the timing on screen: is it enough?
- Consider splitting your content in different paragraphs, web pages or app screens in order to be more clear
- Make accessible forms: make sure labels are meaningful and they persist during the navigation inside the field, take extra care to error messages
Understandable
Users need to understand and memorize your content easily. Focus people attention, keep it short and simple and, if you need to go deeper, use a meaningful information hierarchy.
Follow fusillo do’s and dont’s to design a fully understandable product.
DO
Try to keep your sentences up to 20 words long.
DON'T
Do not write long sentences without using paragraphs, spacing, headers or bullet points.
DO
Try to always read your content out loud: how does it sound? Good? Some users will hear it - and even
those who will read it, they will appreciate your effort to make it more clear.
DON'T
Don’t presume that it doesn’t matter if the content is long, because people can skip it: put more effort
so they can put none.
DO
Imagine that you’re writing for a kid, in terms of readability: WCAG
guidelines (opens in a new tab) suggest us to aim to lower
secondary education level - our readability guideline show you how.
DON'T
Avoid complex words and chose simpler ones when possible.
Robust
Make your content suitable for all devices and assistive technologies: users and technologies keep evolving but your content needs to remain accessible.
Test your product to see if every aspect of your content is good for different browsers, devices and if it’s good to be read by assistive technologies.
Readability
We at fusillo help you write compelling yet simple and accessible content. Keep these two goals in mind. Readability plays a huge role. Your content should be accessible to people from 9 to 15 years old. And it’s good for everyone:
- It’s easier to understand by non-native speakers
- It’s easier to be heard by people who need assistive technologies
- It’s easier for neurodivergent people
- It’s easier for people in a rush, on the bus, tired and so on
Let’s do it, then.
Keep it short and simple
Short sentences are good for all devices: remember that users are screen readers. We need our content to be short and sweet.
Moreover, let’s consider:
- Personal conditions
- External context (space and time, such as being outdoor, on the bus, with other people around, or in a rush)
- Different states of mind (curious, anxious, worried, impatient…)
Up to 20 words
Keep your sentences up to 20 words
DO
We’ve being doing this for 20 years so we are trained to be your assistants. (15 words)
DON'T
Our deep experience of the complex and diverse maket has granted us to be the best player in town to offer
our clients the best assistance they need. (28 words)
Shorter synonym
When in doubt, chose a shorter synonym
DO
Use
DON'T
Utilize
Unnecessary words
Avoid unnecessary words and be careful with prepositions
DO
Now
DON'T
At the moment
DO
We offer you an experience
DON'T
We intend to offer you an experience
Concrete and precise
Be concrete and precise, avoid vague expressions: people are more and more surrounded by “empty words” and do not pay attention
DO
Our product is 100% organic cotton and has a three-year warranty.
DON'T
Our product is innovative, competitive, efficient, unique, reliable and has extraordinary features.
Use plain language
Plain language is the shortest, most accurate and efficient way to pass information. That means choosing the information that users need and putting it in the right way.
That’s ordinary language, very close to the spoken language, and it’s not unprofessional writing.
Users need to feel understood and guided. Your content must do that.
Don’t be robotic
Don’t be robotic: your content speaks as a human being
DO
Something went wrong
DON'T
Error detected
Active verbs
Use active verbs and keep it conversational: active voice makes it clear who needs to do what and leave no ambiguity about who is responsible for an action.
DO
Create a new password
DON'T
A new password is required
DO
Pay now
DON'T
Payment needed
Sentence case
Write in sentence case. Use capital letters only for proper nouns and for the first word. That makes your content scannable and easier to read
DO
Fill the form
DON'T
Fill the Form
DO
How to reach new clients
DON'T
How to reach New Clients
Simple words
Always prefer simple words (they’re quite often the shorter ones too)
DO
Help
DON'T
Assistance
DO
Need
DON'T
Necessitate
DO
Before
DON'T
Previously
Nominalizations
Avoid nominalizations (verbs that becomes nouns)
DO
To finalize your account
DON'T
In order to proceed with the finalization of your account
DO
Your must apply for this feature
DON'T
You must make an application for this feature
Conversational
Conversational is always better. Headings are part of the conversation with your audience as well. Make clear why is important for them to do the things you’re telling them to do. That’s the case you need to work with balance between keeping it short and being exhaustive at the same time.
DO
Sign these documents to secure your account even better
DON'T
Important! Signature needed
Organize the information
Think about the people, always.
What do they need? What do they think when using your product? What’s their emotional status? Are they looking for answers? Are they experiencing trouble? Are they relaxed?
Chose the main information
We tend to write the way we think, keeping our background and our goals in mind. We might confuse the readers because we put the key point at the end of our paragraph. Let’s move it up front and be clear about what we want them to do or know.
DO
Upload your documents way sooner than the due date.
DON'T
In order to avoid delays due to server overload, you shouldn’t upload your documents too much close to
the due date.
Keep it easy to follow
People want answers and they hate loosing their time: who doesn’t? Let’s guide them with our content. Use chronological order and bullet points to better process information.
DO
Three steps to open your bank account: 1. Upload your ID (your passport is fine!) 2. Take a picture of
yourself 3. Fill the form with your contact information
DON'T
Opening your new bank account is easy! First you need to upload and ID document (your passport is fine as
well), then take a picture of yourself and last but not least remember to fill the form with your contact
information.
Design for readers
Content design helps people with their everyday tasks. Do not forget that: we need to be helpful and make their life easier. Let’s put more effort in our content so they can put none.
Use headlines
Who’s afraid of walls of text? Everyone. Even if they’re small walls. Use headlines and spacing to provide clear content.
DO
Here are your examples: - Use headlines They focus the attention - Use spacing They make
people read better
DON'T
Explaining that walls of text don’t work is useless if we don’t make examples. That’s why we are writing
this paragraph and we are showing you how to write. Use headlines and spacing because that way it would be
easier.
Use formatting wisely
Be bold when you want to emphasize something. Do not underline it if it's not a link. It confuses people. Use italic mainly when you're quoting someone. CAPS LOCK IS TOO LOUD FOR LONG SENTENCES. BOLD CAPS LOCK IS WAY TOO MUCH FOR EVERYTHING.
Use these tools wisely: they are made to stand out information, keep the rhythm, make it easy to follow. If we abuse them, they won’t work anymore.
DO
The exhibition is designed for grownups and children and it will be great for you to experience it
from different points of view.
DON'T
The exhibition is designed for grownups and children and it will be great for you to experience it
from different points of view.
DO
HERE’S YOUR E-TICKET You just need to show it at the entrance.
DON'T
HERE’S YOUR E-TICKET YOU JUST NEED TO SHOW IT AT THE ENTRANCE.
Readability scores
Let some tool help us write more clearly. Readable (opens in a new tab) is one of them. It tells you how easy to read your text is. Use it to test. Just remember that a tool can help you noticing things, but the best way to be readable is to keep in mind that people will need to understand what you’re telling them.
To sum up:
- Read the room. Be in your audience mind.
- Guide people. Help them understand. Moreover, keeping things easy for them will lead to your goals more quickly.
- Organize the information, make it clear for yourself before writingg
- Always prefer simple language and the easier alternative
- Keep your sentences short.
- Use every kind of formatting to help you design better content
- Read your content out loud before submitting it. That’s the very first step for readability. Listen how it sounds: can you read it easily? Does it sound like a human being or a robot? Can you breathe easily between sentences?
Alt-text
Alternative text describes the images you use in your content on a website to explain them and to give context. Alt text is essential for accessibility because it is read aloud by screen readers. Moreover, it displays on page if the image fails to load and it’s indexed by search engines.
Ask yourself the good questions
- What’s the point of that image?
- What is its added value to your content?
- Why is there?
Always remember to keep your content conversational and be specific about the description:
DO
Paying with xyz credit card makes it easier, you can do it in a bit like the woman in the picture is doing
DON'T
Woman paying with a credit card
Describe and be concrete
Don’t be vague and don’t fill the alt text with keywords for the search engines: alt text is indexed but it has the main purpose to guide people. Always write for them.
DO
Cardless payments make your day flawless: you can use your phone like the woman in this picture
DON'T
Credit card online banking cardless payments