tabindex와 accesskey

키보드 탐색

tabindex="0"

<div tabindex="0" role="button" onclick="handleClick()">
  Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->

<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>

tabindex="-1"

<div id="modal" tabindex="-1" role="dialog">
  <!-- modal content -->
</div>

<script>
// Open modal and send focus to it:
document.getElementById('modal').focus();
// Modal is now focused but not in the normal tab sequence
</script>

양수 tabindex 값은 피해야 합니다

<!-- BAD: positive tabindex creates unpredictable order -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<!-- The tab order becomes: 1, 2, 3, then all tabindex=0 elements -->
<!-- This almost always confuses users and fails WCAG 2.4.3 -->

<!-- Fix the DOM order instead of using positive tabindex -->

SPA에서 포커스 관리하기

// When navigating to a new route:
document.querySelector('#main-content').focus();

// When opening a modal:
const modal = document.getElementById('modal');
modal.removeAttribute('hidden');
modal.querySelector('[autofocus], button, [tabindex]').focus();

// When closing a modal: return focus to the trigger
document.getElementById('open-btn').focus();

모달에서 포커스 가두기

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.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();
      }
    }
  });
}

accesskey 속성

<button accesskey="s">Submit</button>
<!-- On Windows: Alt+S focuses/activates the button -->
<!-- On Mac: Control+Option+S -->
<!-- On Firefox: Shift+Alt+S -->

<a href="/" accesskey="h">Home</a>

accesskey의 한계

포커스 표시기는 항상 표시하기

/* BAD: removes focus outline for everyone */
* { outline: none; }

/* Better: style focus outlines, don't remove them */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
  border-radius: 3px;
}

/* :focus-visible only shows outline for keyboard navigation -->
/* Mouse clicks do not trigger :focus-visible in modern browsers */

건너뛰기 링크 패턴

<a href="#main-content" class="skip-link">Skip to main content</a>

<nav>... long navigation ...</nav>

<main id="main-content" tabindex="-1">... content ...</main>

<!-- CSS: -->
<!--
.skip-link {
  position: absolute;
  top: -100%;
}
.skip-link:focus {
  top: 0;
}
-->

autofocus 속성

<input type="search" autofocus placeholder="Search...">
<!-- Useful on search pages or forms with a single primary field -->
<!-- Use sparingly: it can disrupt users who rely on the page top for orientation -->
<!-- Only one element per page should have autofocus -->

빠른 확인

복습: tabindex와 accesskey