포커스

양식 컨트롤, 링크, 버튼을 비롯한 대화형 요소는 기본적으로 포커스 가능하고 탭 가능합니다. 탭으로 이동 가능한 요소는 문서의 순차적 포커스 탐색 순서에 포함됩니다. 다른 요소는 비활성 상태로, 상호작용이 불가능합니다. HTML 속성을 사용하면 상호작용 요소를 비활성 상태로 만들고 비활성 요소를 상호작용 상태로 만들 수 있습니다.

기본적으로 탐색 포커스 순서는 시각적 순서와 동일하며, 이는 소스 코드 순서입니다. 이 순서를 변경할 수 있는 HTML 속성과 콘텐츠의 시각적 순서를 변경할 수 있는 CSS 속성이 있습니다. HTML로 탭 순서를 변경하거나 CSS로 시각적 렌더링 순서를 변경하면 사용자 경험에 해를 끼칠 수 있습니다.

CSS와 HTML로 인식되는 실제 탭 순서를 변경하지 마세요. 다음 두 예에서 볼 수 있듯이 시각적으로 예상되는 순서와 다른 탭 순서는 사용자에게 혼란을 주고 사용자 환경에 좋지 않습니다.

이 예시에서 tabindex 속성 값으로 인해 탭 순서가 혼란스러워졌습니다.

이 예에서는 CSS로 인해 탭 순서와 콘텐츠의 시각적 순서가 달라졌습니다.

flex-flow: row-reverse; 선언으로 시각적 순서가 반전되었습니다. 또한 CSS order 속성이 여섯 번째 단어인 'This'에 적용되어 해당 단어가 시각적으로 이동했습니다. 탭 순서는 코드의 순서이며, 더 이상 시각적 순서와 일치하지 않아 키보드 사용자의 연결이 끊어집니다.

비활성 요소를 대화형으로 만들기

contenteditable 및 tabindex 속성은 전역 속성이므로 모든 요소에 추가할 수 있으며, 이 과정에서 포커스를 지정할 수 있습니다. autofocus 속성을 설정하거나 element.focus()과 같은 스크립트를 사용하여 마우스나 포인터로 포커스 가능한 요소에 포커스를 설정할 수도 있습니다.

tabindex 속성

속성에 도입된 전역 tabindex 속성을 사용하면 포커스를 받을 수 없는 요소가 포커스를 받을 수 있습니다(일반적으로 Tab 사용). 이름이 여기서 유래했습니다.

tabindex 속성은 정수를 값으로 사용합니다. 음수 값은 요소를 포커스 가능하게 하지만 탭 가능하게 하지는 않습니다. 0의 tabindex 값은 요소를 포커스 가능하고 탭 가능하게 만들어 적용된 요소를 소스 코드 순서의 순차적 포커스 탐색 순서에 추가합니다. 값이 1 이상이면 요소에 포커스를 지정하고 탭으로 이동할 수 있지만 우선순위가 지정된 탭 순서에 추가되므로 피해야 합니다.

이 페이지에서 공유 버튼 <share-action>는 맞춤 요소입니다. tabindex="0"는 일반적으로 포커스를 받을 수 없는 이 요소를 키보드 기본 탭 순서에 추가합니다.

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

이 페이지에 다른 맞춤 요소가 있습니다. 로컬 탐색에는 음수 tabindex 값이 있는 맞춤 요소가 있습니다.

<web-navigation-drawer type="standard" tabindex="-1">

값이 음수인 tabindex 속성은 요소를 포커스 가능하게 하지만 탭 가능하게 하지는 않습니다. 요소가 HTMLElement.focus() 사용과 같이 포커스를 받을 수 있지만 순차적 포커스 탐색 순서에 포함되지 않습니다. 탭으로 이동할 수 없고 포커스를 받을 수 있는 요소의 규칙은 tabindex="-1"를 사용하는 것입니다. 대화형 요소에 tabindex="-1"를 추가하면 더 이상 탭으로 이동할 수 없습니다.

element.focus() 메서드를 사용하여 포커스 가능 요소에 포커스를 설정할 수 있습니다. 브라우저는 포커스가 있는 요소를 뷰로 스크롤합니다. 따라서 element.focus({preventScroll:true}) 사용을 피하세요. 표시되지 않는 요소에 포커스를 두는 것은 사용자 환경에 좋지 않습니다.

문서를 쿼리하여 포커스가 있는 요소를 확인하려면 읽기 전용 Document.activeElement 속성을 사용하세요.

1 이상의 tabindex가 있는 요소는 별도의 탭 시퀀스에 포함됩니다. Codepen에서 확인할 수 있듯이 탭 이동은 소스 순서대로 일반 시퀀스(tabindex이 설정되지 않았거나 tabindex="0")를 거치기 전에 가장 낮은 값에서 가장 높은 값 순서로 별도의 시퀀스에서 시작됩니다.

값이 양수인 tabindex는 요소를 우선순위가 지정된 포커스 시퀀스에 배치하므로 포커스 순서가 혼란스러워질 수 있습니다. tabindex로 DOM 순서를 수정하지 마세요. 탭 순서가 변경되면 사용자 환경이 나빠질 뿐만 아니라 개발자가 관리하고 유지하기도 어렵습니다.

contenteditable 속성

contenteditable 속성은 앞에서 설명했습니다. 요소에 contenteditable="true"를 설정하면 수정 가능하고, 포커스 가능하며, 탭 순서의 일부가 됩니다. 포커스 동작은 tabindex="0"을 설정하는 것과 비슷하지만 동일하지는 않습니다. 중첩된 contenteditable 요소는 포커스 가능하지만 탭으로 이동할 수는 없습니다. 중첩된 contenteditable 요소를 탭으로 이동할 수 있도록 하려면 tabindex="0"를 추가하여 순차적 포커스 탐색 순서에 추가합니다.

상호작용 요소에 autofocus 부여

불리언 autofocus는 모든 요소에 설정할 수 있는 전역 속성이지만, 비활성 요소를 대화형으로 만들지는 않습니다. 페이지가 로드되면 autofocus 속성이 있는 첫 번째 포커스 가능 요소가 포커스를 받습니다. 단, 해당 요소가 표시되고 <dialog>에 중첩되지 않는 경우에만 해당합니다.

콘텐츠에 자동으로 포커스를 설정하면 혼란스러울 수 있습니다. 양식 컨트롤에 autofocus를 설정하면 페이지 로드 시 양식 컨트롤이 표시되도록 스크롤됩니다. 스크린 리더 사용자 및 작은 뷰포트 사용자를 비롯한 모든 사용자가 양식의 안내를 '보지' 못할 수 있으며, 양식 컨트롤의 일반적으로 표시되는 라벨을 지나 스크롤할 수도 있습니다. autofocus 속성은 문서의 순차적 포커스 탐색 순서를 변경하지 않습니다. 자동 포커스 요소 앞에 오는 시퀀스의 요소는 건너뜁니다. 이러한 이유로 autofocus 속성을 포함하지 않는 것이 좋습니다.

'autofocus를 사용하지 마세요' 권장사항의 예외는 <dialog> 요소 내에 autofocus 속성을 포함하는 것입니다. 대화상자가 열리면 브라우저가 <dialog> 내에서 포커스 가능한 첫 번째 대화형 요소에 자동으로 포커스를 맞추므로 요소에 autofocus를 추가할 필요가 없습니다. 대화상자가 열릴 때 대화상자 내의 특정 대화형 요소에 포커스가 지정되도록 하려면 해당 요소에 autofocus 속성을 추가하세요.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

닫기 <button>에 설정된 autofocus 속성을 사용하면 대화상자가 열릴 때 포커스를 받을 수 있습니다. 대화상자의 첫 번째 요소이므로 어떤 경우에도 포커스를 받았을 것입니다. 기본적으로 대화상자가 열리면 대화상자 내의 다른 요소에 autofocus 속성이 설정되어 있지 않는 한 대화상자 내의 포커스 가능한 첫 번째 요소에 포커스가 지정됩니다.

상호작용 요소를 비활성 상태로 만들기

탭 순서에서 대화형 요소를 삭제할 수 있는 HTML 속성도 있습니다. 포커스 가능 요소에 음수 tabindex를 포함하고, 지원 양식 컨트롤에 disabled 속성을 추가하고, 컨테이너에 전역 inert 속성을 추가하면 요소가 탭으로 이동할 수 없게 됩니다. 이 세 가지 속성은 서로 바꿔서 사용할 수 없습니다.

음수 tabindex 값

값이 음수인 tabindex 속성은 요소를 포커스 가능하게 만들지만 탭 가능하게 만들지는 않습니다. 링크, 버튼, 양식 컨트롤, contenteditable인 요소를 포함하여 기본적으로 포커스 가능한 요소에 tabindex="0"를 추가할 필요는 없습니다. 음수 값이 있는 tabindex를 포함하면 일반적으로 탭으로 이동 가능한 요소가 순차적 포커스 탐색 순서에서 삭제됩니다.

tabindex 값이 음수이면 키보드 사용자가 대화형 요소에 포커스를 둘 수 없지만 요소가 사용 중지되지는 않습니다. 포인터 사용자는 여전히 요소에 포커스를 둘 수 있습니다. 요소를 사용 중지하려면 disabled 속성을 사용합니다.

사용 중지됨

불리언 disabled 속성은 적용된 양식 컨트롤과 그 하위 요소(있는 경우)에 포커스를 둘 수 없게 합니다. 사용 중지된 양식 컨트롤은 포커스를 받을 수 없고, 클릭 이벤트를 받지 않으며, 양식 제출 시 제출되지 않습니다.

disabled은(는) 전역 속성이 아닙니다. <button>, <input>, <optgroup>, <option>, <select>, <textarea>, 양식 연결 맞춤 요소, <fieldset>에 적용됩니다. <optgroup> 또는 <fieldset>에 설정하면 <fieldset>의 첫 번째 <legend>의 콘텐츠를 제외한 모든 하위 양식 컨트롤이 사용 중지됩니다.

disabled를 지원하는 동일한 요소는 :disabled 및 :enabled 유사 클래스로도 타겟팅할 수 있습니다. disabled 속성으로 사용 중지된 요소는 accent-color이 설정된 경우에도 일반적으로 사용자 에이전트 스타일시트로 밝은 회색으로 스타일이 지정됩니다.

불리언 속성이므로 속성이 있으면 그렇지 않은 경우 사용 설정된 요소가 사용 중지됩니다. false로 설정할 수 없습니다. 사용 중지된 요소를 다시 사용 설정하려면 일반적으로 Element.removeAttribute('disabled')를 사용하여 속성을 삭제해야 합니다.

HTMLInputElement.disabled 속성을 사용하면 입력이 사용 중지되었는지 확인할 수 있습니다. disabled는 전역 속성이 아니므로 HTMLElement에서 상속되지 않지만 HTMLSelectElement, HTMLTextareaElement와 같은 지원 요소 인터페이스에는 동일한 읽기 전용 속성이 있습니다.

disabled 속성은 tabindex 또는 contenteditable로 포커스 가능하게 만들어진 일반적으로 inert 요소에 적용되지 않으며 <form> 요소에도 적용되지 않습니다. 이러한 요소를 사용 중지하려면 전역 inert 속성을 사용하면 됩니다.

inert 속성

inert 전역 불리언 속성이 요소에 추가되면 해당 요소와 모든 중첩된 콘텐츠가 사용 중지되므로 클릭하거나 탭으로 이동할 수 없습니다. 또한 접근성 트리에서도 삭제됩니다. inert는 모든 요소에 적용할 수 있지만 일반적으로 화면에 표시되지 않거나 숨겨진 콘텐츠와 같은 콘텐츠 섹션에 사용됩니다.

양식 컨트롤에 disabled를 적용하면 브라우저에서 기본 스타일을 제공하며 :disabled 의사 클래스를 사용하여 스타일을 지정할 수 있습니다. inert 속성은 시각적 표시기를 제공하지 않으며 일치하는 의사 클래스가 없습니다 ([inert] 속성 선택기는 일치함).

비활성 상태를 나타내는 스타일 없이 표시되는 콘텐츠에 inert를 사용하면 사용자 경험이 저하될 수 있습니다. 비활성 콘텐츠는 스크린 리더 사용자에게 제공되지 않으므로 시력이 있는 스크린 리더 사용자가 접근성 도구에서 사용할 수 없는 콘텐츠를 화면에 표시하면 혼란을 초래할 수 있습니다. CSS를 사용하여 비활성 상태를 명확하게 표시합니다.

포커스가 표시되지 않는 콘텐츠로 이동하지 않도록 합니다. 포커스가 지정될 때 자동으로 표시되지 않는 오프스크린으로 렌더링된 항목은 inert로 만들어야 합니다. 콘텐츠가 숨겨져 있지만 콘텐츠로 이동 링크와 같이 포커스가 맞춰지면 표시되는 경우 비활성으로 만들지 않아도 됩니다.

이해도 확인

포커스에 대한 지식을 테스트해 보세요.