Candu created UI components provide an important way for users to get information about your product application and/or website. We want as many of our customers' end-users to be able to benefit from Candu created UI.
Candu created content can meet core accessibility standards, however, just like your product or website content, it needs to be designed appropriately. For example, factors like color contrast and captions for any embedded video content are up to you to implement in line with accessibility guidelines.
Check out our best practice tips below on ways you can ensure your content meets key accessibility standards and criteria.
# 1 Setup your Design System
The Candu Styleguide allows you to set up your design system so that all Candu looks and feels seamless within your product’s native UI. From an Accessibility perspective, this is where you can ensure your base styles including color scheme (to help ensure there is sufficient contrast), font sizes and card/button styles are set up in the right way from the get go. You also have the option of locking the styleguide to ensure it can only be changed by users with the right permission levels.
Some general tips & tricks:
Make sure your color contrast levels between foreground and background colors are compliant. Use this tool to see if your color contrast meets common accessibility standards. (A contrast ratio of at least 4.5:1 must exist between text and the background behind the text, 3:1 ratio for large text.)
Make sure hyperlinks have a hover effect/underlines/different color font as this provides confirmation to pointer users & color blind users that the text is a link. Use this tool to check if your link meets accessibility standards.
Full a full list of accessibility success criteria check out this site
> For more information about the styleguide see our guide here.
# 2 Design responsive components
All Candu components can be designed to be responsive on different screen sizes or zoom levels. In the editor you can use different viewports to preview what content looks like on mobile vs. larger screen sizes as you create. You can then choose to hide elements on certain screen sizes or create specific elements that are responsive for that particular screen size.
All components can have set minimum and maximum width and height requirements and flex settings are also available to help create responsive designs. These settings allow components to be viewed at 400% zoom.
Additionally, you have the option of creating pre-built templates that your team can use to create content. You can ensure that these templates are designed with your accessibility best practices, making it quick and easy for your content to be created in the right way.
⚠️ Exception List
Please not that some advanced components cannot currently be read by screen-readers or be used by keyboard navigation:
Carousels (keyboard navigation)
Forms (both)
Overlays (keyboard navigation)
Embeds (screen readers)
At Candu we value developing accessible features and whilst we cannot commit to specific features or release dates, we are committed to helping our customers create UI that meets key accessibility standards. The above identified gaps will be included as part of our accessibility roadmap.
If you have any questions or queries about this please contact our team: [email protected]
# 3 Add Alt tags to your images & ARIA labels to your videos
If you are including any images or videos in your content design, you can make sure to add an Alt tag. This written description helps assistive technologies such as screen-readers to describe the image or video to visually impaired users.
Images
To do this you can simply highlight the image in the editor and use the ‘Alt’ option under the 'Component' tab.
ℹ️ Please note it is best practice to avoid using images of text in accessible designs as it is harder for assistive technologies to read these. If you need to use an image please make sure to include the appropriate alt tag.
Videos
To do this you can simply highlight the image in the editor and use the ‘Aria-Label’ option under the 'Component' tab.
# 4 Test your content before launch
Prior to launching your Candu content live within your product, we recommend previewing your content via the 'Share page'. You can then also embed the content in a staging or sandbox environment prior to releasing on production.
This process allows you to see what the content will look like once it is live to your users and you can test to ensure the content meets your Accessibility standards. This could include using an accessibility evaluation tool to check the content, testing directly with a specific group of users or using assistive technologies to check the user experience.
Where possible, we recommend applying any QA processes that you use on internally-created front-end UI to Candu created content.
> To learn more about previewing content, view our guide here
> To learn more about testing your content, view our guide here
# 5 Role permissions workflow
Candu has a role-based access control permissions system in place that allows you to control which of your users have the ability to publish and embed content within your product. This can be helpful when setting up workflows for testing purposes. For example, you may have a content creator finish their content and then get it reviewed and tested by another colleague before it is made live to your users.
> To find out more about our RBAC options, review our guide here.
As we continue to build additional Candu features we will think about Accessibility from the onset and we always welcome customer feedback, so if there’s anything accessibility-wise that you’d love to see from Candu, please let us know at [email protected]