WebStorm Emmet integration and screen-reader-friendly markup: controlling expansion output for accessibility

Direct answer

For a recent WebStorm release, a custom Emmet snippet can replace the built-in ! skeleton, project scoping is supported via project-level settings, and expansion outcome on conflict is decided by keymap priority. Reliability is version-sensitive.

1. Can a custom snippet fully replace a built-in abbreviation like !

Confirmed: WebStorm Emmet allows user snippets in Settings → Editor → Emmet → User Snippets. When a user snippet uses the same trigger as a built-in abbreviation, the user definition is used for expansion in the matching Emmet syntax profile.

Likely explanation: precedence is not absolute. Built-in abbreviations are provided per syntax profile, e.g., HTML vs XHTML. If the file type switches profile, the trigger can resolve to the built-in for that profile unless the custom snippet is defined for both profiles. In WebStorm 2024.x and 2025.x the merge order changed, so override reliability should be tested on the exact release you use.

2. Project-level scoping

Confirmed: Emmet settings can be stored per project rather than globally. Project-specific Emmet configuration is kept in the project settings layer and is not applied to other projects unless shared.

Likely explanation: the practical mechanism is the IDE settings layering. Global user snippets live in the IDE config; project snippets live in the project settings. Sharing is done via Settings Repository, .idea export, or IDE settings sync. The exact file name for a project-scoped Emmet snippet set varies by version, so verify in Settings → Editor → Emmet after switching the settings scope to Project.

3. Conflict with plugins or shortcuts

Confirmed: Emmet expansion is triggered by a keymap action, typically Tab. Expansion outcome is determined by keymap priority: user keymap > IDE default keymap > plugin keymap. If Tab is captured by a higher-priority binding, Emmet never receives the event.

Likely explanation: multiple plugins can contribute Emmet-like completions. The Emmet settings panel shows active Emmet providers. Duplicate triggers are merged, and the first matching provider in the active profile wins.

Minimal verification for accessibility baseline

• Add a user snippet with trigger ! and profile html that outputs your accessible skeleton with lang, landmark elements and alt placeholders.
• Open a new HTML file, type ! and press Tab. Confirm the custom output appears without manual cleanup.
• Switch the file type to XHTML and repeat to check profile-specific behavior.
• Create a second project, verify the snippet is absent unless you import project settings.
• Check Settings → Keymap for Tab conflicts and Settings → Editor → Emmet for active providers.

Version sensitivity note: Emmet precedence and project scoping rules changed between WebStorm 2024.x and 2025.x. Test the override on your exact release before rolling out to the team.

One diagnostic detail that changes the recommendation: which WebStorm major.minor version and whether you rely on Settings Sync or a shared .idea export for team distribution.