키보드 탐색을 위한 포커스 스타일 CSS

완전히 액세스 가능한 웹 사이트를 만드는 것은 모든 프론트 엔드 개발자에게 우선 순위가 되어야 합니다. 대부분의 HTML에는 접근성이 내장되어 있으므로 우리의 삶이 약간 더 쉬워야 합니다. 그렇게 말했다. 사용자 지정 구성 요소를 만들고 스타일을 사용자 지정하므로 모든 사용자에게 최상의 경험을 제공하는 것이 다소 까다로울 수 있습니다.

목차

Keyboard only focus state

What about :focus-visible?

Using HTML and CSS

Use the tabindex

Removing the :focus

Solution to CSS focus only on keyboard

키보드 전용 포커스 상태

최근에 만난 문제는 버튼에 키보드만 포커스 상태가 필요하다는 것이었습니다. 버튼이 페이지에서 작업을 트리거하고 해당 페이지에서 사용자를 이동하지 않았기 때문에 포커스 상태가 강조 표시된 상태로 유지되었습니다. 버튼이 이미 상호 작용했기 때문에 이것은 모든 사용자에게 특히 유용하지 않습니다. 간단히 말해서 :focus는 요소에 '초점'을 잡았을 때뿐만 아니라 클릭한 직후에도 적용됩니다.

내 버튼은 사용자가 키보드로 탐색할 때 포커스 상태를 추가해야 했지만 다른 방법으로는 그렇지 않았습니다. 탭 버튼을 사용하면 포커스가 적용됩니다. 하지만 마우스를 사용할 때는 그렇지 않습니다.

:focus-visible은 어떻습니까?

나는 :focus-visible을 발견했고 완벽한 솔루션처럼 보였습니다. 모질라는 다음과 같이 말합니다.

This selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).

:focus와 :focus-visible의 차이점은 :focus-visible은 사용자가 키보드로 탐색할 때 작동한다는 것입니다. 마우스가 트리거하지 않습니다. 잘 들린다!
불행히도 Chrome 내에서만 구현되며 플래그 뒤에 있습니다. Very limited uptake .
모든 브라우저에 이 기능을 추가하는 사용 가능한 polyfill이 있지만 다른 솔루션이 있을 수 있는 경우 추가 JavaScript를 추가하는 데 문제가 있습니다. :focus-visible의 대안이 필요합니다.

HTML 및 CSS 사용

Roman Komarov talks about in his article 과 같이 이에 대한 매우 우아한 솔루션이 있습니다. Roman은 내부 범위 또는 div를 사용하여 버튼 및 링크에 대한 포커스 상태로 키보드 전용 탐색을 달성할 수 있음을 보여줍니다.

탭 인덱스 사용

inner span 또는 divs tabindex를 -1로 설정하면 인위적으로 포커스가 가능하도록 만들 수 있습니다. MDN은 tabindex에 대한 자신의 글에서 다음과 같이 설명합니다.

A negative value (usually tabindex=”-1″) means that the element is not reachable via sequential keyboard navigation.

이것이 의미하는 바는 요소가 마우스로 초점을 맞출 수 있지만 키보드는 불가능하다는 것입니다. 따라서 외부 요소(버튼 또는 링크)가 클릭되면 내부 요소가 포커스를 받습니다. HTML은 다음과 같습니다.

        Click away!

:focus 제거

이제 HTML 요소를 사용하여 조건부 포커스가 설정되었으므로 적절한 스타일을 추가해야 합니다.

먼저 두 요소 모두에서 :focus를 제거합니다. 키보드에서만 CSS 포커스를 찾고 있기 때문에 이것은 필요하지 않습니다.

.button:focus,
.button_inner:focus {
    outline: none;
}

그런 다음 외부 요소에 포커스가 있을 때에만 포커스 스타일이 내부 범위 또는 div에 추가됩니다.

.button:focus > .button_inner {
    border: 2px solid red; /* A terrible style to use, but easy to see for this example! */
} 

키보드에만 CSS 포커스에 대한 솔루션

포커스 상태 문제가 있는 키보드 탐색을 해결하기 위한 최종 코드: CodePen 참조.

테스트하려면 버튼을 클릭하면 포커스가 추가되지 않는 것을 볼 수 있습니다. 그런 다음 브라우저 탭 키로 탐색합니다. 그러면 빨간색 테두리가 있는 버튼이 강조 표시됩니다.

바라건대 :focus-visible은 훨씬 더 깨끗한 솔루션이 될 것이기 때문에 더 많은 브라우저에 롤아웃됩니다. 그러나 현재로서는 이 대안을 구현하기가 상당히 쉽고 원하는 결과를 얻을 수 있습니다! 이제 사용자는 키보드를 사용할 때만 포커스 상태를 얻을 수 있습니다.

웹 접근성은 제가 상당히 강하게 느끼는 주제입니다. 관심이 있는 경우 ‘Inclusive web’ and why it should matter more to businesses 에 대해 자세히 읽을 수 있습니다.