This article is about the Modern event website builder in EventsAir (not the Legacy event website builder). For information about other ‘builders’ in EventsAir, such as the Attendee App builder or Merge Doc builder, please refer to the relevant separate help articles.
The Event Website builder in EventsAir (using the “Modern” builder option) helps you make more accessible promotional websites, in line with international best practice as outlined in the Web Content Accessibility Guidelines (WCAG 2.1).
This includes keeping four key principles in mind, namely making websites:
· Perceivable
· Operable
· Understandable
and
· Robust
…for all users, of any ability. These are sometimes referred to by the acronym “POUR”.
You are responsible for designing your websites to be accessible, following the guidelines set by the Web Accessibility Initiative (see more information from W3C at https://www.w3.org/WAI/tips/designing/).
Website design includes your content, graphics, photos, and site structure, and using accessibility features in the website builder. For example, you should:
• Add meaningful alt titles to all images
• Use headings in logical order (H1 → H2 → H3)
• Ensure sufficient color contrast between text and background
• Avoid using color alone to convey meaning
• Provide clear labels for all form fields.
• Use headings and spacing to group related content
• Use descriptive link text (e.g., “View Pricing Plans” instead of “Click Here”).
• Test all pages with keyboard navigation.
• Provide captions/transcripts for audio and video content.
• Provide clear and consistent navigation options
• Ensure interactive elements are easy to identify
Accessibility features included in the “Modern” event website builder help you apply these principles, but WCAG compliance also will depend on what you choose to apply and how.
Accessibility widget for website users
Along with accessibility features outlined in this article, and compliance features included in the website builder’s codebase and editor, you can also switch on the Accessibility Widget in your event website’s settings.
This allows site visitors to click an Accessibility Icon, and modify various settings such as buttons, text and colors to improve accessibility and/or meet their assistive technology needs. (See example screenshot below). It includes helpful options such as adjusting color contrast, enabling reading focus, enlarging text, and more.
The widget is turned OFF by default but can be turned on from the General website settings in the editor:
On a website, it looks like this:
Features to make your event website more perceivable:
Text Alternatives [e.g. Alt text for all images – you can add this in the builder]
Adaptable Layouts: [e.g. Responsive design so content adjusts to different screen sizes. This is automatic.]
Distinguishable: [e.g. You can choose fonts and colors to create sufficient contrast between text and backgrounds, so that letters and numbers are easier to read, including on buttons.]
Features to make your event website more operable:
Keyboard Navigation: [Sites created in the Modern builder can be navigated with a keyboard.]
Focus Indicators: [e.g. Interactive elements maintain visible focus outlines. ]
Time-based Media: If a video is embedded, captions and transcripts are supported (if provided by the video hosting platform).
Features to make your event website more understandable:
Consistent Navigation: Global headers and footers are used to create a predictable site structure.
Form Labels & Instructions: Form fields support labels and error messages.
Readable Content: Semantic headings (H1–H6) are applied to maintain content structure.
Features to make your event website more robust:
Semantic HTML: Clean HTML that complies with standards.
ARIA Attributes: You can make it easier for assistive technology to interpret your site by adding ARIA roles / labels.
Cross-Platform Support: Your site will be compatible with modern browsers and screen readers.
Using these accessibility features
Many of the features mentioned above – such as device responsiveness and compliant HTML code - are automatically included in any website built using the “Modern” Event Website builder.
Others, you should consider yourself when adding content, styles, and colors.
However, you can also add and customize your own additions to your site to increase accessibility, via features below:
ARIA labels for icons
Give a clear, descriptive name for interactive elements if they don’t have visible text. This helps users who rely on screen readers.
WHERE: In the icon element, click the "Settings" icon and add an Aria Label in the side panel.
Alt Titles for images
Give images a text description so that people using screen readers and other assistive devices, can understand the image's content and purpose.
WHERE: In the image element, add an "Alt Title" in the styling panel under the "Advanced" tab.
Titles for Custom Audio
Adding a descriptive title to an audio file helps site visitors, including those who use assistive technology, to understand the content of the audio and its purpose. Give your audio file a descriptive and meaningful file name.
WHERE: When uploading your file via the custom audio file feature, enable the "Title" option under the "Advanced" tab.
On the website, the file name will be displayed as the title on the audio player:
Adding captions (to audio files, or video files)
Adding captions to audio and/or video files helps all site visitors, including those who have difficulty hearing, who are learning the language, are in noisy environments etc. Adding a text equivalent of the spoken words/sound effects can also enhance attention and focus.
You can upload a VTT file, which is type of text file with a .vtt extension, offering synchronized transcriptions/captions for audio or video content. The file should include specific timecodes indicating when each piece of text should appear and disappear on screen.
To generate your VTT file, you can use an online tool such www.happyscribe.com
Search online for “how to create a web VTT file” for more information.
WHERE TO ADD – FOR AUDIO FILES:
When adding a custom audio file, you can upload a WebVTT file under the “Advanced” tab.
WHERE TO ADD – FOR VIDEO FILES:
In a Video element, upload the WebVTT file under the "Player" tab, by selecting “Captions (CC)”.
Adding a ‘pause’ option to a carousel
A pause icon gives people time to access the content, and helps flag to screen reader users that the carousel is playable. The Website Pause/Play icon is a menu of small dots and a pause/play option (see example below).
WHERE:
You can add this feature to auto playing carousels by turning the "Stop Animation" toggle to ON.
Site visitors may not always perceive errors if these are only indicated using icons or colors. There are options in the website forms to give more detailed messages for errors including specifying the required format for an email address.
Adding a “zoom in” icon to images
This feature helps site visitors to enlarge an image to examine it more closely. This may be helpful for many reasons, including when an image includes text or small details, or to make it more easily understandable for those with low vision.
WHERE:
If you enable “Open in Lightbox” in the image settings, your website will display a magnifying glass with a “+” icon over the image.
On the website, if that icon, or the image itself, is clicked/selected, the user will then see further options (at the top right of the image) to use + to zoom in, and - to zoom out.
Reminders
While event websites built with the “Modern” builder in EventsAir will include many features to meet WCAG 2.1 AA guidelines, keep the following in mind:
The focus indicator is automatically included, allowing website visitors who are navigating using the “Tab” key which page element is currently "in focus", indicated by a violet-colored outline (see example below). Consider how this may less easily visible on a dark background, or around a blue or purple colored element.
• Custom ARIA role assignment is not fully exposed in the editor, however you don’t need to add an aria-label attribute if the text is clear and visible, as browsers automatically infer the accessible name from the element’s content or value.
• Content provided by third-party embeds (e.g., YouTube, iFrames, custom code) may not always meet accessibility requirements and this is out of our control.
• You are responsible for ensuring that your written content, media, and custom code follows WCAG standards.