Skip to main content

Let’s discuss the concepts of “web accessibility” and “inclusion,” terms that have become increasingly prominent in recent discussions. In essence, it involves ensuring that individuals with diverse abilities can effectively utilize your website and online tools. However, the question remains: how can this concept be effectively implemented in a business setting?
Managers face a variety of challenges here. These include but are not limited to, the interpretation and implementation of intricate technical standards, the strategic allocation of limited resources, and the mitigation of potential legal liabilities (driven by two legal acts: WCAG (Web Content Accessibility Guidelines) and ADA (Americans with Disabilities Act).
The intricacies involved in implementing and maintaining web accessibility within Salesforce ecosystems, particularly within Experience Cloud environments present obstacles to compliance.

Infographic titled "Challenges Faced by Managers," listing technical standards, legal liabilities, and resource allocation issues.

This blog post aims to shed light on these challenges and provide practical strategies to help you overcome them, transforming your Salesforce platform into a truly inclusive and compliant environment.

Web Accessibility Standards: Making Experience Cloud Truly Inclusive

For managers overseeing WCAG compliance within Salesforce environments, the Experience Cloud (formerly Community Cloud) demands particular attention. Why? Because it’s often the public-facing gateway to your organization. When customers, partners, or even employees interact with your digital presence, Experience Cloud sites like support portals, self-service portals, partner portals, content management systems (CMS), e-commerce portals, and knowledge bases are frequently their first point of contact.

Graphic titled "Overview of Experience Cloud Elements," displaying interconnected elements: Knowledge Bases, E-commerce Portals, Support Portals, and more.

Experience Cloud holds significant importance in the context of WCAG for several key reasons:

  • Experience Cloud sites are often used to create portals for customers, partners, and other external stakeholders. This means they’re a primary point of interaction between your organization and the public, including people with disabilities. Therefore, ensuring these sites are WCAG compliant is crucial for avoiding discrimination and legal risks.
  • A large portion of customer interactions happen online. If your Experience Cloud site is inaccessible, you’re effectively excluding a significant portion of potential and existing customers. This can lead to lost business and damage your brand reputation.
  • Experience Cloud is also used for partner portals and internal employee communities. Ensuring these platforms are accessible is vital for fostering inclusive partnerships and empowering employees with disabilities.
  • Demonstrating a commitment to WCAG compliance through your Experience Cloud sites enhances your brand reputation and reinforces your commitment to social responsibility.
  • Many organizations have legal obligations to provide accessible online experiences.
Infographic highlighting the importance of WCAG compliance in Experience Cloud, featuring six key benefits in a circular layout.

Crafting Inclusive Experiences: Web Accessibility Design in Salesforce Experience Cloud

When designing for web accessibility in Salesforce Experience Cloud, it’s vital to move beyond basic functionality and focus on creating truly inclusive experiences. This involves meticulous attention to visual and interactive elements that can significantly impact users with diverse needs.

Color and Visual Clarity

Color is critical in conveying information, but it must be used responsibly:

  • First and foremost, color contrast matters a lot. Ensure that text and interactive elements maintain sufficient contrast ratios against their backgrounds, adhering to WCAG guidelines.
  • Avoid using color as the sole means of conveying meaning. For example, do not rely solely on a red button to indicate an error; supplement it with descriptive text.
  • When placing text on top of non-solid backgrounds, ensure readability by using overlays or adjusting the contrast to prevent text from becoming obscured.

Motion and Animation

Animations, while visually engaging, can pose challenges for users with vestibular disorders or photosensitivity. Minimize or eliminate animations that flash or blink more than three times per second. For animations exceeding five seconds or those that repeat, provide clear controls to pause, stop, or hide them. The Salesforce Lightning Design System (SLDS) Carousel, with its built-in pause button, exemplifies an accessible approach to animation.

Interactive Elements and Forms

Visual focus states are essential for keyboard navigation:

  • Design clear and distinct visual cues to indicate which element has focus, enabling users to navigate seamlessly.
  • Forms must be designed with accessibility in mind. Always include visible labels to provide context for each field.
  • Design helpful error messages that are both informative and accessible, guiding users towards successful completion.
  • Implement clear guidance and safeguards to prevent errors.
  • Ensure that all states of form controls, such as hover, active, and disabled, have distinct visual differences.

Content and Structure

Alt text is crucial for providing context to images for users who rely on screen readers. Craft concise and descriptive alt text that accurately conveys the image’s purpose. Accessible text styles are equally vital. Use clear and readable font styles, avoiding overly decorative fonts that can hinder readability. Semantic HTML provides structure and context for assistive technologies. Using proper HTML tags, such as header tags (H1, H2, etc.), to structure content logically helps screen reader users navigate and understand the content.

A diagram outlining accessibility enhancements in Experience Cloud, focusing on design elements like color, content, motion, and interactivity.

Integrating these accessibility considerations concerning design into the Experience Cloud design process allows for the creation of digital experiences that foster inclusivity and enhance the user experience for all individuals.

The Foundations: Coding for Web Accessibility in Experience Cloud

Prioritizing accessibility in your code goes beyond surface-level design and dives into the structural integrity of your code.

Navigation and Structure

  • Using consistent navigational elements across your Experience Cloud allows users to quickly understand the site’s structure and navigate efficiently, regardless of their abilities.
  • Applying proper heading nesting and order (H1, H2, H3, etc.) is equally important. This creates a logical content hierarchy that screen readers can interpret, allowing users to understand the page’s structure and navigate effectively.
  • Labeling landmark regions using ARIA landmarks (e.g., <nav role=”navigation”>, <main role=”main”>) provides additional context for assistive technologies, enabling users to quickly jump to specific sections of the page.

Interactive Elements and Focus

Using a logical tab order that matches the reading order is essential for keyboard navigation. In left-to-right languages, this means left to right, top to bottom; in right-to-left languages, right to left. This ensures users can navigate through interactive elements predictably and intuitively. Using visible focus indicators for all interactive items provides clear visual feedback to users navigating with a keyboard, indicating which element currently has focus.

Leveraging Salesforce Tools

In Experience Cloud development, particularly when building custom components, Lightning Web Components (LWC) is the preferred way to build UI with Salesforce. The Lightning Component Framework provides a suite of pre-built, fully functional components based on the latest Salesforce Lightning Design System (SLDS) component blueprints, which adhere to relevant accessibility guidelines. Wherever possible, use these existing components. This saves development time and ensures a baseline level of accessibility. By relying on these pre-built components, you can leverage Salesforce’s commitment to accessibility and build robust, inclusive experiences.

Diagram outlining strategies for enhancing accessibility in Experience Cloud, featuring navigation, Salesforce tools, content hierarchy, and interactive elements.

Content for Everyone: Writing for Web Accessibility in Experience Cloud

Accessible content is fundamental to an inclusive digital experience, ensuring that information is not only available but also understandable to all users, regardless of their abilities. This requires careful attention to structure, language, and imagery.

Clarity and Navigation

Begin by establishing a strong structural foundation using headings as navigational aids, particularly for users relying on screen readers. Initiate each page with a clear H1 title to set the context. Then, utilize H2, H3, and subsequent heading levels to create a logical, hierarchical outline, ensuring no levels are skipped to maintain a clear flow. For presenting related information, use HTML lists (<ul> and <ol>) for semantic structure, instead of visual lists with dashes or asterisks. When using tables, remember they are for data presentation, not layout, and include clear headers with <th> elements and the scope attribute.
Link labels should be more than just placeholders; they should be descriptive signposts, providing clear context about the link’s destination. Avoid generic phrases like “click here” or “read more,” which offer no meaningful information. Instead, integrate context directly into the link text, such as “Download the Salesforce Accessibility Guidelines.”

Language and Imagery

When crafting content, prioritize clarity and conciseness, using straightforward language that is easily understood. Minimize jargon and technical terms, providing explanations when unavoidable. Images are also crucial for accessibility; always provide descriptive alt text, reflecting the image’s purpose, or empty alt text for purely decorative images.

Context and Inclusivity

Ensure sufficient context throughout your content so users fully understand the information. Clearly indicate when linking to external sites or offering file downloads. Ultimately, accessible content creates a welcoming and inclusive digital environment where everyone can access and understand the information presented.

Graphic outlining strategies for enhancing accessibility in Experience Cloud, focusing on structure, imagery, and language.

Streamlining Website Accessibility: The Importance of Salesforce ACR/VPATs

Salesforce’s Accessibility Conformance Reports (ACR), often referred to as Voluntary Product Accessibility Templates (VPATs), are documents that detail how well Salesforce products and services comply with accessibility standards, particularly WCAG and Section 508 of the Rehabilitation Act. Here’s a breakdown:

What they are?

  • Reports of Compliance: These reports provide a standardized way for Salesforce to communicate the accessibility features and limitations of their products.
  • Voluntary Product Accessibility Template (VPAT): This is the standardized template used to create the ACR. It’s a document format that clearly outlines how a product conforms to accessibility standards.
  • Detailed Assessments: ACRs contain detailed assessments of how well specific Salesforce products meet accessibility criteria. They often break down compliance by individual WCAG success criteria or Section 508 requirements.

What they do?

  • Organizations considering using Salesforce products can use ACRs to evaluate whether those products meet their accessibility requirements. This is especially important for government agencies and other organizations with legal accessibility obligations.
  • ACRs provide transparency regarding Salesforce’s commitment to accessibility and the current state of their products’ accessibility.
  • Developers and administrators can use ACRs to understand the accessibility features and limitations, which can help Salesforce development services and implementation decisions.
  • They provide documented evidence of Salesforce’s efforts to create accessible products.

Why are they important?

  • For organizations subject to accessibility regulations, ACRs provide crucial documentation to demonstrate due diligence.
  • They enable organizations to make informed decisions about which products to use based on their accessibility needs.
  • By providing clear information about accessibility, ACRs encourage vendors like Salesforce to prioritize accessibility in their product development.
Infographic highlighting ACR's role in accessibility with four key areas: Vendor Encouragement, Documented Evidence, Informed Decision-Making, and Regulatory Compliance.

In essence, Salesforce’s ACR/VPAT documents bridge the gap between technical specifications and practical accessibility needs.

Is Web Accessibility the New Competitive Advantage?

Basically, making your website and services accessible is a huge part of good customer service. Think about it: Salesforce’s own research shows that most people care just as much about how a company treats them as they do about the products they buy.

80% of customers say the experience a company provides is as important as its products and services (State of the Connected Consumer, Sixth Edition, Salesforce)

That means every single time someone interacts with your business, it matters. And to make everyone happy, you need to make sure everyone’s included, no matter what.

These days, people really care about how companies treat others. So, if you create a website and experience that’s easy for everyone to use, including people with disabilities, you’re going to stand out from the crowd. It’s not just the right thing to do, it’s good business.

Want to work with us?

Great Salesforce projects start with detailed research and development

Let’s talk about your needs

Contact us