Accessible content isn't just about meeting compliance requirements. It's about making sure your surveys, pages, and forms reach the widest possible audience.
When you design with accessibility in mind, you create better experiences for everyone, including the millions of people who rely on assistive technologies to navigate the web.
Accessibility requirements
Accessibility isn't optional in many regions. The following regional laws all reference the Web Content Accessibility Guidelines (WCAG) as the standard for digital accessibility:
Americans with Disabilities Act (ADA) in the US.
EN 301 549 across Europe
You can read the current standard of WCAG in their document WCAG 2.1 Level AA. This provides clear criteria for making your web content accessible to people with disabilities.
These guidelines may seem technical, but the key principles can be simplified into the following four points.
Make your content:
Perceivable
Operable
Understandable
Robust
For your surveys, pages, and forms, you must design them so that your contacts can access and complete your content, regardless of the technology they use. Whether that be a mouse, keyboard, screen reader, or any other assistive device.
Screen reader compatibility
Screen readers convert your text and user-interface elements into speech or braille. They allow people with visual impairments to navigate and consume digital content. Make sure your surveys, pages, and forms work seamlessly with screen readers.
When building forms in EasyEditor, proper structure is crucial. Screen readers rely on semantic HTML elements to accurately understand and announce content. Our EasyEditor blocks are designed with this in mind, but you need to customise and add your own text thoughtfully.
Make sure your content flows in a logical order. Screen reader users usually navigate through content sequentially, so organise your blocks in a way that makes sense when read from top to bottom.
Useful links:
Typography and readability
The fonts you use significantly impact accessibility. Some typefaces are more difficult to read for people with dyslexia or visual impairments, and some are generally easier to comprehend.
Ensure you use web-safe fonts that render consistently across all devices and browsers. Sans-serif fonts, such as Arial, Helvetica, or Verdana, are usually more accessible than decorative or script fonts.
Use fonts 14px or larger for body text, and ensure there is sufficient line spacing for comfortable reading.
When you're customising your content in EasyEditor, test your font choices across different devices and zoom levels. The text should be readable when zoomed to 200% without requiring the user to scroll horizontally.
Useful links:
Images and multimedia
Every image in your surveys, pages, and forms needs descriptive alt text that conveys its meaning and purpose. This text is read aloud by screen readers and displayed when images fail to load.
When adding images with EasyEditor's image or image and text blocks, write alt text that describes what your image shows and why it's relevant to your content. For decorative images that don't add meaning, use empty alt text (alt="") so screen readers skip them entirely.
If you add a video to your form, include captions or transcripts. EasyEditor allows you to embed video content, but you're responsible for ensuring the video itself is accessible with appropriate captions and audio descriptions where needed.
Useful links:
Button and links
Avoid using images as buttons. It might seem visually appealing to create custom button graphics, but these can create significant accessibility barriers. Screen readers might not properly identify image-based buttons, and keyboard users might not be able to activate them.
Instead, use EasyEditor's Action buttons block. These buttons are built with proper semantic markup and keyboard support. You can customise the appearance of these buttons while keeping their accessibility features.
When adding links, use descriptive text that makes sense out of context. Instead of "click here" or "read more," use phrases like "download our pricing guide" or "register for the webinar." Screen reader users often navigate by jumping between links, so each link must clearly state its destination or purpose.
Useful links:
Keyboard navigation
Not everyone will use a mouse to navigate your website. Some people rely entirely on keyboards. And others use alternative devices that simulate keyboard commands.
EasyEditor's form blocks support keyboard navigation by default. However, your content structure can impact the experience. Ensure all your interactive elements appear in a logical tab order that matches the visual flow of your page.
Test your forms using only a keyboard. Try to reach every interactive element by pressing the Tab key, activate buttons and links with Enter or Space, and navigate through dropdown menus and checkboxes without using a mouse.
Useful links:
Colour and contrast
Colour alone should never be the only way you convey important information. If you use colour to show required fields, errors, or other states, also include text labels, icons, or other visual indicators.
Required fields
In EasyEditor, you can mark a field as required by selecting the Required answer check box. We’ll take care of the rest.
You must also maintain sufficient colour contrast between text and backgrounds. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. There are a lot of online tools that can check your colour combinations against these standards.
When customizing your design in EasyEditor, test your colour choices with users who have different types of colour vision. What appears clearly distinct to you might be indistinguishable to someone with colour blindness.
Useful links:
Form labels and error handling
Every form field needs a clear, descriptive label that remains visible at all times. Don’t rely on placeholder text that disappears when users start typing, it doesn’t count as a proper label, as it creates confusion and accessibility barriers.
EasyEditor automatically associates labels with form fields when you use the form blocks. Write clear, specific labels that tell users exactly what information you're requesting.
Double-click the label on a form field to enter your own.
When validation errors occur, provide clear and specific error messages that explain what went wrong and how to correct it. Position error messages close to the relevant form fields and ensure they're announced by screen readers when they appear.
Use the consent and required field indicators thoughtfully. Make it clear which fields are required before users start filling out the form, and provide clear explanations for any consent checkboxes.
Useful links: