screen-flow-accessibility

Use when building Screen Flows that must meet accessibility standards (WCAG 2.1 AA, Salesforce accessibility guidelines). Covers keyboard navigation, focus order, labels, error messaging, color contrast, and screen reader compatibility. Does NOT cover LWC a11y (see lwc-accessibility) or general record-page a11y.

Best use case

screen-flow-accessibility is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Use when building Screen Flows that must meet accessibility standards (WCAG 2.1 AA, Salesforce accessibility guidelines). Covers keyboard navigation, focus order, labels, error messaging, color contrast, and screen reader compatibility. Does NOT cover LWC a11y (see lwc-accessibility) or general record-page a11y.

Teams using screen-flow-accessibility should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/screen-flow-accessibility/SKILL.md --create-dirs "https://raw.githubusercontent.com/PranavNagrecha/AwesomeSalesforceSkills/main/skills/flow/screen-flow-accessibility/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/screen-flow-accessibility/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How screen-flow-accessibility Compares

Feature / Agentscreen-flow-accessibilityStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Use when building Screen Flows that must meet accessibility standards (WCAG 2.1 AA, Salesforce accessibility guidelines). Covers keyboard navigation, focus order, labels, error messaging, color contrast, and screen reader compatibility. Does NOT cover LWC a11y (see lwc-accessibility) or general record-page a11y.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Screen Flow Accessibility

## Purpose

Screen Flows are a common way to ship end-user experiences fast, but the
default Flow Builder output often fails accessibility checks: unlabeled radio
groups, help text hidden from screen readers, validation errors that do not
announce, and custom LWCs dropped into screens without focus management. This
skill gives a deterministic checklist to design and audit Screen Flows
against WCAG 2.1 AA and Salesforce accessibility expectations.

## Recommended Workflow

1. **Inventory screens.** For each screen, list the components, labels, and
   where dynamic content appears.
2. **Label everything.** Every input, picklist, radio group, and section has
   a visible or programmatic label. Help text is associated, not orphaned.
3. **Design focus order.** Tab order should match visual order. After a
   validation error, focus moves to the first invalid field or an error
   summary.
4. **Announce errors.** Use a consistent error summary block at the top of
   the screen, ARIA-live for dynamic errors, and inline field-level messages.
5. **Check color and contrast.** Do not rely on color alone to indicate
   required fields, errors, or status.
6. **Test keyboard-only.** Walk the entire flow with Tab/Shift-Tab/Enter/Space
   — no mouse. Anything that requires a mouse fails.
7. **Test with a screen reader.** NVDA + Firefox or VoiceOver + Safari are the
   baseline. Note missed announcements, skipped labels, and trap points.

## Component-Level Checklist

| Component | Watch For |
|---|---|
| Display Text | Semantic HTML only; avoid decorative images; alt text if meaningful |
| Radio / Picklist | Group label, not just per-option labels |
| Checkbox group | Fieldset + legend equivalent |
| Custom LWC on screen | Must expose labels, handle focus, implement ARIA |
| File Upload | Accessible label, error messaging, progress feedback |
| Section / Row | Do not rely on visual-only grouping |

## Error Handling Pattern

- On validation failure, render an error summary at the top with a link to each
  invalid field.
- Move focus to the summary, not silently to the first field.
- Inline error text uses ARIA `aria-describedby` linkage, not just red color.
- Do NOT flash-and-hide — persistent errors give assistive tech time to
  announce.

## Focus And Keyboard

- First focusable element on each screen receives focus on load.
- Tab order follows visual order.
- No custom JS steals focus without restoring it.
- Esc / Enter behave predictably (Enter submits, Esc does not destroy
  progress).

## Color Contrast

- 4.5:1 for normal text, 3:1 for large text and UI icons.
- Required markers and error states use text + icon, not just color.
- Avoid "green = good, red = bad" as the only signal.

## Screen Reader Hygiene

- Hidden decorative content uses `aria-hidden="true"`.
- Live regions announce asynchronous updates.
- Tables have headers; lists are marked up as lists.
- Heading levels are hierarchical.

## Anti-Patterns (see references/llm-anti-patterns.md)

- Putting all labels in placeholder text.
- Red asterisk as the only "required" signal.
- Silent validation where errors appear visually but are not announced.
- Drop-in custom LWCs that never ran an a11y audit.
- "We'll do accessibility at the end."

## Official Sources Used

- Salesforce Accessibility — https://help.salesforce.com/s/articleView?id=sf.accessibility_overview.htm
- Flow Builder Screen Components — https://help.salesforce.com/s/articleView?id=sf.flow_ref_elements_screen.htm
- WCAG 2.1 — https://www.w3.org/TR/WCAG21/
- Salesforce Lightning Design System Accessibility — https://www.lightningdesignsystem.com/accessibility/overview/

Related Skills

ip-range-and-login-flow-strategy

8
from PranavNagrecha/AwesomeSalesforceSkills

Design and implement Salesforce Login Flows (Screen Flows assigned to profiles or Experience Cloud sites) that run post-authentication to enforce conditional MFA, IP-based branching, terms-of-service acceptance, or user data collection. Covers Login Flow creation in Flow Builder, profile/site assignment, IP-aware decision logic, and ConnectedAppPlugin extension points. NOT for static IP allowlisting or profile Login IP Ranges (see network-security-and-trusted-ips), org-wide session policies, or SSO/SAML IdP configuration.

customer-data-request-workflow

8
from PranavNagrecha/AwesomeSalesforceSkills

Implement GDPR/CCPA data subject rights (access, deletion, rectification) using Salesforce Privacy Center and/or custom workflow. NOT for general backup or org-level data retention policy.

omnistudio-vs-flow-decision

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when choosing between OmniStudio (OmniScript / Integration Procedure / FlexCard / DataRaptor) and Flow / Screen Flow / Apex for a given capability. Triggers: 'omnistudio or flow', 'omniscript vs screen flow', 'integration procedure vs subflow', 'flexcard vs lightning page'. NOT for general automation selection across Workflow/Process Builder/Apex (see automation-selection tree).

lwc-jest-testing-with-accessibility

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when authoring or reviewing Jest unit tests for Lightning Web Components and the test plan must include explicit accessibility assertions — covers `@salesforce/sfdx-lwc-jest` setup, `createElement` / `document.body.appendChild` render harness, wire-service mocks via `@salesforce/wire-service-jest-util`, imperative Apex mocks via `jest.fn()`, simulated user interactions (`click`, `keydown`, `focus`), ARIA attribute and accessible-name assertions, focus-management tests, keyboard-navigation tests, and optional `axe-core` integration via `jest-axe`. Triggers: 'add a11y assertions to my LWC jest tests', 'how do I test focus management in LWC', 'jest test for keyboard navigation', 'integrate axe-core into sfdx-lwc-jest', 'assert ARIA attributes after interaction', 'how do I prove the LWC is accessible in CI'. NOT for general LWC jest setup without an a11y angle (use lwc/lwc-testing — this skill is the accessibility-deep-dive sibling), NOT for accessibility-pattern authoring inside the component itself (use lwc/lwc-accessibility-patterns), NOT for end-to-end UI automation via UTAM, NOT for manual screen-reader QA workflows.

lwc-in-flow-screens

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when building, reviewing, or troubleshooting a custom Lightning Web Component that runs inside a Flow screen element, covering @api props exposed to Flow, FlowAttributeChangeEvent for output, validate() for user input validation, and flow navigation events. Triggers: 'lwc in flow screen', 'FlowAttributeChangeEvent', 'flow screen component not updating', 'flow validate method', 'flow navigation from lwc'. NOT for custom property editors (use custom-property-editor-for-flow), NOT for embedding a flow inside an LWC (use flow/screen-flows), NOT for auto-launched flows.

lwc-accessibility

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when designing or reviewing Lightning Web Components for keyboard access, semantic labeling, focus management, screen-reader behavior, and WCAG-aligned UX in Salesforce. Triggers: 'lwc accessibility', 'keyboard navigation in lwc', 'screen reader labels', 'focus trap in modal'. NOT for Apex or sharing security reviews, or for purely visual SLDS styling that does not affect accessibility behavior.

lwc-accessibility-patterns

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when implementing specific ARIA attributes, keyboard navigation patterns, screen reader live regions, WCAG 2.1 compliance, focus management, or accessible data tables in Lightning Web Components. Trigger keywords: ARIA, aria-live, aria-label, aria-labelledby, role=grid, tabindex, keydown handler, WCAG AA, focus trap, accessible datatable, shadow DOM ARIA boundary. NOT for general LWC styling, visual design, SLDS theming, or CSS that does not affect assistive-technology behavior.

custom-property-editor-for-flow

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when building or reviewing an LWC Custom Property Editor for Flow screen or action configuration, including the `configurationEditor` metadata hook, builder-side APIs, validation, and value-change events. Triggers: 'custom property editor', 'Flow configuration editor', 'builderContext', 'inputVariables', 'configurationEditor'. NOT for ordinary runtime screen-component behavior when no Flow Builder design-time customization is involved.

slack-workflow-builder

8
from PranavNagrecha/AwesomeSalesforceSkills

Use this skill when designing or troubleshooting Slack Workflow Builder workflows that call Salesforce — especially the Salesforce connector step Run a Flow, mapping inputs/outputs, handling failures, and understanding limits. Triggers on: Slack Workflow Builder Salesforce, Run a Flow from Slack, autolaunched flow from Slack, Slack automation calling Salesforce. NOT for Salesforce Flow Builder tutorials unrelated to Slack (use flow skills), not for Flow Core Actions that send Slack messages from Salesforce (use flow-for-slack), not for initial org-to-workspace connection (use slack-salesforce-integration-setup), and not for building custom Slack apps outside Workflow Builder.

oauth-flows-and-connected-apps

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when choosing or reviewing Salesforce OAuth flows and connected-app policy for integrations, including client credentials, JWT bearer, authorization code, device flow, scopes, and token lifecycle controls. Triggers: 'OAuth flow', 'connected app', 'client credentials', 'JWT bearer', 'refresh token', 'integration user'. NOT for record-level sharing design or for simple Named Credential usage when the auth-flow decision is already settled.

workflow-rule-to-flow-migration

8
from PranavNagrecha/AwesomeSalesforceSkills

Migrate Workflow Rules to record-triggered Flows: field update mapping, email alert migration, outbound message alternatives using Flow Core Actions, time-based workflow replacement with Scheduled Paths. NOT for Process Builder migration (use process-builder-to-flow-migration), NOT for building new flows from scratch.

subflows-and-reusability

8
from PranavNagrecha/AwesomeSalesforceSkills

Use when extracting reusable Flow logic into subflows, defining input and output variables, keeping parent flows maintainable, and sharing common automation contracts across multiple flows. Triggers: 'reuse this flow logic', 'how should subflow variables work', 'too much duplicated flow logic', 'subflow contract design'. NOT for Apex-called Flow execution direction or Flow Orchestration process design.