Experiences by Jebbit strives to ensure that all content created on our platform adheres to WCAG 2.2 Level AA Compliance. This is the international standard for web accessibility, and meets the accessibility criteria outlined in the EAA act. We are committed to meeting these standards on an ongoing basis. Follow these steps to check your experience for accessibility and make updates as needed
Before you begin
Make sure you have editing access to the experience you want to review.
ADA compliance tools are available in the experience builder and apply to both desktop and mobile views.
Experiences by Jebbit provides accessibility tools and checks, but full compliance depends on how you design your experience.
Access the accessibility checker
In the builder map, click the three-dot More dropdown menu.
Select Accessibility Checker to view a checklist of items to address before publishing.
The Accessibility Checker is also available next to the Undo buttons within the screen editor.
Clicking Publish will trigger the Accessibility Checker, displaying any outstanding accessibility issues.
Tip: If you’re starting from scratch, consider designing with accessibility in mind from the beginning, such as using clear fonts, descriptive labels, and contrast-friendly colors.
Resolve Alt Text issues
Identify images flagged by the Accessibility Checker.
Click on the image element in question.
In the left-hand panel, locate the Alt Text field.
Enter a concise, descriptive text that accurately conveys the content of the image for users utilizing screen readers.
Resolve Color Contrast issues
The Accessibility Checker will highlight areas where color contrast does not meet compliance standards. Address these issues as follows:
Button Text Contrast: Adjust the text color or button background color to achieve sufficient contrast between the button text and its background.
Button Background Contrast: Modify the button background color or the screen background color to ensure adequate contrast.
Combined Button Text and Background Contrast: Adjust both the button text and background colors, as well as the screen background color, to meet contrast requirements.
Body Text Contrast: Change the text color or background color to enhance readability of body text.
Heading Text Contrast: Modify the heading text color or background color to ensure clear visibility.
Next steps
Review all flagged accessibility issues in the Accessibility Checker before publishing.
Add or revise alt text to ensure all informative images are described for screen readers.
FAQ
What is the function of alt text?
Alt text provides a description of the imagery on your screen. This is particularly helpful for readers who cannot see, as they can be provided a description of what is shown.
When is alt text necessary?
Alt text is only necessary when 'the image contains information.' If an image is purely decorative, like a background image, then alt text is not needed.
Can I add alt text to a secondary background image?
Presently we do not have this capability, however new accessibility-related features are released regularly, so stay tuned.
I have a color contrast issue, why is that a problem?
Proper color contrast is necessary to ensure your content is readable by all users. Specifically, ADA compliance states that the contrast between the text and background must be greater than or equal to 4.5:1 for small text and 3:1 for large text. You can use this tool to check your color contrast ratio.
What is the best practice for accessibility pertaining to forms?
When setting up a form for lead capture or anything else where a user will be inputting information, we recommend toggling on the "Top Label" function. This will allow the field description to appear above the form field when users begin typing. You can apply a Top Label to both "Filled" and "Underlined" forms.