# फोकस प्रबंधन — वेब एक्सेसिबिलिटी (A11y)

Source: https://www.geekswithgeeks.com/hi/accessibility/a11y-focus

> कीबोर्ड उपयोगकर्ताओं के लिए फोकस क्रम और दृश्यता को नियंत्रित करें।

## Tab क्रम और दृश्य फोकस

फोकस डिफ़ॉल्ट रूप से HTML क्रम का अनुसरण करता है। `outline: none` को विकल्प के बिना कभी न छिपाएं। एक स्पष्ट फोकस सूचक दिखाएं (सीमा, पृष्ठभूमि, चमक)।

## Modal focus trap

जब मोडल खुलता है, तो फोकस को इसमें स्थानांतरित करें और Tab को इसके अंदर तब तक रखें जब तक बंद न हो।

```javascript
// Focus trap in modal
function openModal(id) {
  const modal = document.getElementById(id);
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });
  
  first.focus();
  modal.showModal();
}
```

## Focus styling सर्वश्रेष्ठ प्रथाएं

Focus को indicate करने के लिए box-shadow, outline-offset, या background color का उपयोग करें। पृष्ठभूमि के साथ 3:1 विपरीतता सुनिश्चित करें। केवल रंग पर rely न करें।

## CSS :focus-visible

Keyboard users के लिए focus को show करने के लिए :focus-visible का उपयोग करें, माउस के लिए नहीं।

```css
/* Show focus for keyboard, not mouse */
button:focus-visible {
  outline: 3px solid #10b981;
  outline-offset: 2px;
}

/* Mouse click won't show outline */
button:focus:not(:focus-visible) {
  outline: none;
}
```