A great website is one that everyone can use. Whether your visitors are navigating with a screen reader, getting around with a keyboard, have low vision or colour blindness, or just prefer a clearer layout, the choices you make as a website builder shape their experience.
This guide walks you through the accessibility features built into Rocketspark, plus the best practices you can apply to your own site today.
Want the full picture of where Rocketspark stands on accessibility, what we've shipped, and what's coming next? Have a read of our Rocketspark accessibility statement.
In this guide:
- Built-in accessibility features
- Readability: fonts, sizes, spacing and colour contrast
- Writing and content best practices
- Images, links, and media
- How to test your site for accessibility
- Optional: third-party accessibility widgets
- Areas we're still working on
Built-in accessibility features
These are baked into every Rocketspark website. You don't need to switch them on, they're just there, helping your visitors out behind the scenes.
Skip to main content link
Keyboard and screen reader users can jump straight past the navigation and land on the main content of each page. It saves them tabbing through your menu every single time they load a new page. Small change, big difference. Read more: Skip to main content accessibility
Focus indicators
When someone navigates your site with a keyboard, they need to see exactly where they are on the page. Focus indicators give a clear visual outline around whichever link, button, or form field they've landed on, so there's no guessing. Read more: Focus indicators accessibility
Screen reader-friendly logos
Your logo is often the first thing people interact with, so we've made sure assistive technology can identify it properly with accessible names and roles. Screen readers will now announce your logo the way you'd want them to. Read more: Making your logo accessible
Site language
Setting the right language attribute on your site helps screen readers pronounce your content correctly. It tells assistive technology whether to read the page in English or whatever language suits your audience. Read more: your website language
Readability: fonts, sizes, spacing and colour contrast
How your text looks matters as much as what it says. The right sizes and spacing make a real difference for people with low vision, dyslexia, or anyone reading on a small screen.
You'll find these settings in your Change Design section, under Headings & Paragraphs. Or, you can edit the settings per stack via the "stack design" settings.
Recommended font sizes
- Paragraph font: 16px
- Small heading: 24px
- Medium heading: 32px
- Big heading: 40px
You can go bigger if it suits your design. The important thing is that there's a clear difference between each heading size, so visitors can see the hierarchy at a glance.
Choose an accessible font
Some fonts are easier to read than others. If accessibility is a priority, stick with these for body text and headings:
- Source Sans Pro
- Helvetica
- Lucida Sans
- Arial
- Tahoma
- Verdana
Decorative fonts are great for the odd headline, but they shouldn't carry the bulk of your content.
Line height and letter spacing
Tight, cramped text is hard work for everyone. To adjust:
- Go to Change Design then Headings & Paragraphs
- Click the three dots next to each heading or paragraph setting
- Adjust the line height and letter spacing to give your text room to breathe (A line height of around 1.5 for body text is a solid starting point).
Colour and contrast
Text needs enough contrast against its background to be readable. The WCAG standard is a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
You can check any colour combination with free tools like the WebAIM Contrast Checker. Pop in your text and background colours and it'll tell you whether you pass.
Common pitfalls to watch for:
- Light grey text on a white background (almost always too low contrast)
- Coloured text sitting on a busy image
- Pale buttons that blend into the background
- Footer text that's too soft against the footer colour
If something feels hard to read, it probably is. Trust your instincts and adjust.
Writing and content best practices
Use clear, descriptive headings
Headings aren't just visual styling. Screen readers use them to build a map of your page, and visitors scan them to find what they need. Use Heading 1 once per page for the main topic, then Heading 2 for major sections, Heading 3 for subsections, and so on.
Skipping levels (jumping from H1 to H3, for example) can confuse assistive tech, so keep the order tidy.
Make link text meaningful
"Click here" tells someone using a screen reader absolutely nothing. Write link text that makes sense on its own.
- ✅ "Read our pricing page"
- ❌ "Click here for pricing"
Keep your language plain
Short sentences. Familiar words. The same friendly tone you'd use chatting with a neighbour. Plain language helps everyone, including people with cognitive differences, non-native English speakers, and anyone in a hurry.
Don't rely on colour alone
If you're highlighting something important, don't just make it red. Add an icon, bold the text, or use words like "required" so people with colour blindness still get the message.
Images, links, and media
Add alt text to every image
Alt text is a short description of what's in an image. Screen readers read it out, and it also shows when an image fails to load. To add it in Rocketspark, click your image and pop a description into the alt text field.
A good alt text is:
- Specific: "Brown labrador puppy chewing a tennis ball" beats "dog"
- Brief: One short sentence is usually plenty
- Useful for the context: Describe what matters about the image on that page
- Empty for decorative images: If the image is purely decorative, you can leave the alt text blank so screen readers skip it
Learn more about adding alt text to images.
Avoid auto-playing audio or video
Sudden noise startles people and can be a real barrier for screen reader users. If something has to play automatically, mute it by default and give people an obvious way to stop it.
How to test your site for accessibility
You don't need to be an expert to spot the most common issues. A few quick checks will tell you a lot.
Try navigating with just your keyboard
Put your mouse aside and use the Tab key to move through your site. You should be able to reach every link, button, and form field in a sensible order, and you should always be able to see where you are thanks to the focus indicator. Use Shift + Tab to go backwards and Enter to follow a link or press a button.
If the focus disappears, gets stuck, or jumps around in a weird order, that's something to flag.
Listen to your site with a screen reader
Screen readers come built in to most devices, and giving yours a try is one of the most eye-opening things you can do.
- On Mac: Turn on VoiceOver with Cmd + F5, then use the arrow keys to move through your page. The same shortcut switches it off again.
- On Windows: Narrator comes built in. Switch it on with Windows + Ctrl + Enter. For something a bit more powerful, NVDA is a free, well-regarded screen reader you can download.
Listen out for things like images with no description, headings being read out in a confusing order, or links that just say "click here" or "read more" without any context.
Run a quick automated audit
A browser extension can pick up the obvious issues in seconds. The WAVE Web Accessibility Evaluation Tool is a free, well-respected option that flags missing alt text, low colour contrast, dodgy heading structure, and more. Install it, open your site, and click the extension icon.
Automated tools won't catch everything (about a third of accessibility issues need a human eye), but they're a great starting point.
Get a professional audit
If you need a thorough, expert review (for compliance, for a high-profile project, or just for peace of mind), it's worth getting a proper audit done. Access Advisors are a Kiwi accessibility consultancy who can review your site against WCAG, work with their disabled research panel, and give you a clear list of what to fix and how. Get in touch with them directly for a quote.
Optional: third-party accessibility widgets
Some site owners like to add an accessibility widget that gives visitors extra controls (font sizing, contrast modes, readable fonts, and so on). Tools like UserWay work with Rocketspark and can be added through your tracking code section.
A widget isn't a replacement for good accessibility practices on your site, but it can give visitors some handy extra options. Read our guide: How to add UserWay to your website
Areas we're still working on
We're being upfront about this. Some parts of Rocketspark aren't fully accessible yet, but they're on our roadmap. If any of these are critical for your project, here's what to do in the meantime.
Forms
Our contact forms don't yet have fully accessible error states for screen reader users. We're working on it, but if accessible forms are a must-have for your site right now, we'd suggest embedding a third-party tool like Jotform, which has strong accessibility features built in. Jotform can be added to any Rocketspark page using an embed code block.
Footer colour contrast
The default footer settings sometimes fall below the recommended contrast ratio. In the meantime, you can manually adjust your footer colours to lift them above the 4.5:1 threshold.
Map embeds
Embedded Google Maps don't always have proper titles for assistive technology yet. If you're using a map, add a short text description of your location nearby so the information isn't lost.
Social icon labels
Social media icons need accessible link labels, so a screen reader can announce "Facebook" or "Instagram" rather than just "link". We're rolling this out as part of the roadmap.
The full list, with the latest progress, lives on our accessibility statement, which we keep up to date.
Need a hand?
Accessibility can feel like a lot when you're first getting into it, but every small change you make helps real people. If you've hit a wall, spotted something on Rocketspark that's tripping people up, or just want to chat through what to focus on, drop our team a line at support@rocketspark.com. We'd love to help.