Accessibility

Making your Medallia applications usable by as many people as possible

Accessible products enable users with disabilities to interact with Medallia products and features with the same degree of success as users without disabilities. Accessibility considers users with various types of disabilities. For example, accessible products improve layout, visibility, and permit assistive technology to read and answer forms for customers who have blindness, low vision, and limited movement.

Follow these best practices to ensure maintenance of product accessibility when customizing Medallia Experience Cloud.

WCAG guidelines and other resources

Medallia strives to ensure that its products and functionality meet industry-standard Web Content Accessibility Guidelines (WCAG), which provide standards for making web content more accessible to people with disabilities. For more information about WGAG, including conformance criteria, see the Web Content Accessibility Guidelines Overview on the World Wide Web Consortium website.

Medallia offers several accessible product templates and continues to work on expanding the range of accessible product templates. Experience Cloud offers web-based survey templates, which are viewed by your customers. Experience Cloud also offers core front-line reporting modules within next generation reporting, which are viewed your employees.

These Medallia products and features have been evaluated against WCAG 2.2 AA standards:

  • Digital Feedback web-based survey templates.

  • Medallia Experience Cloud survey templates.

  • Experience Cloud report module templates (within Medallia Alchemy Experience Reporting).

  • Medallia Mobile.

  • Medallia Voices.

Any changes you make to a template have the potential to violate one or more accessibility standards or regulations. This includes, but is not limited to, such things as adding HTML or other markup, adding or changing CSS font or color styling, and adding images. If you customize templates to reflect your company's branding and content guidelines, you might need to make design choices to maintain accessibility. For example, custom colors must have sufficient color contrast, images require alternative text, and any custom HTML or styling must be accessible.

For detailed information about common accessibility regulations and standards, see:

General best practices

For general guidance about customizing reports, see CSS styling.

Use these best practices when implementing aspects of Experience Cloud:

  • Provide sufficient contrast between text and critical non-text content (for example buttons). Use a minimum contrast ratio of

    • 4.5:1 for text less than 19px bolded or 24px normal.

    • 3:1 for non-text content and text at least 19px bolded and 24px normal.

  • Do not rely on color solely to convey important information. For example, links used in a block of text must have a second visual cue, usually an underline but can include bolding the text or changing the font size or family.

  • All interactive elements (such as buttons) in templates must include a focus indicator (such as a border around a button on hover) with at least a 3:1 color contrast ratio and best practice of at least a 2px width.

  • When using icons for controls, like buttons, make sure that they are at least 24px by 24px.

  • Images that provide meaning, like logos, must have alternative text descriptions.

  • Images used as decoration or have visible text descriptions must be hidden.

Always test your changes for adherence to accessibility guidelines. For more information, see Accessibility validation tools.

CSS styling

Cascading style sheet (CSS) styles define how to render the content on the user's device, such as a visual browser, screen reader, or visual browser. On a web page or form, CSS styling is performed with style sheets or embedded in-line with the style attribute. For Experience Cloud surveys, styles heets are hosted on the Survey engine and are generated by the Base CSS and Theme CSS properties on Survey designs.

Restriction: Do not use in-line styles because they can easily violate accessibility guidelines. Instead, include all CSS definitions in the Theme CSS stylesheet.

When defining CSS:

  • Required:

    • Ensure the reading order of content and elements are logical when viewed without style sheets. Content that does not makes sense without a style sheet will also not make sense to screen reader users.

    • Provide text equivalents for icon fonts. For example, when showing an alert or warning symbol as a font, also include text that describes the condition. This information provides screen reader users context about the purpose of the icon.

    • Ensure containing elements allow text resize and reflow. This allows people with low vision to modify their display settings to better see the content.

    • Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed. For example, using position elements to render the content outside the browser window. This usually does not add scroll bars to the window.

    • For decorative images (ones that do not provide content), use background images so screen reader users do not have to hear it.

  • Avoid:

    • Using ::before and ::after, pseudo classes for non-decorative content because they are not always recognized by screen readers.

    • Background images behind text, which can cause contrast issues.

    • Size declarations on any portion of the box model (see the note below for more on CSS) because they all contribute to the overall size of the element and cannot be resized or reflowed.

    • Placeholder (placeholder) attribute without an aria-label attribute as some screen readers and speech-to-text programs do not recognize this text.

  • Do not use:

    • In-line styles (style attribute) as they can prevent low vision, color-blind, and cognitively impaired users from modifying colors, font sizes, and other features to fit their needs

    • Title (title) attributes for textual content. Using screen reader, all the titles will be spoken so redundant title should be removed (from the link, not the image). As a rule of thumb, do not use title attributes on links or form elements or table cells or other elements because that can lead to screen-reader users hearing those announcements twice.

    • CSS to render content or provide functionality because screen readers ignore CSS.

    • Absolute units (such as in, cm, mm, pt, and pc) because these are intended for print media. Instead, use relative units (such as ems, percentages, or larger), or do not use units and let the agent use the default units. This lets the user to zoom and enlarge the content and provide proper wrapping and formatting.

See MDN's CSS: Cascading Style Sheets for an in depth discussion of CSS.

Accessibility validation tools

These tools are useful for testing accessibility and color contrast:

Accessibility Insights
This browser extension reviews your site, shows accessibility errors, provides suggestions to fix problems, and includes the WCAG specification.
axe DevTools (Chrome)
This highly configurable Chrome extension helps find accessibility defects on web pages.
Web Accessibility Evaluation Tool (WAVE)
This reporting tool evaluates web pages and reports on elements that fail to achieve accessibility. This tool is provided by WebAIM and is available as a web extension for Chrome, Firefox, and Edge browsers.
Color Contrast Checker
WebAIM web page for validating color contrast.
TPGi Colour Contrast Analyser (CCA)
A desktop tool for validating color contrast
Text Spacing Editor (Chrome)
An extension that modifies the word, paragraph, and letter spacing, and line height
Text Spacing Bookmarklet
A bookmarklet that modifies the word, paragraph, and letter spacing, and line height