WCAG 2.1 Criteria
19.1.1. Conformance Levels
The TQS frontend specification requires mandatory conformance to WCAG (Web Content Accessibility Guidelines) 2.1 Level AA.
| Level | Description | TQS Requirement |
|---|---|---|
| A | Minimum level of accessibility. Basic requirements for all users to access content | Mandatory |
| AA | General level of accessibility. Ensures accessibility for most types of disabilities | Mandatory |
| AAA | Highest level of accessibility. Enhanced criteria covering specialized scenarios | Recommended |
- All success criteria for Level A and Level AA must be satisfied.
- Level AAA may be applied selectively depending on project characteristics.
- New projects must incorporate Level AA from the initial design phase.
19.1.2. Four Principles
WCAG 2.1 is based on the following four principles. The key guideline items under each principle must be followed.
Perceivable
- All non-text content (images, icons, etc.) must have alternative text.
- Multimedia content must have captions or transcripts.
- Content structure and relationships must be programmatically determinable.
- Information must not be conveyed by color alone.
Operable
- All functionality must be operable using only a keyboard.
- Content with time limits must allow users to adjust the time.
- Content that flashes more than 3 times per second must not be used.
- Means must be provided for users to navigate content and identify their current location.
Understandable
- The page language must be specified, such as
<html lang="ko">. - Input errors must be automatically detected, and error descriptions must be provided in text.
- Consistent navigation and consistent identification must be maintained.
- Context changes must not occur automatically in ways unintended by the user.
Robust
- Valid HTML markup must be used. Opening/closing tags and unique
idattributes must be properly maintained. - The name and role of all UI components must be recognizable by assistive technologies.
- Status messages must be conveyed to assistive technologies without moving focus.
19.1.3. Color Contrast
The color contrast ratio between text and background must meet the following criteria.
| Target | Minimum Contrast Ratio | Notes |
|---|---|---|
| Normal text (below 18px) | 4.5:1 | Required for AA level |
| Large text (18px or above, or 14px or above bold) | 3:1 | Required for AA level |
| UI components and graphical elements | 3:1 | Includes button borders, icons, etc. |
- Inactive UI components and purely decorative elements are exempt from contrast requirements.
- Logos and brand text are exempt from contrast requirements.
- Contrast ratios must be verified numerically using validation tools.
- Contrast requirements must be met in both dark mode and light mode.
19.1.4. Validation Tools
Accessibility conformance must be automatically validated using the following tools.
| Tool | Purpose | Application Timing |
|---|---|---|
| axe-core | Runtime automated accessibility testing | Development and CI/CD |
| Lighthouse accessibility audit | Accessibility score measurement of build artifacts | CI/CD |
| eslint-plugin-vuejs-accessibility | Accessibility lint rules for Vue templates | During code authoring |
- axe-core must be integrated into unit tests and E2E tests. Using
@axe-core/playwrightorvitest-axeis recommended. - The Lighthouse accessibility audit score must be maintained at 90 or above. It must be measured automatically in the CI pipeline.
- eslint-plugin-vuejs-accessibility must be included in the ESLint configuration to detect accessibility violations at the time of code authoring.
bash
# Install eslint-plugin-vuejs-accessibility
npm install --save-dev eslint-plugin-vuejs-accessibility- Automated validation tools alone cannot detect all accessibility issues. Manual testing with screen readers (NVDA, VoiceOver) is recommended as a complement.