성공기준 이해 2.4.13:Focus Appearance (Level AAA)

최소 영역

성공 기준의 첫 번째 부분은 초점 표시기의 최소 영역을 지정한다.

• 초점을 받지 않은 구성 요소 또는 하위 구성요소의 외곽 두께를 2 CSS 픽셀 이상으로 설정헤애 한다.

이는 초점 표시기의 최소 영역만 지정한다. 초점 표시기가 문자 그대로 2 CSS 픽셀 두께의 윤곽선일 필요는 없으며 지시자는 최소한 그만큼 커야 한다.

그러나 크기 요구 사항을 충족하는 가장 간단한 방법은 실선인 2 CSS 픽셀 외곽 두께의 초점 표시기를 사용하는 것이다.

실선인 윤곽선 사용

이 요구 사항을 충족하는 가장 쉽고 가장 일반적인 방법은 구성 요소 주위에 실선 윤곽선을 사용하는 것이다. 윤곽선의 두께는 최소 2px 이상이어야 한다. 다음 그림은 최소 두께의 초점 표시기를 보여준다. 예제 버튼 주변의 페이지 배경을 구성하는 2px 두께의 흰색 픽셀 띠가 검은색으로 변경되었다.

직사각형이 아닌 구성 요소의 경우 "외곽" 정의를 통해 저작자는 다음 유형의 윤곽선 중 하나를 사용할 수 있다.

• 모양을 견고하게 둘러싸는 선, 또는
• 도형의 최소 경계 상자(minimum bounding box)를 견고히 둘러싸는 선

예를 들어 별 모양 버튼은 별 모양을 따르는 초점 표시기나 별의 경계 상자를 따르는 초점 표시기를 사용할 수 있다. 다음 예에서는 동일한 별 세 개가 이미 선택되어 있으며 세 번째 별에 초점이 맞춰져 있다. 첫 번째 예에서는 초점이 맞춰진 별의 별 모양과 일치하는 초점 표시기를 사용한다. 두 번째는 직사각형 표시기를 사용한다.

위의 예에서처럼 초점이 맞춰진 구성 요소에서 지시자를 약간 떨어지게 배치하는 것은 성공 기준의 최소 영역 요구 사항을 충족하는 데 필요하지 않지만 표시기를 더 잘 보이게 하는 데 도움이 될 수 있다. CSS에서는 이를 달성하기 위해 outline 및 outline-offset 속성이 일반적으로 사용된다.

여전히 "외곽"인 가능한 가장 작은 2 CSS 픽셀 두께 지시자는 예를 들어 CSS border 속성을 사용하여 구성 요소의 외부 가장자리에 대해 구성 요소 내부에 나타나는 실선이다. 구성 요소 외부 가장자리에 직접 삽입되지 않고 구성 요소 내에 추가로 삽입되는 표시기는 최소 크기 요구 사항을 충족하려면 2 CSS 픽셀보다 두꺼워야 한다.

초점 표시기가 구성 요소의 가장 자리로부터 떨어졌는지, 삽입되었는지 또는 반대인지에 따라 다른 텍스트가 아닌 콘텐츠의 명도대비 요구 사항이 적용될 수 있다. 아래의 텍스트가 아닌 콘텐츠의 명도대비 섹션과의 관계를 참조하라.

기타 표시기 모양

이 성공 기준에서는 초점 표시가 실선 윤곽선일 것을 요구하지 않는다. 최소 영역 요구 사항을 충족하는 한 다른 모양을 사용할 수도 있다.

컨트롤에 대한 초점 표시기의 최소 영역은 컨트롤의 초점이 맞지 않은 상태에서 컨트롤의 둘레(또는 최소 경계 상자) 두께 2 CSS 픽셀의 영역이다. 예를 들어 컨트롤이 너비 90px, 높이 30px의 직사각형인 경우 2 CSS 픽셀 두께의 둘레 영역은 다음 영역 간의 차이이다.

• 92px x 32px 직사각형(모든 측면에서 1px 더 큼) 및
• 88px x 28px 직사각형(모든 면에서 1px 더 작음)

결과적으로 최소 영역은 (92px * 32px) - (88px * 28px) = 480px²이다.

일반적인 모양의 2 CSS 픽셀 두께 둘레에 대한 몇 가지 일반 공식은 다음과 같다.

너비가 w이고 높이가 h인 직사각형

4h + 4w

반지름이 r인 원

4𝜋r

너비가 w, 높이가 h, 테두리 반경이 r인 둥근 직사각형

4h + 4w - (16 - 4𝜋)r

참고

초점 표시기가 충분히 큰지 확인하기 위해 복잡한 수학을 사용해야 하는 경우 이는 아마도 대신 더 큰 표시기를 사용해야 한다는 신호일 것이다. 항목이 초점을 받을 때 눈에 보이는 변화가 클수록 다른 사람이 더 쉽게 볼 수 있다.

다음 2가지 예에서는 최소 영역 요구 사항이 480px²인 90px 너비 x 30px 높이 버튼을 사용한다.

참고

초점 컨트롤의 너비와 높이에 따라 크기가 조정되는 초점 표시기 기술을 사용하는 것이 좋다. 그렇지 않고 페이지의 다양한 변형(예: 반응형 디자인)에서 컨트롤의 크기가 변경되면 표시기가 일부 변형에서는 영역 요구 사항을 충족하지만 다른 변형에서는 충족하지 못할 수 있다. 예를 들어, 위 그림에서 버튼이 넓어짐에 따라 두 개의 강조 표시 직사각형의 너비가 조정되지 않는 경우 더 긴 버튼 레이블을 수용하기 위해 버튼이 더 넓어져야 한다면 최소 영역 요구 사항을 충족하지 못하게 된다.

영역 요구 사항을 충족하는 또 다른 방법은 색상을 변경하는 등 전체 구성 요소의 모양을 변경하는 것이다. 단, 새 색상은 원래 색상에 대해 최소 3:1의 명암비를 가져야 한다. 이는 밀접하게 배치된 버튼 세트에서 효과적일 수 있다. 다음 예에서는 별점 5개를 사용하여 이를 보여준다. 중심 별은 초점을 나타 내기 위해 더 어두운 색상으로 채워진다. 그러나 구성 요소가 서로 가까이 있지 않아 쉽게 비교할 수 없는 경우 이러한 초점 표시기를 감지하는 것이 훨씬 더 어렵다. 확대를 사용하는 사용자의 경우 상대적으로 가까운 구성 요소라도 비교하기 어려울 수 있으므로 모범 사례로 간주되지 않는다.

인라인 링크

인라인 링크가 여러 줄에 걸쳐 끊어진 경우 초점 표시기를 만드는 일부 방법은 브라우저별로 다른 결과를 생성한다. CSS outline은 여러 줄에 걸쳐 있는 링크의 각 부분을 개별적으로 둘러싼다. 이는 초점 표시를 위한 가장 일반적인 CSS 기술이며, 각 부분이 견고하게 바인딩되어 있으므로 최소 경계 상자 정의를 만족하는 결과를 생성한다. CSS border는 링크 부분에 걸쳐 경계를 분할하므로 링크의 각 줄에 대해 닫히지 않은 테두리가 생성된다. 최소 경계 상자 정의에 따르면 링크가 모두 한 줄에 있는 것처럼 링크 포커스를 평가할 수 있으므로 2px 두께의 테두리도 최소 영역 요구 사항을 충족하는 것으로 간주됩니다. 따라서 대비 요구 사항이 충족되는 경우 이러한 각 방법을 사용하면 충분한 초점 표시기를 생성할 수 있다.

대비의 변화

적합 기준 지표 요구 사항의 두 번째 부분에는 지표 영역이 다음과 같이 명시되어 있다.

• 초점을 받은 상태와 받지 않은 상태의 동일한 픽셀 간 명도대비율이 최소 3:1 이상이어야 한다.

이 요구 사항은 서로 다른 상태의 동일한 픽셀 간의 대비 변화를 측정한다. 이는 한 번에 단일 상태에서 서로 다른 인접한 픽셀 간의 대비를 측정하는 텍스트 대비 및 텍스트가 아닌 콘텐츠의 명도대비 성공 기준과 다르다.

3:1은 허용되는 최소 대비 변경 비율이지만 상태 간의 대비 변경이 클수록 사용자가 초점 표시를 더 쉽게 볼 수 있다. 저작자는 대비 변화 비율을 최대한 크게 만드는 것이 좋다.

다음 그림은 페이지 배경을 구성하는 흰색 픽셀 중 일부가 원래 흰색과 3:1 대비 비율을 갖는 중간 회색으로 변경된 최소 대비 초점 표시기를 보여준다. 저작자는 최소 초점 형태를 초과하는 것이 좋다. 예를 들어, 그림 2와 3의 진한 파란색 선이 훨씬 더 잘 보인다.

초점 표시기를 포함하도록 구성 요소가 변경되면 해당 변경 사항은 색상 대비의 변경으로 측정될 수 있다. 예를 들어, 파란색 배경의 버튼에 노란색 윤곽선을 추가하면 색상이 파란색에서 노란색으로 변경된다. 이러한 변화는 포커스 표시기가 구성 요소 주변의 배경에 있는지, 아니면 구성 요소 내의 배경에 있는지 측정할 수 있다.

초점을 받는 컨트롤이 배경(채우기 색상)을 원래 배경과 3:1 미만의 대비를 이루는 색상으로 변경하면 대비 변경이 통과되지 않는다.

배경 변화가 충분하면 기준을 통과하는 방식이다.

부분적으로 대조되는 표시기

전체 초점 표시가 3:1 대비 변경을 가질 필요는 없다. 표시기의 대비 부분이 최소 영역 요구 사항을 충족하는 한 표시기의 일부만 대비 요구 사항 변경을 충족하는 것으로 충분하다.

초점 표시가 최소 영역 요구 사항을 충족하는지 여부를 계산할 때 대비 변경 요구 사항을 충족하는 표시 부분만 계산에 포함되어야 한다.

그라디언트

초점 표시기에 그라디언트가 있는 경우 원칙은 변경된 영역의 대비를 측정하고 대비 변경 비율이 3:1 미만인 그라디언트 부분을 무시하는 것이다.

대비 변화율이 3:1 미만인 영역을 제거하면 표시기의 나머지 부분의 면적을 계산하여 표시기가 최소 영역 요구 사항을 충족하는지 확인할 수 있다.

참고

이 문서의 일부 예는 요소의 화면 캡처 이미지이다. 이러한 이미지의 해상도 손실로 인해 실제 픽셀 색상이 원본과 일치하지 않을 수 있다. 따라서 이는 설명 목적으로 사용하기 위한 것이며 충분한 대비를 위해 픽셀 단위로 검사해서는 안 된다.

일부 디자인에서는 전체 페이지나 페이지 일부에 단색이 아닌 배경 이미지를 사용하거나, 페이지를 스크롤하거나 뷰포트 크기를 변경했을 때 시차 스크롤(parallax scroll) 효과로 인해 무한에 가까운 색상 조합이 생길 수 있다.

변경되는 배경색의 대비가 각 조합에 대해 테스트해야 할 만큼 가까운 경우 특정 스크롤 조합에서 시력이 낮은 사용자의 요구 사항을 충족하지 못할 가능성이 높으며 특정 조합에서도 실패할 가능성이 높다. 이러한 경우에는 2색 초점 표시기 또는 테두리가 있는 단색 상자와 같은 초점을 표시하는 다른 매커니즘을 사용하여 다양한 배경 이미지 또는 배경 그라데이션에 걸쳐 충분한 대비를 보장하는 쉬운 해결책이 될 것이다.

초점 표시기 변화를 숨기기 위해 대체되는 스트라이프와 같은 시각적 패턴을 사용할 수 있다. 그러나 이는 가시적인 표시기로 간주하지 않는다.

텍스트가 아닌 콘텐츠의 명도대비와의 관계

초점 표시기는 사용자 인터페이스 구성 요소의 상태를 식별하는 데 필요한 시각적 정보이다. 즉, 2.4.13 초점 형태 외에도 1.4.11 텍스트가 아닌 콘텐츠의 명도대비가 적용된다.

2.4.7 초점 시각화와 1.4.11 텍스트가 아닌 콘텐츠의 명도대비의 조합에서 구성 요소의 시각적 초점 표시가 구성 요소에 초점을 맞출 때 인접한 색상에 대해 충분한 대비를 가져야 한다. 단, 구성 요소의 모양이 저작자가 수정하지 않고 사용자 에이전트 구성 요소에 의해 결정되는 경우는 제외된다.

초점 형태와 텍스트가 아닌 콘텐츠의 명도대비 요구 사항 간의 차이점은 다음과 같다.

• 초점 모양을 사용하려면 초점 표시기에 초점이 맞춰진 상태와 초점이 맞춰지지 않은 상태 사이의 대비가 변경되어야 한다.
• 텍스트가 아닌 콘텐츠의 명도대비를 사용하려면 초점 표시기가 표시기(초점 상태)와 인접한 비표시기 색상 사이에 인접 대비를 가져야 한다.

또한 텍스트가 아닌 콘텐츠의 명도대비는 크기 요구 사항을 설정하지 않으며 예외가 허용되는 경우에 대한 규칙이 약간 다르다.

자세한 내용과 예는 1.4.11 텍스트가 아닌 콘텐츠의 명도대비 이해의 초점 표시와의 관계 섹션을 참조하라.

구성 요소 키보드 초점

이 성공 기준의 서문은 "사용자 인터페이스 구성 요소에 키보드 초점이 있는 경우..."이다. 키보드 초점은 키보드를 사용하는 사람의 상호 작용 지점이다. 키보드로 작동 가능한 인터페이스가 있는 환경의 경우 키보드 초점을 인터페이스 주위로 이동하여 다양한 구성 요소와 상호 작용할 수 있다. 상호작용하는 구성요소에는 초점이 있다.

WCAG는 사용자 인터페이스 구성 요소를 "사용자가 고유한 기능에 대한 단일 컨트롤로 인식하는 콘텐츠의 일부"로 정의한다. 사용자마다 컨트롤을 다르게 인식할 수 있기 때문에 단일 컨트롤과 구분된 기능이 무엇인지 해석할 때 다소 차이가 있을 수 있다. 이는 특히 시각적으로 표현되는 방식과 프로그래밍 방식으로 만들어진 방식이 다를 때 더욱 그렇다. 기본 HTML 컴포넌트를 기반으로 디자인하지 않은 경우, 구성요소와 초점 표시기가 표현되는 방식에 큰 차이가 있을 수 있다. 나아가 일부 구성요소에는 메뉴 항목과 같이 포커스를 받을 수 있는 하위 구성요소가 있다.

그럼에도 불구하고 초점 표시기 자체를 상호 작용하는 구성 요소를 구성하는 척도로 사용하여 이 성공 기준에 대해 다양한 테스터로부터 일관된 결과를 얻었다. 복잡한 구성요소의 경우 세 가지 일반적인 초점 표시기는 다음과 같다.

• 전체 구성요소에만 초점 표시기 적용
• 구성요소와 하위 구성요소 모두에 초점 표시기 적용
• 하위 구성요소에만 초점 표시기 적용

친숙한 복합 구성 요소인 탭 목록을 사용하여 이들 각각에 대해 설명한다.

전체 구성요소에만 초점 표시기 적용

초점 표시기가 전체 탭 목록에만 표시되면 사용자는 탭 목록을 단일 사용자 구성 요소로 간주하도록 안내받는다. 그 안의 탭 항목은 선택된 상태와 선택되지 않은 상태를 시각적으로 구분한다(그리고 선택 상태의 시각적 표시는 1.4.11 텍스트가 아닌 콘텐츠의 명도대비에 제공된 기준을 충족해야 한다).

다른 하위 구성 요소에 초점이 있는 동안 하위 구성 요소를 선택할 필요가 없는 경우 전체 주위에만 초점 표시기를 갖는 것이 가능하다. 탭 패널 내용을 활성화된 탭과 동기화하는 탭 목록의 경우 한 번에 하나의 탭 항목만 선택할 수 있으며 선택된 탭은 활성 상태로 간주되므로 별도의 초점 표시기가 중복된다.

결과: 그룹 초점 지표는 이 성공 기준의 요구 사항을 충족해야 한다.

각각 전체 구성 요소 초점 표시기만 사용하는 라디오 버튼 그룹과 별점 위젯은 이 적합 기준의 기본 요구 사항을 통과하는 다양한 복잡한 구성 요소의 작업 예를 제공한다. 별점 예에서 사용자는 별표 1/2개씩 평점을 올릴 수 있다. 각 별 1/2개에 대한 초점 표시가 불필요할 뿐만 아니라 실제로 상호 작용을 혼란스럽게 만들지 않고는 달성하기 어려울 수 있다.

(역자 주: 원문 내용이 예제와 일부 다름. 업데이트 전으로 추정)

구성요소와 하위 구성요소 모두에 초점 표시기 적용

탭 패널 내용이 선택된 탭과 동기화된 상태로 유지되지 않는 탭 목록의 경우 탭 항목 하위 구성 요소에 대한 포커스 표시기가 있어야 한다. 포커스가 있는 탭 항목이 선택한 항목과 다를 수 있기 때문이다.

사용자는 탭 목록으로 이동할 수 있다. 이 구현에서는 전체 탭 목록 주위에 초점 사각형이 있고 탭 항목(일반적으로 현재 선택된 항목) 주위에도 초점 사각형이 있다. 전체에 초점을 맞추면 키보드 사용자에게 이것이 자체 상호 작용이 있는 복잡한 구성 요소라는 신호를 보내는 데 도움이 된다. 그런 다음 사용자는 하나를 활성화하기 전에 선택되지 않은 탭 항목과 선택된 탭 항목(각각에는 자체 초점 표시기가 있음) 사이에서 초점을 이동할 수 있다. 그런 다음 항목을 선택하고 초점을 맞추고 일치하도록 탭 패널을 업데이트한다.

이 시나리오에서는 그룹 초점 표시기 또는 하위 구성 요소 표시기가 이 성공 기준의 요구 사항을 충족해야 한다. 지나치게 규정적인 것을 피하기 위해 성공 기준을 통해 저작자는 가장 적합한 것을 선택할 수 있다. 일반적으로 하위 구성요소에 중점을 두는 것이 필요한 경우 그룹 지표 대신 평가해야 한다.

결과: 탭 항목의 초점 표시기가 이 성공 기준의 요구 사항을 충족한다. 탭 목록 초점 표시기는 요구 사항을 충족할 필요가 없다.

색상을 선택하는 슬라이더는 주로 하위 구성 요소에 대한 초점을 표시하는 다양한 복잡한 구성 요소의 작업 예를 제공한다. 이 경우 슬라이더 조작(핸들) 하위 구성 요소에는 영역 계산을 통과하기에 충분한 크기와 대비의 초점 표시기가 있다. 전체 슬라이더 구성 요소에도 미묘한 초점이 있지만 이 성공 기준을 통과하기 위해 평가할 필요는 없다.

하위 구성요소에만 초점 표시기 적용

동일한 비동기화 탭 목록은 전체가 아닌 탭 항목에만 초점을 표시하는 것으로 구현될 수도 있다. 동작은 이전 예제와 동일하지만 탭 목록 주위에 초점 표시기가 배치되지 않는다. 이러한 상호 작용은 허용되지만 더 적은 정보로 사용자의 더 많은 이해를 요구하므로 모범 사례는 아니다. 예를 들어, 탭 목록과 탭 항목(및 탭 패널)에 대한 일부 시각적 신호가 명확하지 않을 수 있다. 또한 키보드 사용자는 처음에는 예상되는 키보드 상호 작용을 이해하지 못할 수도 있다.

결과: 탭 항목에 대한 초점 표시기는 이 성공 기준의 요구 사항을 충족해야 하며 선택된 탭 항목과 선택되지 않은 탭 항목 모두의 초점을 판단해야 한다.

하위 구성 요소 전용 탭 초점의 기능적 예에는 이 성공 기준의 초점 영역 요구 사항을 통과하기에 충분한 대비와 함께 충분히 큰(가장 짧은 쪽의 4배 이상) 표시기가 있다.

초점을 받은 항목이 사용자 인터페이스 구성요소가 아닌 경우

일부 페이지에는 워드 프로세서 및 코드 편집기의 웹 구현과 같은 매우 큰 편집 영역이 포함되어 있다. 사용자 인터페이스 구성 요소인 textarea 요소와 달리 이러한 큰 편집 영역은 일반적으로 사용자 인터페이스 구성 요소의 정의를 충족하지 않는다. 이는 "사용자가 고유한 기능에 대한 단일 컨트롤로 인식"하지 않는다. 이러한 편집 영역 주위에 초점 표시기를 제공하는 것이 일부에게는 여전히 도움이 될 수 있다. 그러나 해당 영역이 단일 통제로 인식되지 않는 경우에는 이 성공 기준이 적용되지 않는다. 웹 페이지는 2.4.7 초점 시각화의 요구 사항을 충족하기 위해 이러한 편집 영역에 삽입 지점(캐럿 표시기)을 제공해야 한다.

작동할 수 없는 일부 요소(예: 건너뛰기 링크의 대상인 제목 요소)가 포커스를 받을 수 있다. 그러나 이 성공 기준의 전문은 사용자 인터페이스 구성 요소를 나타낸다. 이 성공 기준이 적용되는 것은 초점이 있는 요소가 키보드로 운용 가능한 경우에만 적용된다.

예외

초점 형태를 평가할 필요가 없는 두 가지 상황이 있다.

• 저작자가 초점 표시기를 조정할 수 없는 경우
• 저작자가 사용자 에이전트 기본값의 효과를 수정하지 않은 경우

첫 번째 예외: 저작자가 초점 표시기를 조정할 수 없는 경우

포커스 표시기는 사용자 에이전트에 의해 결정되며 저작자가 조정할 수 없다.

일부 구성 요소나 기술은 저작자가 초점 표시를 조정하는 것을 허용하지 않을 수 있다. 이는 선택 및 초점에 대한 시각적 처리를 저작자가 조정할 수 없는 HTML select 요소(단일 및 다중 선택 모두)의 경우이다. 이 경우 성공 기준이 적용되지 않는다.

두 번째 예외: 사용자 에이전트 기본값의 효과를 수정하지 않은 경우

초점 표시와 표시의 배경색은 저작자가 수정하지 않는다.

저작자가 초점 표시기 및 초점 표시 뒤의 배경을 수정하지 않은 경우 성공 기준이 적용되지 않는다.

이 예외의 목적은 저작자가 사용자 에이전트(브라우저)가 제공하는 기본 표시기에 의존할 수 있도록 하여 저작자의 부담을 줄이는 것이다. 모든 사용자 에이전트가 좋은 초점 표시기를 제공한다면 저작자는 다른 접근성 고려 사항에 노력을 집중할 수 있다. 불행하게도 브라우저 기본 초점 표시기는 구성 요소, 브라우저, 장치 및 운영 체제에 따라 다르며 일부 브라우저의 기본 초점 표시기는 보기 어려울 수 있다(예: 1px 점선 윤곽선). 이러한 이유로 대부분의 저작자는 이러한 결함을 극복하고 브라우저에 관계없이 보다 균일한 사용자 경험을 만들기 위해 브라우저 기본값을 재정의한다.

일부 브라우저 제조업체는 기본 초점 표시기를 개선하여 더 잘 보이도록 하고 있다. 더 많은 브라우저가 이 성공 기준의 주요 항목을 충족하는 기본값을 채택함에 따라 저작자는 사용자 정의 없이 향상된 초점 표시기를 얻을 수 있다.

초점 표시기 배경 수정

브라우저 기본 포커스 표시기는 저작자가 표시기 바로 옆의 픽셀을 수정하면 더 확인하기 어려워질 수 있다(일반적으로 배경이라고 함). 예를 들어 구성요소를 이미지나 그라데이션 배경 위에 위치시키거나, 페이지의 기본 흰색 배경 색상을 변경하는 경우이다. 특히 브라우저의 기본 파란색 표시기와 파란색 배경을 함께 사용하면 이런 문제가 발생한다. 이런 이유로 저작자가 기본 초점 표시기 바로 옆의 픽셀을 변경한 경우에는 사용자 에이전트 예외가 적용되지 않으며, 저작자는 이 성공 기준의 크기와 대비 요구사항을 충족하는지 확인해야 한다.

참고

body 요소의 background-color 속성을 변경하는 것은 대부분의 구현에서 표시기에 바로 인접한 픽셀을 변경하는 한 가지 방법이다. 그러나 흰색(#FFFFFF) 값을 지정해도 이 예외가 무효화되지는 않는다. 왜냐하면 명암비 정의의 세 번째 참고 사항에 설정된 대로 기본("지정되지 않음") 색상은 흰색으로 가정되기 때문이다.

또한 브라우저가 기본적으로 구성 요소 내에 표시기를 제공하는 경우 저작자는 구성 요소 색상(이러한 시나리오에서는 초점 표시기의 배경색)을 변경하여 가시성을 잠재적으로 줄일 수 있다. 예를 들어, 버튼의 기본 표시기가 컬러 내부 테두리를 사용하는 경우 저작자는 버튼이나 초점이 맞춰지지 않은 테두리 색상을 유사 휘도 색상으로 만들어 초점 모양에 부정적인 영향을 미칠 수 있다. 이러한 이유로 이 사용자 에이전트 예외는 저작자가 기본 초점 표시기와 배경을 수정하지 않는 경우에만 충족될 수 있다.

충분 기법

1. G195: Using an author-supplied, visible focus indicator
2. C40: Creating a two-color focus indicator to ensure sufficient contrast with all components
3. C41: Creating a strong focus indicator within the component

오류

다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

1. F55: received
2. F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator