### WCAG 2.2 Consistent Help (A) HTML Example

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Illustrates WCAG 3.2.6 Consistent Help (A) by showing correct implementation of help mechanisms in a consistent order across different pages of a website. Also includes an example of an incorrect implementation with inconsistent ordering.

```html
<!-- Success Criterion 3.2.6 Consistent Help (Level A) - New in 2.2 -->

<!-- CORRECT: Consistent help menu order across all pages -->

<!-- Page 1: Home -->
<header>
  <nav aria-label="Help">
    <a href="/search">Search</a>
    <a href="/contact">Contact Us</a>
    <a href="/faq">FAQ</a>
    <a href="/chat">Live Chat</a>
  </nav>
</header>

<!-- Page 2: Products (same order) -->
<header>
  <nav aria-label="Help">
    <a href="/search">Search</a>
    <a href="/contact">Contact Us</a>
    <a href="/faq">FAQ</a>
    <a href="/chat">Live Chat</a>
  </nav>
</header>

<!-- Page 3: Checkout (same order maintained) -->
<footer>
  <div class="help-section">
    <h2>Need Help?</h2>
    <ul>
      <li><a href="/search">Search</a></li>
      <li><a href="/contact">Contact Us</a></li>
      <li><a href="/faq">FAQ</a></li>
      <li><a href="/chat">Live Chat</a></li>
    </ul>
  </div>
</footer>

<!-- INCORRECT: Inconsistent order -->
<!-- Page 4: Account (order changed - FAILS) -->
<nav aria-label="Help">
  <a href="/faq">FAQ</a>          <!-- Order differs -->
  <a href="/search">Search</a>    <!-- from previous pages -->
  <a href="/chat">Live Chat</a>
</nav>
```

--------------------------------

### HTML Examples of Accessible Authentication Forms (WCAG 2.2)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Demonstrates correct HTML structures for login forms that comply with WCAG 2.2's accessible authentication criteria. Includes examples of simple login, image verification alternatives to CAPTCHAs, and advanced options like biometrics and passkeys. Incorrect examples highlight common pitfalls like transcription-based CAPTCHAs.

```html
<!-- Success Criterion 3.3.8 Accessible Authentication (Minimum) (Level AA) - New in 2.2 -->

<!-- CORRECT: Simple authentication without cognitive tests -->
<form id="login-form" method="post" action="/login">
  <h2>Sign In</h2>

  <label for="email">Email:</label>
  <input id="email"
         name="email"
         type="email"
         autocomplete="email"
         required>

  <label for="password">Password:</label>
  <input id="password"
         name="password"
         type="password"
         autocomplete="current-password"
         required>

  <!-- CORRECT: Alternative to CAPTCHA using object recognition -->
  <div class="verification">
    <p>Select all images containing a car:</p>
    <div role="group" aria-label="Image verification">
      <button type="button" role="checkbox" aria-checked="false">
        <img src="img1.jpg" alt="Street scene">
      </button>
      <button type="button" role="checkbox" aria-checked="false">
        <img src="img2.jpg" alt="Mountain landscape">
      </button>
      <!-- Object recognition, not transcription -->
    </div>
  </div>

  <button type="submit">Sign In</button>
</form>

<!-- Success Criterion 3.3.9 Accessible Authentication (Enhanced) (Level AAA) - New in 2.2 -->

<!-- CORRECT: Authentication without cognitive function tests -->
<form id="enhanced-login" method="post">
  <h2>Sign In</h2>

  <!-- Username with autocomplete -->
  <label for="username">Username:</label>
  <input id="username"
         name="username"
         type="text"
         autocomplete="username"
         required>

  <!-- Password manager integration -->
  <label for="pass">Password:</label>
  <input id="pass"
         name="password"
         type="password"
         autocomplete="current-password"
         required>

  <!-- CORRECT: Biometric authentication option -->
  <button type="button" id="biometric-btn">
    Sign in with biometrics
  </button>

  <!-- CORRECT: Passkey/WebAuthn (no cognitive test) -->
  <button type="button" id="passkey-btn">
    Sign in with passkey
  </button>

  <button type="submit">Sign In</button>
</form>

<!-- INCORRECT: Requires transcription (fails AA and AAA) -->
<form>
  <label>Enter the characters shown:
    <img src="/captcha?id=123" alt="CAPTCHA image">
  </label>
  <input type="text" name="captcha" required>
  <!-- Text transcription is a cognitive function test -->
</form>
```

--------------------------------

### WCAG 1.1.1 Non-text Content Examples (HTML)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Demonstrates correct and incorrect implementations of the WCAG 1.1.1 Success Criterion for providing text alternatives to non-text content. Includes examples for images with descriptive alt text, decorative images, functional icons, and complex images requiring long descriptions.

```html
<!-- Success Criterion 1.1.1 Non-text Content (Level A) -->

<!-- CORRECT: Image with descriptive alt text -->
<img src="chart-q4-sales.png"
     alt="Bar chart showing Q4 sales increase of 23% over Q3, reaching $1.2M">

<!-- CORRECT: Decorative image -->
<img src="decorative-line.png" alt="" role="presentation">

<!-- CORRECT: Functional icon button -->
<button>
  <img src="search-icon.svg" alt="Search">
</button>

<!-- CORRECT: Complex image with long description -->
<img src="complex-diagram.png"
     alt="Network topology diagram"
     aria-describedby="diagram-desc">
<div id="diagram-desc">
  The diagram shows a hub-and-spoke network with a central router
  connecting to 8 workstations and 2 servers in separate VLANs.
</div>

<!-- INCORRECT: Missing alt text -->
<img src="important-chart.png">

<!-- INCORRECT: Redundant alt text -->
<img src="logo.png" alt="Image of logo">
```

--------------------------------

### WCAG 1.2.2 Captions and 1.2.5 Audio Description Examples (HTML)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Illustrates the implementation of WCAG 1.2.2 (Captions - Prerecorded) and 1.2.5 (Audio Description - Prerecorded) using HTML5 video and track elements. Shows how to include multiple language caption tracks and provide separate audio description tracks.

```html
<!-- Success Criterion 1.2.2 Captions (Prerecorded) (Level A) -->

<!-- CORRECT: Video with WebVTT captions -->
<video controls>
  <source src="training-video.mp4" type="video/mp4">
  <track kind="captions"
         src="captions-en.vtt"
         srclang="en"
         label="English"
         default>
  <track kind="captions"
         src="captions-es.vtt"
         srclang="es"
         label="Spanish">
</video>

<!-- Example captions-en.vtt file content -->
<!--
WEBVTT

00:00:00.000 --> 00:00:03.500
Welcome to our accessibility training module.

00:00:03.500 --> 00:00:07.200
Today we'll cover the importance of captions.

00:00:07.200 --> 00:00:10.800
[background music playing]
-->


<!-- Success Criterion 1.2.5 Audio Description (Prerecorded) (Level AA) -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
  <source src="demo-with-audio-description.mp4" type="video/mp4">
  <track kind="descriptions"
         src="audio-descriptions.vtt"
         srclang="en"
         label="Audio Descriptions">
</video>
```

--------------------------------

### WCAG 2.2 Target Size (Minimum) CSS Example

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Demonstrates CSS for meeting the WCAG 2.5.8 Target Size (Minimum) AA criterion, ensuring interactive targets are at least 24x24 CSS pixels. Includes examples for buttons, links, and exceptions for inline text links.

```css
/* Success Criterion 2.5.8 Target Size (Minimum) (Level AA) - New in 2.2 */

/* CORRECT: Minimum 24x24 CSS pixel target */
.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px;  /* Total target size: 48x48px */
  margin: 4px;
  border: none;
  background: transparent;
}

/* CORRECT: Small target with adequate spacing */
.inline-link {
  font-size: 14px;
  line-height: 24px;   /* Vertical target height: 24px ✓ */
  display: inline-block;
  padding: 0 8px;      /* Horizontal spacing from adjacent links */
  margin: 0 4px;       /* Additional spacing */
}

/* CORRECT: Exception - inline text links */
<p>
  Read our <a href="/privacy">privacy policy</a> and
  <a href="/terms">terms of service</a> for details.
  <!-- Inline links in sentences are exempt -->
</p>

/* Success Criterion 2.5.5 Target Size (Enhanced) (Level AAA) */
/* CORRECT: Enhanced 44x44 CSS pixel target */
.large-button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}
```

--------------------------------

### CSS: Set Color Contrast Ratios for Text and UI Elements (WCAG 2.2)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Demonstrates CSS for meeting WCAG 2.2 color contrast requirements. Includes examples for normal text (4.5:1), large text (3:1), enhanced contrast (7:1), non-text UI components (3:1), and focus indicators. Incorrect examples highlight insufficient contrast.

```css
/* Success Criterion 1.4.3 Contrast (Minimum) (Level AA) */

/* CORRECT: Normal text with 4.51:1 contrast ratio */
.body-text {
  color: #595959;           /* Dark gray */
  background-color: #ffffff; /* White */
  font-size: 16px;
}

/* CORRECT: Large text (18pt+) with 3.02:1 contrast ratio */
.heading {
  color: #767676;           /* Medium gray */
  background-color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

/* Success Criterion 1.4.6 Contrast (Enhanced) (Level AAA) */
/* CORRECT: Enhanced contrast of 7.02:1 */
.high-contrast-text {
  color: #4d4d4d;
  background-color: #ffffff;
}

/* INCORRECT: Insufficient contrast 2.5:1 */
.poor-contrast {
  color: #999999;
  background-color: #ffffff; /* Fails AA and AAA */
}

/* Success Criterion 1.4.11 Non-text Contrast (Level AA) */
/* CORRECT: UI component with 3.5:1 contrast */
.button {
  background-color: #0078d4; /* Blue */
  border: 2px solid #0078d4;
  color: #ffffff;             /* Button text has 4.5:1 */
}

.button:focus {
  outline: 3px solid #ff6600; /* Focus indicator has 3.4:1 against white */
  outline-offset: 2px;
}
```

--------------------------------

### WCAG 2.2 Conformance Levels and Statement Template (Markdown)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Provides examples of WCAG 2.2 conformance levels (A, AA, AAA) and a template for a conformance statement. This markdown illustrates the structure and requirements for each level, including new criteria in WCAG 2.2.

```markdown
# Conformance Level Examples

## Level A (Minimum)
- 1.1.1 Non-text Content: All non-text content has text alternatives
- 2.4.1 Bypass Blocks: Mechanism to bypass repeated content blocks
- 3.3.7 Redundant Entry: Information previously entered is auto-populated (New in 2.2)

## Level AA (Mid-range, commonly required)
- 1.4.3 Contrast (Minimum): Text contrast ratio of at least 4.5:1
- 2.4.11 Focus Not Obscured (Minimum): Focused elements not entirely hidden (New in 2.2)
- 3.3.8 Accessible Authentication (Minimum): No cognitive tests for authentication (New in 2.2)

## Level AAA (Highest)
- 1.4.6 Contrast (Enhanced): Text contrast ratio of at least 7:1
- 2.4.13 Focus Appearance: Focus indicator meets size and contrast requirements (New in 2.2)
- 3.3.9 Accessible Authentication (Enhanced): No cognitive function tests (New in 2.2)

# Conformance Statement Template
"This website conforms to WCAG 2.2 Level AA. The conformance applies to:
- Scope: https://example.com/all-pages/
- Conformance Date: 2024-12-15
- Technologies: HTML5, CSS3, JavaScript, ARIA 1.2"
```

--------------------------------

### HTML & JavaScript: Implement Keyboard Accessible Dropdown Menu (WCAG 2.1)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Provides an example of a keyboard-accessible custom dropdown menu using HTML and JavaScript. It demonstrates correct ARIA attributes and keyboard event handling for navigation (Enter, Space, Arrow keys, Escape). An incorrect example shows a non-keyboard-accessible alternative.

```html
<!-- Success Criterion 2.1.1 Keyboard (Level A) -->

<!-- CORRECT: Keyboard accessible custom dropdown -->
<div class="dropdown">
  <button id="menu-button"
          aria-haspopup="true"
          aria-expanded="false"
          aria-controls="menu-list">
    Options
  </button>
  <ul id="menu-list"
      role="menu"
      aria-labelledby="menu-button"
      hidden>
    <li role="menuitem" tabindex="0">Save</li>
    <li role="menuitem" tabindex="0">Export</li>
    <li role="menuitem" tabindex="0">Delete</li>
  </ul>
</div>

<script>
// Keyboard event handlers
document.getElementById('menu-button').addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
    e.preventDefault();
    openMenu();
  }
});

document.querySelectorAll('[role="menuitem"]').forEach((item, index, items) => {
  item.addEventListener('keydown', (e) => {
    switch(e.key) {
      case 'ArrowDown':
        e.preventDefault();
        items[(index + 1) % items.length].focus();
        break;
      case 'ArrowUp':
        e.preventDefault();
        items[(index - 1 + items.length) % items.length].focus();
        break;
      case 'Escape':
        closeMenu();
        document.getElementById('menu-button').focus();
        break;
    }
  });
});
</script>

<!-- INCORRECT: Click-only interaction -->
<div onclick="showMenu()">Options</div>
```

--------------------------------

### WCAG 2.2 Dragging Movements (AA) Alternative Implementation HTML/JS

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Provides HTML and JavaScript examples for WCAG 2.5.7 Dragging Movements (AA), demonstrating how to implement single-pointer alternatives for dragging functionality, such as sortable lists and sliders.

```html
<!-- Success Criterion 2.5.7 Dragging Movements (Level AA) - New in 2.2 -->

<!-- CORRECT: Sortable list with both drag and button controls -->
<ul class="sortable-list" role="list">
  <li draggable="true" role="listitem">
    <span class="drag-handle" aria-label="Drag to reorder">⋮⋮</span>
    <span>Item 1</span>
    <button onclick="moveUp(this)" aria-label="Move up">↑</button>
    <button onclick="moveDown(this)" aria-label="Move down">↓</button>
  </li>
  <li draggable="true" role="listitem">
    <span class="drag-handle" aria-label="Drag to reorder">⋮⋮</span>
    <span>Item 2</span>
    <button onclick="moveUp(this)" aria-label="Move up">↑</button>
    <button onclick="moveDown(this)" aria-label="Move down">↓</button>
  </li>
</ul>

<script>
// Single-pointer alternative implementation
function moveUp(button) {
  const listItem = button.closest('li');
  const previousItem = listItem.previousElementSibling;
  if (previousItem) {
    listItem.parentNode.insertBefore(listItem, previousItem);
    button.focus();
  }
}

function moveDown(button) {
  const listItem = button.closest('li');
  const nextItem = listItem.nextElementSibling;
  if (nextItem) {
    listItem.parentNode.insertBefore(nextItem, listItem);
    button.focus();
  }
}
</script>

<!-- CORRECT: Slider with click-to-position alternative -->
<div class="custom-slider">
  <input type="range"
         min="0"
         max="100"
         value="50"
         aria-label="Volume">
  <button onclick="setValue(0)" aria-label="Set to minimum">Min</button>
  <button onclick="setValue(50)" aria-label="Set to middle">Mid</button>
  <button onclick="setValue(100)" aria-label="Set to maximum">Max</button>
</div>
```

--------------------------------

### JavaScript for WebAuthn Passkey Authentication

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

A JavaScript snippet demonstrating the initiation of WebAuthn (Passkey) authentication using the `navigator.credentials.get()` API. This method provides a secure and accessible authentication alternative that avoids cognitive tests. It includes basic error handling for the authentication process.

```javascript
// WebAuthn implementation
document.getElementById('passkey-btn')?.addEventListener('click', async () => {
  try {
    const credential = await navigator.credentials.get({
      publicKey: {
        challenge: new Uint8Array(32),
        rpId: 'example.com',
        userVerification: 'preferred'
      }
    });
    // Process authentication
  } catch (error) {
    console.error('Passkey authentication failed:', error);
  }
});
```

--------------------------------

### WCAG 2.2 Level AA Conformance Checklist (Markdown)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

A comprehensive checklist in Markdown format for verifying WCAG 2.2 Level AA conformance across various success criteria, including Perceivable, Operable, Understandable, and Robust categories.

```markdown
# WCAG 2.2 Level AA Conformance Checklist

## Perceivable
- [ ] 1.1.1 Non-text Content (A): All images, controls, and media have text alternatives
- [ ] 1.2.1 Audio-only and Video-only (A): Alternatives provided for prerecorded media
- [ ] 1.2.2 Captions (Prerecorded) (A): Captions for all prerecorded audio
- [ ] 1.2.3 Audio Description or Media Alternative (A): Description for prerecorded video
- [ ] 1.2.4 Captions (Live) (AA): Captions for live audio content
- [ ] 1.2.5 Audio Description (Prerecorded) (AA): Audio description for video
- [ ] 1.3.1 Info and Relationships (A): Structure programmatically determinable
- [ ] 1.3.2 Meaningful Sequence (A): Correct reading sequence maintained
- [ ] 1.3.3 Sensory Characteristics (A): Instructions not solely sensory-based
- [ ] 1.3.4 Orientation (AA): Content works in portrait and landscape
- [ ] 1.3.5 Identify Input Purpose (AA): Input purpose programmatically determined
- [ ] 1.4.1 Use of Color (A): Color not the only visual means of conveying info
- [ ] 1.4.2 Audio Control (A): Mechanism to pause/stop auto-playing audio
- [ ] 1.4.3 Contrast (Minimum) (AA): 4.5:1 contrast for normal text
- [ ] 1.4.4 Resize Text (AA): Text resizable to 200% without loss of function
- [ ] 1.4.5 Images of Text (AA): Real text used instead of images of text
- [ ] 1.4.10 Reflow (AA): Content reflows at 320 CSS pixels width
- [ ] 1.4.11 Non-text Contrast (AA): 3:1 contrast for UI components
- [ ] 1.4.12 Text Spacing (AA): No loss of content with adjusted text spacing
- [ ] 1.4.13 Content on Hover or Focus (AA): Dismissible, hoverable, persistent

```

--------------------------------

### HTML Form for Password Re-entry Exception (WCAG 2.2)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Illustrates the exception for WCAG 2.2 Success Criterion 3.3.7 Redundant Entry, where security-sensitive data like passwords can require re-entry for verification. This HTML snippet shows a password and confirmation field with an accompanying note explaining the reason for re-entry.

```html
<!-- CORRECT: Password re-entry exception -->
<form>
  <label>New Password: <input type="password" name="password" required></label>
  <label>Confirm Password:
    <input type="password"
           name="confirm-password"
           required
           aria-describedby="password-note">
  </label>
  <p id="password-note">
    <!-- Exception: Security-sensitive data can require re-entry -->
    Re-enter password for verification
  </p>
</form>
```

--------------------------------

### WCAG 2.2 Relative Luminance and Contrast Ratio Calculation (JavaScript)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Calculates relative luminance for sRGB colors and contrast ratios between two colors, implementing WCAG 2.2 criteria for AA and AAA conformance levels. This function requires 8-bit RGB values as input and outputs the contrast ratio.

```javascript
// Relative luminance calculation for sRGB colorspace
// As defined in WCAG 2.2 specification

function getRelativeLuminance(r8bit, g8bit, b8bit) {
  // Convert 8-bit RGB values to sRGB
  const RsRGB = r8bit / 255;
  const GsRGB = g8bit / 255;
  const BsRGB = b8bit / 255;

  // Apply gamma correction
  const R = RsRGB <= 0.04045
    ? RsRGB / 12.92
    : Math.pow((RsRGB + 0.055) / 1.055, 2.4);

  const G = GsRGB <= 0.04045
    ? GsRGB / 12.92
    : Math.pow((GsRGB + 0.055) / 1.055, 2.4);

  const B = BsRGB <= 0.04045
    ? BsRGB / 12.92
    : Math.pow((BsRGB + 0.055) / 1.055, 2.4);

  // Calculate relative luminance
  const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;

  return L;
}

function getContrastRatio(color1, color2) {
  const l1 = getRelativeLuminance(color1.r, color1.g, color1.b);
  const l2 = getRelativeLuminance(color2.r, color2.g, color2.b);

  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);

  const contrastRatio = (lighter + 0.05) / (darker + 0.05);

  return contrastRatio;
}

function meetsWCAG_AA_Normal(contrastRatio) {
  return contrastRatio >= 4.5;
}

function meetsWCAG_AA_Large(contrastRatio) {
  return contrastRatio >= 3.0;
}

function meetsWCAG_AAA_Normal(contrastRatio) {
  return contrastRatio >= 7.0;
}

function meetsWCAG_AAA_Large(contrastRatio) {
  return contrastRatio >= 4.5;
}

// Example usage
const textColor = { r: 89, g: 89, b: 89 };      // #595959
const backgroundColor = { r: 255, g: 255, b: 255 }; // #ffffff

const contrast = getContrastRatio(textColor, backgroundColor);
console.log(`Contrast ratio: ${contrast.toFixed(2)}:1`);
console.log(`Meets AA (normal text): ${meetsWCAG_AA_Normal(contrast)}`);
console.log(`Meets AAA (normal text): ${meetsWCAG_AAA_Normal(contrast)}`);

// Output:
// Contrast ratio: 4.51:1
// Meets AA (normal text): true
// Meets AAA (normal text): false

```

--------------------------------

### HTML Form with Auto-population for Redundant Entry (WCAG 2.2)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Demonstrates a multi-step form where user input from a shipping address is auto-populated into the billing address fields. It uses HTML forms and JavaScript with sessionStorage to store and retrieve data. This helps meet WCAG 2.2 Success Criterion 3.3.7 by reducing redundant data entry.

```html
<!-- Success Criterion 3.3.7 Redundant Entry (Level A) - New in 2.2 -->

<!-- CORRECT: Multi-step form with auto-population -->

<!-- Step 1: Shipping Address -->
<form id="shipping-form">
  <h2>Shipping Address</h2>
  <label>Full Name: <input name="name" type="text" required></label>
  <label>Address: <input name="address" type="text" required></label>
  <label>City: <input name="city" type="text" required></label>
  <label>Postal Code: <input name="postal" type="text" required></label>
  <button type="submit">Continue to Billing</button>
</form>

<!-- Step 2: Billing Address (auto-populated) -->
<form id="billing-form">
  <h2>Billing Address</h2>
  <label>
    <input type="checkbox" id="same-as-shipping" checked>
    Same as shipping address
  </label>

  <div id="billing-fields">
    <label>Full Name:
      <input name="billing-name"
             type="text"
             value="John Smith"  <!-- Auto-filled from shipping -->
             autocomplete="name">
    </label>
    <label>Address:
      <input name="billing-address"
             type="text"
             value="123 Main St"  <!-- Auto-filled -->
             autocomplete="street-address">
    </label>
  </div>

  <button type="submit">Continue to Payment</button>
</form>
```

```javascript
// Store entered data for auto-population
document.getElementById('shipping-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  sessionStorage.setItem('shippingData', JSON.stringify(Object.fromEntries(formData)));
});

// Populate billing form
window.addEventListener('load', () => {
  const shippingData = JSON.parse(sessionStorage.getItem('shippingData') || '{}');
  if (document.getElementById('same-as-shipping').checked) {
    document.querySelector('[name="billing-name"]').value = shippingData.name || '';
    document.querySelector('[name="billing-address"]').value = shippingData.address || '';
  }
});
```

--------------------------------

### CSS: Ensure Visible Focus Indicators and Non-Obscured Focus (WCAG 2.2)

Source: https://context7.com/context7/w3_tr_wcag22/llms.txt

Illustrates CSS techniques for WCAG 2.2 focus management. Covers 'Focus Not Obscured' (2.4.11) with sticky headers and scroll padding, and 'Focus Appearance' (2.4.13) with minimum perimeter (2 CSS pixels) and contrast (3:1) requirements for default and custom focus styles.

```css
/* Success Criterion 2.4.11 Focus Not Obscured (Minimum) (Level AA) - New in 2.2 */

/* CORRECT: Sticky header that doesn't obscure focused content */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  background: #ffffff;
}

.main-content {
  /* Ensure focused elements scroll into view with padding */
  scroll-padding-top: 70px;
}

/* Success Criterion 2.4.13 Focus Appearance (Level AAA) - New in 2.2 */

/* CORRECT: Focus indicator meeting 2 CSS pixel perimeter and 3:1 contrast */
button:focus,
a:focus,
input:focus {
  outline: 3px solid #0078d4;  /* 3px exceeds 2px requirement */
  outline-offset: 2px;
  /* Blue outline has 3.5:1 contrast against white background */
}

/* CORRECT: Custom focus indicator with area calculation */
.custom-button {
  width: 100px;
  height: 40px;
  border: 1px solid #767676;
}

.custom-button:focus {
  /* Perimeter = 2 * (100 + 40) = 280px
     Required indicator area = 280 * 2 = 560 CSS pixels
     3px outline provides: 2 * (106 + 46) * 3 = 912 CSS pixels ✓ */
  outline: 3px solid #ff6600;
  outline-offset: 0;
}
```

--------------------------------

### Calculate sRGB Relative Luminance

Source: https://www.w3.org/TR/WCAG22/index

This code snippet demonstrates how to calculate the relative luminance (L) for a given sRGB color. It includes the conversion from 8-bit R, G, B values to normalized RsRGB, GsRGB, BsRGB, and then applies the piecewise function to derive the linear R, G, B values before calculating the final luminance. This is essential for accessibility checks, particularly for color contrast.

```pseudocode
// Function to convert 8-bit sRGB to linear RGB component
function toLinearComponent(srgb_component) {
  if (srgb_component <= 0.04045) {
    return srgb_component / 12.92;
  } else {
    return Math.pow((srgb_component + 0.055) / 1.055, 2.4);
  }
}

// Function to calculate relative luminance
function calculateRelativeLuminance(R8bit, G8bit, B8bit) {
  // Normalize 8-bit RGB values to the range [0, 1]
  const RsRGB = R8bit / 255.0;
  const GsRGB = G8bit / 255.0;
  const BsRGB = B8bit / 255.0;

  // Convert normalized sRGB values to linear RGB values
  const R = toLinearComponent(RsRGB);
  const G = toLinearComponent(GsRGB);
  const B = toLinearComponent(BsRGB);

  // Calculate relative luminance using the sRGB formula
  const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
  return L;
}

// Example usage:
// const luminance = calculateRelativeLuminance(255, 0, 0); // For pure red
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.