포커스

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

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

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

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

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

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

flexbox, 그리드, 위치 지정, 변환, 다중 열을 비롯한 일부 CSS 기능은 콘텐츠의 시각적 순서를 변경할 수 있습니다. 키보드로 탭하여 콘텐츠를 테스트합니다. shift + tab을 사용하여 콘텐츠를 뒤로 이동합니다. CSS를 사용하여 포커스가 있는 요소를 나타냅니다. CSS로 포커스 가능한 요소의 순서를 재정렬하지 마세요.

모든 뷰포트 크기에서 논리적 탭 순서를 유지하는 것이 중요합니다.

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

contenteditable 및 tabindex 속성은 전역 속성이므로 모든 요소에 추가하여 포커스 가능하게 만들 수 있습니다. 포커스 가능한 요소 는 마우스 또는 포인터로 포커스를 맞출 수도 있습니다. autofocus 속성을 설정하거나 element.focus()와 같은 스크립트를 사용하면 됩니다.

tabindex 속성

속성에 도입된 전역 tabindex 속성을 사용하면 포커스를 받을 수 없는 요소가 일반적으로 Tab을 사용하여 포커스를 받을 수 있습니다. 따라서 이름이 지정됩니다.

tabindex 속성은 정수를 값으로 사용합니다. 음수 값은 요소를 포커스 가능하게 만들지만 탭 가능하게 만들지는 않습니다. tabindex 값이 0이면 요소가 포커스 가능하고 탭 가능하게 되며, 적용된 요소가 소스 코드 순서로 순차적 포커스 탐색 순서에 추가됩니다. 값이 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 속성을 사용하세요.

tabindex가 1 이상인 요소는 별도의 탭 시퀀스에 포함됩니다. 다음 Codepen과 같이 탭은 소스 순서로 일반 시퀀스 (tabindex 설정 또는 tabindex="0")를 거치기 전에 가장 낮은 값부터 가장 높은 값 순서로 별도의 시퀀스에서 시작됩니다.

양수 값이 있는 tabindex는 요소를 우선순위가 지정된 포커스 시퀀스에 배치하므로 포커스 순서가 혼란스러워질 수 있습니다. DOM 순서를 수정하지 마세요 tabindex. 탭 순서가 변경되면 사용자 경험이 저하되고 유지보수가 어려워집니다.

contenteditable 속성

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

상호작용 요소에 autofocus 제공

불리언 autofocus 는 모든 요소에 설정할 수 있는 전역 속성이지만 비활성 요소를 상호작용 요소로 만들지는 않습니다. 페이지가 로드되면 autofocus 속성이 있는 첫 번째 포커스 가능한 요소가 표시되고 <dialog>에 중첩되지 않는 한 포커스를 받습니다.

콘텐츠에 자동으로 포커스를 설정하면 사용자에게 혼란을 줄 수 있습니다. 양식 컨트롤에 autofocus를 설정하면 페이지 로드 시 양식 컨트롤이 뷰로 스크롤됩니다. 스크린 리더 사용자 및 뷰포트가 작은 사용자를 비롯한 사용자가 양식의 안내 또는 양식 컨트롤의 라벨을 놓칠 수 있습니다. 또한 autofocus 속성은 문서의 순차적 포커스 탐색 순서를 변경하지 않습니다. 자동 포커스 요소 앞에 오는 시퀀스의 요소는 건너뜁니다. 이러한 이유로 autofocus 속성을 사용하지 않는 것이 좋습니다.

'"autofocus를 사용하지 마세요"' 권장사항의 예외는 autofocus 속성을 <dialog> 요소 내에 포함하는 것입니다. 대화상자가 열리면 브라우저가 <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 속성은 inert 요소에 적용되지 않으며 <form> 요소에도 적용되지 않습니다.tabindexcontenteditable 이러한 요소를 사용 중지하려면 전역 inert 속성을 사용하면 됩니다.

inert 속성

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

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

비활성 상태를 나타내는 스타일 없이 표시되는 콘텐츠에 inert를 사용하면 사용자 경험이 저하될 수 있습니다. 비활성 콘텐츠는 스크린 리더 사용자가 사용할 수 없으므로 시력이 있는 스크린 리더 사용자가 접근성 도구에서 사용할 수 없는 콘텐츠를 화면에서 볼 때 혼란을 줄 수 있습니다. CSS로 비활성 상태를 매우 명확하게 만드세요.

포커스가 표시되지 않는 콘텐츠로 이동하지 않도록 하세요. 포커스가 맞춰질 때 자동으로 뷰에 표시되지 않는 화면 밖에서 렌더링되는 모든 항목은 비활성 상태로 만들어야 합니다. 콘텐츠가 숨겨져 있지만 포커스가 맞춰질 때 뷰에 표시되는 경우(예: 콘텐츠로 건너뛰기 링크) 비활성 상태로 만들 필요가 없습니다.

이해도 테스트

포커스에 관한 지식을 테스트합니다.