집중

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

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

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

이 예에서 tabindex 속성의 값은 탭 순서가 혼란스러워졌습니다.

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

flex-flow: row-reverse; 선언이 시각적 순서를 반대로 바꾸었습니다. 또한 CSS order 속성이 여섯 번째 단어인 'This'에 적용되어 생성합니다. 탭 시퀀스는 더 이상 시각적 순서와 일치하지 않는 코드 순서이므로 연결 끊김이 발생합니다. 을 참조하시기 바랍니다.

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

전역 속성인 contenteditable 및 tabindex 속성은 모든 요소에 추가하여 포커스 가능하게 만들 수 있습니다. 어떻게 해야 할까요? 포커스 가능 요소에는 autofocus를 사용하여 마우스나 포인터로 포커스를 둘 수도 있습니다. 속성 집합 또는 스크립트(예: element.focus() 사용)에 의해 결정됩니다.

tabindex 속성

전역 tabindex 속성, 속성이 포함되어 있지 않으면 포커스를 받을 수 없는 요소를 포커스를 두는 것이 좋습니다.

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 속성을 사용합니다.

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 값을 사용하면 키보드 사용자가 상호작용 요소에 포커스를 둘 수 없지만 요소가 사용 중지되지는 않습니다. Pointer 사용자는 여전히 요소에 초점을 맞출 수 있습니다. 요소를 사용 중지하려면 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를 통해 비활성을 매우 명확하게 표시합니다.

포커스가 보이지 않는 콘텐츠로 이동하지 않도록 하세요. 자동으로 실행되지는 않지만 화면 밖에서 렌더링되는 모든 것 포커스가 비활성으로 전환되어야 할 때 표시됩니다. 콘텐츠가 숨겨져 있는 경우 이 페이지의 콘텐츠로 건너뛰기 링크와 같이 포커스가 있을 때 표시되면 비활성으로 만들 필요가 없습니다.

이해도 확인

이해도 확인

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