फोकस प्रबंधन

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

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

Modal focus trap

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

// 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 का उपयोग करें, माउस के लिए नहीं।

/* 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;
}