집중

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

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

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

이 예에서는 tabindex 속성의 값이 탭 순서를 혼란스럽게 만들었습니다.

이 예에서 CSS는 탭 순서와 콘텐츠의 시각적 순서 사이에 차이를 만들었습니다.

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

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

전역 속성인 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는 요소가 우선순위가 지정된 포커스 시퀀스에 배치되어 포커스 순서의 혼란을 야기할 수 있습니다. 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를 통해 비활성을 매우 명확하게 만듭니다.

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

이해도 테스트

이해도 테스트

집중에 관한 지식을 테스트해 보세요.