Frontend Ui Ux Design

# Accessibility Guidelines (WCAG 2.1/2.2)

Comprehensive guide for designing and implementing accessible user interfaces.

## WCAG Principles: POUR

## 1. Perceivable

Information and UI components must be presentable to users in ways they can perceive.

### 2. Operable

UI components and navigation must be operable.

### 3. Understandable

Information and operation of UI must be understandable.

### 4. Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

---

## WCAG Conformance Levels

### Level A (Minimum)

Basic accessibility features. Legal requirement in many jurisdictions.

### Level AA (Recommended)

Addresses most common accessibility barriers. Widely adopted as standard.

### Level AAA (Enhanced)

Highest level of accessibility. Not required for entire sites, but aim for critical content.

**Recommendation**: Target Level AA for all public-facing websites and applications.

---

## Color & Contrast

### Contrast Ratios (WCAG 2.1)

**Level AA**

- Normal text: 4.5:1
- Large text (18pt+ or 14pt+ bold): 3:1
- UI components and graphics: 3:1

**Level AAA**

- Normal text: 7:1
- Large text: 4.5:1

### Best Practices

1. **Don't rely on color alone**
   - Bad: Red = error, green = success (color only)
   - Good: Red + error icon + "Error" text

2. **Test with color blindness simulators**
   - Protanopia (red-blind)
   - Deuteranopia (green-blind)
   - Tritanopia (blue-blind)
   - Achromatopsia (no color)

3. **Use patterns or textures**
   - Charts: Use patterns in addition to colors
   - Status indicators: Icons + color

4. **Provide high contrast mode**
   - Support prefers-contrast media query
   - Windows high contrast mode compatibility

### Tools

- WebAIM Contrast Checker
- Chrome DevTools Contrast Checker
- Stark (Figma plugin)
- Color Oracle (color blindness simulator)

---

## Keyboard Accessibility

### Essential Requirements

1. **All functionality via keyboard**
   - No mouse-only features
   - Tab to navigate
   - Enter/Space to activate
   - Escape to close/cancel

2. **Logical tab order**
   - Follow visual layout
   - Top to bottom, left to right
   - Use tabindex="0" to include in order
   - Avoid positive tabindex values

3. **Visible focus indicator**
   - Minimum 2px outline
   - Sufficient contrast (3:1)
   - Never remove outline without alternative

   ```css
   /* Good */
   :focus {
     outline: 2px solid #0066CC;
     outline-offset: 2px;
   }
   
   /* Also good - custom focus style */
   :focus {
     outline: none; /* Remove default */
     box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
   }
   
   /* Bad */
   :focus {
     outline: none; /* No alternative provided */
   }
   ```

4. **Skip links**
   - "Skip to main content" at page top
   - Hidden until focused

   ```html
   <a href="#main" class="skip-link">Skip to main content</a>
   
   <style>
   .skip-link {
     position: absolute;
     top: -40px;
     left: 0;
     background: #000;
     color: #fff;
     padding: 8px;
     z-index: 100;
   }
   
   .skip-link:focus {
     top: 0;
   }
   </style>
   ```

5. **Focus management**
   - Move focus to modal when opened
   - Return focus to trigger when closed
   - Focus first error on form submission
   - Trap focus in modal dialogs

### Keyboard Shortcuts

**Common Patterns**

- Tab: Next focusable element
- Shift+Tab: Previous focusable element
- Enter: Activate button/link
- Space: Activate button, check checkbox
- Arrow keys: Navigate menu, tabs, radio buttons
- Escape: Close modal, clear search, cancel operation
- Home/End: First/last item in list

**Custom Shortcuts**

- Document them clearly
- Avoid conflicts with browser/screen reader shortcuts
- Provide alternatives (don't require shortcuts)
- Make them discoverable

---

## Screen Reader Support

### Semantic HTML

**Use correct elements**

```html
<!-- Good -->
<button>Click me</button>
<a href="/page">Link</a>
<nav>...</nav>
<main>...</main>
<header>...<