mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-11 18:38:22 +08:00
Remove incorrect wcag file location
This commit is contained in:
parent
ba9c4a3243
commit
391e9ceb2d
@ -1,183 +0,0 @@
|
|||||||
---
|
|
||||||
name: WCAG Accessibility Standards (Vibes Rules)
|
|
||||||
description: Provide clear, enforceable accessibility rules for component generation based on WCAG 2.0 + 2.1 AA.
|
|
||||||
tags: wcag, accessibility, a11y, rules, components
|
|
||||||
---
|
|
||||||
|
|
||||||
# Accessibility Objectives
|
|
||||||
Agentforce Vibes must ensure every generated component is:
|
|
||||||
- **Perceivable:** Users can see or hear the content.
|
|
||||||
- **Operable:** Users can interact with all elements using a keyboard.
|
|
||||||
- **Understandable:** Content behaves predictably and clearly.
|
|
||||||
- **Robust:** Content works reliably with assistive technologies.
|
|
||||||
|
|
||||||
All rules below are mandatory unless stated otherwise.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 1. PERCEIVABLE RULES
|
|
||||||
|
|
||||||
## 1.1 Text Alternatives
|
|
||||||
**Rules**
|
|
||||||
- Provide `alt` text for all meaningful images and icons.
|
|
||||||
- Use empty alt (`alt=""`) only for decorative images.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Missing `alt`.
|
|
||||||
- Using visual descriptions instead of purpose (e.g., “image of…”).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1.2 Time-Based Media
|
|
||||||
**Rules**
|
|
||||||
- Prerecorded videos must include captions.
|
|
||||||
- Provide a text alternative for audio-only or video-only content.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Videos without captions.
|
|
||||||
- Audio without transcript.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1.3 Adaptable Structure
|
|
||||||
**Rules**
|
|
||||||
- Use semantic HTML structure: headings, lists, labels.
|
|
||||||
- Maintain logical DOM order for both reading and tab flow.
|
|
||||||
- Instructions must not rely on colour, shape, or position.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- `<div>` used instead of semantic tags.
|
|
||||||
- “Click the red button.”
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1.4 Distinguishable Content
|
|
||||||
**Rules**
|
|
||||||
- Text contrast must be **4.5:1** or higher.
|
|
||||||
- UI element contrast must be **3:1** or higher.
|
|
||||||
- Support 200% text zoom without breaking layout.
|
|
||||||
- Do not embed text inside images.
|
|
||||||
- Layout must reflow on small screens without horizontal scrolling.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Low-contrast text.
|
|
||||||
- Tooltips that disappear too quickly.
|
|
||||||
- Layout requiring horizontal scroll on mobile.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 2. OPERABLE RULES
|
|
||||||
|
|
||||||
## 2.1 Keyboard Accessibility
|
|
||||||
**Rules**
|
|
||||||
- All interactions must be keyboard-accessible.
|
|
||||||
- Tab order must be logical and sequential.
|
|
||||||
- Components must not trap keyboard focus.
|
|
||||||
- Focus must return to the triggering element when closing overlays/modals.
|
|
||||||
- Single key shortcuts must be avoidable or disabled.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Mouse-only actions.
|
|
||||||
- Unreachable or stuck focus.
|
|
||||||
- Hotkeys that trigger actions without user control.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2.2 Timing and Motion
|
|
||||||
**Rules**
|
|
||||||
- Any timed content must allow extending or disabling time limits.
|
|
||||||
- Moving/animated content must have pause or stop controls.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Auto-scrolling/rotating components without controls.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2.3 Seizure Safety
|
|
||||||
**Rules**
|
|
||||||
- Do not include flashing content.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Any animation flashing more than 3 times in one second.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2.4 Navigable Content
|
|
||||||
**Rules**
|
|
||||||
- Provide a "Skip to main content" link as the first focusable element.
|
|
||||||
- Use clear, descriptive page titles.
|
|
||||||
- Use descriptive headings/labels.
|
|
||||||
- All focus states must be clearly visible and high contrast.
|
|
||||||
- Links must clearly indicate purpose.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- “Click here.”
|
|
||||||
- Hidden or low-contrast focus outlines.
|
|
||||||
- Sticky headers covering focused elements.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 3. UNDERSTANDABLE RULES
|
|
||||||
|
|
||||||
## 3.1 Readable Content
|
|
||||||
**Rules**
|
|
||||||
- The page must declare a correct `lang` attribute.
|
|
||||||
- Mark text written in other languages with proper `lang=""`.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Missing or incorrect language attributes.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3.2 Predictable Behaviour
|
|
||||||
**Rules**
|
|
||||||
- Do not trigger actions automatically on focus or input.
|
|
||||||
- Navigation patterns must remain consistent across components.
|
|
||||||
- UI elements with the same purpose must use consistent labels and icons.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Auto-submit fields.
|
|
||||||
- Dropdown selection triggering automatic navigation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3.3 Input Assistance
|
|
||||||
**Rules**
|
|
||||||
- Every input must have an explicit visible label.
|
|
||||||
- Error messages must clearly identify the issue.
|
|
||||||
- Error messages must suggest how to fix the issue.
|
|
||||||
- Use semantic autocomplete attributes for known fields (e.g., name, email).
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Placeholder text acting as label.
|
|
||||||
- Generic errors like “Invalid field.”
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 4. ROBUST RULES
|
|
||||||
|
|
||||||
## 4.1 Compatible Code
|
|
||||||
**Rules**
|
|
||||||
- Components must expose correct name, role, and value for assistive tech.
|
|
||||||
- Prefer native HTML elements for buttons, inputs, links, etc.
|
|
||||||
- Use ARIA roles and attributes only when no native element exists.
|
|
||||||
- Notify assistive technologies of dynamic updates using `aria-live` where appropriate.
|
|
||||||
|
|
||||||
**Anti-Patterns**
|
|
||||||
- Custom elements replacing native functionality without equivalent semantics.
|
|
||||||
- Overusing ARIA roles in place of native HTML.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# SUMMARY OF REQUIREMENTS (FOR VIBES)
|
|
||||||
- Use semantic structure.
|
|
||||||
- Maintain high contrast.
|
|
||||||
- Ensure predictable behaviour.
|
|
||||||
- Support full keyboard operation.
|
|
||||||
- Provide clear labels, errors, and instructions.
|
|
||||||
- Avoid colour-only meaning.
|
|
||||||
- Avoid hidden or weak focus states.
|
|
||||||
- Do not embed text in images.
|
|
||||||
- Do not use visual-only cues.
|
|
||||||
- Use ARIA only when absolutely required.
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user