User Experience / Admins / Career / Consultants / Experience Cloud / User Adoption

Enhance Accessibility With Salesforce UX in Experience Cloud

By Jennifer Olson

My brothers and sons are colorblind. They see the world differently, and sometimes there are things they cannot see – colors too close together on a webpage, causing them to miss important context or not see elements at all. This personal connection to color blindness has given me a unique perspective on the importance of accessibility.

Accessibility can encompass various conditions such as color blindness, low vision, vision loss, PTSD, seizures, learning difficulties, dyslexia, and more. Some are obvious, while others, like color blindness, are not so apparent. Some people may have never met anyone with color blindness, while others, like me, have families full of colorblind individuals. Although we can’t change the way they perceive colors, we can use contrast to help them identify differences in colors.

Accessibility is about giving access to humans of all abilities. We’re all different, but we all want to access information through technology. Why would we limit someone to the information we have on hand? While we can’t make it perfect, we can make modifications to extend it to people of all abilities.

Making an Experience Cloud site accessible is a purposeful and intentional act. It’s about ensuring that everyone, regardless of their abilities, can access and interact with information. Accessibility is about creating an inclusive environment where technology works for all of us, not just some of us. Through intentional design and consideration, we can bridge the gap and make the digital world accessible to everyone.

Experience Cloud includes several native features that are accessible by design, but not all components meet these standards automatically. Some accessible content features require specific setup, and if you’re not aware of them, they can easily be overlooked.

Leveraging Declarative Features in Experience Cloud

Experience Cloud offers declarative features that enhance site accessibility without requiring any coding knowledge. With the right understanding of these built-in tools, you can easily create an accessible Experience Cloud site.

Alt Text

One of the simplest ways to make your Experience Cloud site more accessible is by adding Alt Text to images in Rich Text components (Rich Content Editor). Alt Text, or alternative text, provides descriptions for images, allowing screen readers to convey the information to users who can’t see them.

For example, if you have an inviting image at the top of your portfolio that sets a welcoming tone, it’s important that users who can’t see the image still get that impression. Alt Text helps achieve this by describing the image in a way that conveys its intended effect. Without Alt Text, these users might miss important contextual information, leading to a less engaging experience.

How to Add Alt Text in Experience Cloud

Watch this full video tutorial on adding Alt Text in Experience Cloud: If short on time, skip to 3:30. Bonus tip: You can also create Alt Text in LinkedIn. Watch the video to learn more.

Not all images on a page need Alt Text. If an image doesn’t add value or context, like a decorative image of a person not relevant to the content, it doesn’t need Alt Text. When writing Alt Text, avoid redundant phrases like “image of” or “graphic of” since screen readers already convey that it’s an image. Be specific and concise; don’t use vague descriptions or unnecessary names.

If you’re unsure whether an image needs a description, it’s best to err on the side of caution and include one as a best practice.

When describing an image, it’s more effective to write something straightforward like “woman sitting on a couch with a smile” rather than detailing the couch, the room, and other specifics – unless those details are essential for understanding the image’s context.

Let’s take the example of the homepage from my portfolio (above).

Examples of Alt Text

  • Not helpful: Banner image with Jennifer
  • Better: A banner with a woman standing on the left side smiling and text indicating a job title with her name.
  • Best: A banner with a professional woman standing confidently on the left side, smiling, with text on the right side that reads, “Jennifer M. Olson, Solution Architect, Experience Cloud SME.”

Structuring Headings

Imagine navigating a webpage with your eyes closed. How would you know where to start? This is where heading structure becomes important. Headings serve as a navigation tool for everyone – those who can see the content and those who rely on screen readers. For screen reader users, headings create an audible roadmap, allowing them to skip directly to the section they need.

Using headings properly enables screen reader users to navigate by listening to a list of all headings and jumping to the desired section. This feature allows them to bypass repetitive elements like headers, menus, and sidebars, making the navigation experience much smoother.

Writers use section headings to help readers anticipate what’s coming next, highlight key ideas, and organize content logically. 

How to Structure Headings in Experience Cloud

The Rich Content Component (Rich Content Editor) in Experience Cloud allows you to format your text using the Format menu, creating a logical hierarchy with headings from H1 to H6. 

Headings act as signposts, helping users quickly find the information they need.

To structure headings, start with an H1 tag for the main title of your page. This should describe the overall topic of the page, such as “Introduction to Web Accessibility.” Use H2 tags for major sections of your content, outlining the main topics covered under the H1 heading, like “Why Accessibility is Important.” Within these H2 sections, use H3 tags for subsections to break down the content into more specific areas, such as “Legal Requirements for Accessibility.” Following that, you can further subdivide your content by using H4, H5, and H6 tags as needed.

When creating headings, keep the language clear and concise, accurately describing the content. Avoid skipping heading levels, such as jumping from H1 to H3 without an H2 in between, as this can confuse both users and screen readers. Make sure each heading accurately describes the content it introduces and avoid vague titles.

For a deeper dive into the importance of heading structure and best practices, check out the Web Accessibility Initiative.

Avoiding Text Over Busy Images

To make your Experience Cloud site more readable, avoid placing text directly over busy images. Busy backgrounds can make it hard to read the text, reducing clarity and the user experience. Instead, use overlays to separate the text from the image clearly.

For instance, on an Experience Cloud site, you can use a colored overlay, like a purple one, on part of the image and move the text to this solid area. This method improves readability by providing a distinct background for the text, making it stand out against the image.

Source: ThinkAbility

Choose Accessible Colors

As highlighted in my earlier example with color blindness, using the right contrast colors is important for accessibility. To ensure your color combinations are easy to see, use a contrast accessibility checker tool. This tool helps you determine if your color choices meet accessibility standards.

I recommend using the WebAIM Contrast Checker. It evaluates your color combinations and lets you know if they comply with accessibility guidelines.

For a tutorial on how to use this tool, you can watch my video here: Contrast Checker Tutorial. The relevant section starts at 5 minutes into the video. This will guide you through the steps to check and improve the contrast on your site, making it more accessible for all users.

Choose Accessible Text Styles

Selecting the right text style can enhance the readability of your Experience Cloud site. Use plain, evenly spaced sans serif fonts like Arial, Comic Sans, Verdana, Tahoma, Century Gothic, or Trebuchet. These fonts offer clear letter shapes and consistent spacing, making them easier to read.

For those with dyslexia, consider fonts designed to improve readability, such as Lexie Readable, Open Dyslexic, or Dyslexie. These fonts feature distinct letter shapes and generous spacing to minimize letter confusion.

Font size should generally be between 12-14 points or equivalent (e.g., 1-1.2em / 16-19 px). However, be prepared to accommodate requests for larger fonts, particularly from dyslexic readers who may find a larger size more comfortable.

Considerations for Using Tabs

Experience Cloud includes built-in accessibility features for using the tab component, such as allowing users to navigate through tabs with a keyboard (arrow keys move within tabs). Attributes are used to manage focus order, and ARIA properties help screen readers identify the active tab and other information.

However, there are additional steps you can take to improve accessibility further. Use clear, descriptive labels for tabs so users know what content each tab contains. Also, structure the content under each tab clearly, following the principles outlined previously under “Structuring Headings.”

Use CMS Controls to Pause or Stop Animations

Moving or flashing content can be distracting or overwhelming, especially for those with cognitive disabilities or visual impairments. While animations can sometimes be useful for demonstrating concepts, using them simply for visual appeal can cause accessibility issues. Providing users with the option to pause or stop animations can improve their experience.

When using the Content Management System (CMS) in Experience Cloud, include controls for stopping or pausing animations. These controls help users manage moving content according to their needs. Use moving content sparingly, only when it serves a functional purpose, such as demonstrating a process or concept. If animations are included, it’s important to provide users with the ability to control them.

How to Set Up CMS Controls in Experience Cloud

The CMS collection component has a section under ‘Layout’ that includes options for showing progress indicators and arrows, which can be used to control animations. Implementing these features allows users to navigate content at their own pace, reducing distractions and enhancing overall accessibility.

Use an Accessibility Tool

After making all the accessibility changes to your Experience Cloud site, it’s time to see if you’ve missed anything. I highly recommend using the WAVE Web Accessibility Evaluation Tool to discover any gaps. There have been times when I thought I’d added all my Alt Text, only to use the tool and find out I missed something.

The WAVE tool is great for catching those things you might overlook. For a walkthrough, check out my video tutorial – start at 8.5 minutes to see the tool in action.

Extending Accessibility With CSS and HTML

Using HTML components allows you to customize an Experience Cloud site further. When coding, always keep accessibility in mind. Use Alt Text tags to describe images, apply headers to define the structure, use descriptive hyperlinks, employ semantic HTML, and include ARIA attributes. These practices ensure your site is accessible.

If you choose to use CSS overrides, select sensible font sizes, line heights, and letter spacing to make your text logical, legible, and comfortable to read. Make sure your headings stand out from your body text, typically big and bold like the default styling. However, use CSS overrides in Experience Cloud sparingly. New releases may change the underlying code, making your CSS stop working or even break your site.

Summary

Making your site accessible is about making information available to all users. Since people process information in various ways, it’s important to provide equal access. By offering the right tools and resources, you can give everyone the tools and information they need to perform at their best.

Remember, accessibility is an ongoing effort. Regularly using evaluation tools can help identify and address any issues, promoting continuous improvement. From using Alt Text for images to proper headline structures, there are several ways to make your site more accessible for everyone.

Creating an accessible Experience Cloud site requires thoughtful design choices. It’s about fostering an inclusive environment where technology serves everyone equally.

The Author

Jennifer Olson

Jen is a seasoned Salesforce professional with a focus on crafting innovative solutions within the Salesforce ecosystem. She holds multiple Salesforce certifications, demonstrating a dedication to mastering the nuances of Salesforce technologies.

Leave a Reply