Use Mobile Validation with Salesforce Lightning Design System

SLDS Guidelines for Mobile Accessibility

Warning messages for mobile readiness are based on the following Salesforce Lightning Design System (SLDS) guidelines.

Font size

To improve mobile readability, use an SLDS token from the following value range. If you must use another unit type, choose a value from one of the equivalent px, pt, em, rem, or % ranges:

Unit	Recommended value range
SLDS token (recommended)	$font-size-4 or larger. See “Font Size” in Lightning Design System.
px	14 px or larger
pt	10.5 pt or larger
em, rem	0.875 or larger
%	87.5 or larger

For specific use case recommendations, see Follow Accessible Mobile Design Guidelines.

Word wrapping in labels

To avoid truncation at runtime, always use word wrapping in labels. Avoid using the ellipsis.

Clickable images, Button icons, form elements

To clarify UI behavior, always provide labels for visual elements that support user interaction.

Work with SLDS Validator

SLDS Validator checks your code for SLDS mobile guidelines adherence as you type. If it finds a potential issue, SLDS Validator provides a warning with suggested improvements. These warnings apply to HTML and CSS code.

Salesforce Lightning Design System (SLDS) defines a wide range of tokens that standardize user interface style descriptors and units. For example, you can use SLDS tokens to specify text style attributes such as font, font size, and font color. Tokens make it easy to ensure that your design is consistent, and simplify updates as your design evolves.

SLDS provides its own validator extension for Visual Studio Code. SLDS Validator scans your Lightning web component code looking for expressions that stray from SLDS guidelines. If it finds issues, SLDS Validator suggests an appropriate SLDS token or provides other advice for improving the underlined expression.

For mobile readiness, SLDS Validator performs additional checks that address mobile accessibility. Accessibility on mobile devices demands stricter guidelines than on desktop browsers, for the benefit of all users. On smaller phone screens, for example, fonts that fall below certain size thresholds can be difficult to read even for customers with excellent eyesight. Word wrapping also becomes more important on limited screen sizes that don’t support horizontal scrolling. SLDS Validator warnings keep you informed when your settings appear to degrade a component’s mobile effectiveness.

SLDS mobile validation requires SLDS Validator version 1.4.7 or later.

To install SLDS Validator, go to the extension page on Visual Studio Marketplace. To learn more, read the SLDS Validator developer guide.

Enable or Disable SLDS Validator

You can globally enable or disable SLDS Validator. In VS Code Preferences, go to Settings | Extensions | SLDS Validator | Salesforce-vscode-slds | Basic: Mobile Validation.

Use SLDS Warnings to Validate Your Code

While you're coding, SLDS Linter displays a yellow underline to highlight components that you need to update. In addition, SLDS Linter captures issues in a SARIF report. Fix validation issues automatically in bulk by running the lint command with the --fix option. Alternatively, review the issues in the report. If a recommendation is provided in the report, fix the code based on it. If there’s no recommendation, then remove the values that are causing the issue.

We recommend that you use SLDS Linter. But if you choose to use SLDS Validator, it places markers on components that don’t conform to mobile guidelines while you’re coding. For example, if an element of your component uses a text size smaller than $font-size-4, the validator highlights the unsuitable font size with yellow underlining.

To read details about the warning, hover over the highlighted code.