Accessibility transforms content into a bridge. When we design for inclusion, we unlock digital spaces for everyone — not just some. Every image, heading and link you publish has the power to include or exclude. As content editors, you play a crucial role.
Accessibility ensures that everyone — regardless of ability — can access, understand, navigate and interact with website content.
It supports:
People with visual impairments
Users with motor limitations
People with cognitive differences
Hearing impairments
Aging users
Temporary limitations (e.g. broken arm, bright sunlight, one hand occupied)
Your Role as a Content Editor
Our technology handles many technical aspects of accessibility. Your focus is on three core areas:
Without alt text, images are invisible.
Improper structure breaks navigation.
Screen readers often navigate by links only.
Screen readers rely on alt text to describe images to visually impaired users.
Without alt text, images are invisible.
"image.jpg"
"banner"
"photo123"
"A pair of new white sneakers"
"Download PDF icon"
"Empty shopping cart symbol"
What information does this image communicate?
Is it decorative or informative?
Would I understand the context if I couldn’t see it?
Be concise but descriptive
Avoid "image of" (screen readers already announce images)
Translate alt text per language version
Leave empty alt text ("") only for purely decorative images
Storyblok offers to "Generate Alt Text" in the image editor. Make sure to review the text.
Remember: Make sure you translate the alt text of each image on the page into the language of that page!
&w=1920&q=75)
Headings create structure for:
Screen reader navigation
SEO
Scannability
Logical comprehension
Improper structure breaks navigation.
Always follow:
H1 → H2 → H3 → H4 → H5No skipping levels like this:
H1 → H3 → H2 → H4 → H5Or missing H1:
H2 → H3 → H4 → H5Use headings for visual styling only
Jump from H1 to H3
No H1 at all
Example of incorrect structure:
Headline (H1)
Latest News on Article Subtopic (H3)
Article Subtopic (H2)
Headline (H1)
Article Subtopic (H2)
Latest News on Article Subtopic (H3)
Keep paragraphs short
Avoid large unstructured text blocks
Use semantic blocks (article, section, etc.)
Only use the formatting options available in the Rich Text Editor. Any formatting that is not allowed will be removed when the code is sanitized.
Use the a browser plugin (for example this one) to check your heading order!
Screen readers often navigate by links only.
If your link says:
"Click here"
"Read more"
It has no meaning out of context.
"Click here"
"Read more"
"Learn more"
"Download 2025 price list"
"Read about sustainability goals"
"Learn more about our team"
If you remove surrounding text, does the link still make sense?
If not → rewrite it.
Most Storyblok components with links automatically create a link label. However, sometimes you need to create the link text manually. This input field is labelled 'Link Label'.
&w=1920&q=75)
Use proper bullet or numbered lists instead of manual formatting.
Ensure text on images contrast meets WCAG standards.
The WAVE browser plugin (download here) shows you if your image-text combination lacks contrast.
Only use the formatting options available in the Rich Text Editor. Any formatting that is not allowed will be removed when the code is sanitized.
&w=1920&q=75)
Before publishing, ask yourself:
Have I added meaningful alt text to every image?
Does my page follow logical hierarchy (H1 → H2 → H3)?
Are all links descriptive and understandable out of context?
Did I use proper list formatting?
Is the content understandable without relying on color alone?