키보드 입력을 쉽게 하기 위해 시맨틱 HTML 사용

Rob Dodson

올바른 의미론적 HTML 요소를 사용하면 키보드 액세스 요구사항의 대부분 또는 전부를 충족할 수 있습니다. 즉, tabindex를 다루는 데 드는 시간을 줄이고 더 많은 사용자를 만족시킬 수 있습니다.

무료 키보드 지원(및 더 나은 모바일 환경)

적절한 시맨틱스와 키보드 지원을 갖춘 여러 가지 대화형 요소가 내장되어 있습니다. 대부분의 개발자가 사용하는 도구는 다음과 같습니다.

또한 contenteditable 속성이 있는 요소는 자유 형식 텍스트 입력에 사용되는 경우도 있습니다.

이러한 요소가 제공하는 기본 제공 키보드 지원을 간과하기 쉽습니다. 다음은 살펴볼 수 있는 몇 가지 요소의 예입니다. 마우스를 사용하는 대신 키보드를 사용하여 작동해 보세요. TAB(또는 SHIFT + TAB)를 사용하여 컨트롤 간에 이동할 수 있으며 화살표 키와 ENTER, SPACE과 같은 키를 사용하여 값을 조작할 수 있습니다.

휴대전화가 있다면 이러한 내장 요소가 모바일에서 고유한 상호작용을 하는 경우가 많다는 것을 확인할 수 있습니다. 이러한 모바일 상호작용을 직접 재현하려고 하면 많은 작업이 필요합니다. 이는 가능하면 기본 제공 요소를 사용하는 것이 좋은 또 다른 이유입니다.

div 대신 button 사용

일반적인 접근성 방지 패턴은 div 또는 span와 같은 상호작용이 불가능한 요소에 클릭 핸들러를 추가하여 버튼으로 취급하는 것입니다.

그러나 액세스 가능한 것으로 간주되려면 버튼은 다음과 같아야 합니다.

  • 키보드를 통해 포커스 가능
  • 지원 중단
  • ENTER 또는 SPACE 키를 지원하여 작업 실행
  • 스크린 리더가 올바르게 읽어야 합니다.

div 버튼에는 이러한 속성이 없습니다. 즉, button 요소가 무료로 제공하는 기능을 재현하려면 추가 코드를 작성해야 합니다.

예를 들어 button 요소에는 *합성 클릭 활성화*라는 멋진 트릭이 있습니다. button에 '클릭' 핸들러를 추가하면 사용자가 ENTER 또는 SPACE를 누르면 실행됩니다. div 버튼에는 이 기능이 없으므로 keydown 이벤트를 수신 대기하고, 키 코드가 ENTER 또는 SPACE인지 확인한 다음 클릭 핸들러를 실행하는 코드를 추가로 작성해야 합니다. 아야! 추가로 해야 할 일이 많습니다.

이 예시의 차이점을 비교해 보세요. TAB를 사용하여 컨트롤하고 ENTER 및 SPACE를 사용하여 클릭하려고 시도합니다.

기존 사이트 또는 애플리케이션에 div 버튼이 있는 경우 button 요소로 교체하는 것이 좋습니다. button는 스타일을 지정하기 쉬우며 접근성 기능이 뛰어납니다.

또 다른 일반적인 안티패턴은 JavaScript 동작을 연결하여 링크를 버튼으로 취급하는 것입니다.

<a href="#" onclick="// perform some action">

버튼과 링크 모두 일종의 합성 클릭 활성화를 지원합니다. 어떤 방법을 선택해야 할까요?

  • 요소를 클릭하면 페이지에서 작업이 실행되는 경우 <button>를 사용합니다.
  • 요소를 클릭하면 사용자가 새 페이지로 이동하는 경우 <a>를 사용합니다. 여기에는 새 콘텐츠를 로드하고 History API를 사용하여 URL을 업데이트하는 단일 페이지 웹 앱이 포함됩니다.

이렇게 하는 이유는 스크린 리더에서 버튼과 링크를 다르게 읽기 때문입니다. 올바른 요소를 사용하면 스크린 리더 사용자가 결과를 예상하는 데 도움이 됩니다.

TODO: DevSite - 생각하고 확인하기 평가

스타일 지정

일부 내장 요소, 특히 <input>는 스타일을 지정하기 어려울 수 있습니다. 약간의 영리한 CSS를 사용하면 이러한 제한사항 중 일부를 해결할 수 있습니다. 재미있는 이름의 WTFForms 프로젝트에는 일부 어려운 내장 요소의 스타일을 지정하는 여러 기법을 보여주는 예시 스타일시트가 포함되어 있습니다.

다음 단계

내장된 HTML 요소를 사용하면 사이트의 접근성을 크게 개선하고 워크로드를 크게 줄일 수 있습니다. 사이트를 탭하여 키보드 지원이 없는 컨트롤이 있는지 확인합니다. 가능하다면 표준화된 HTML 대안으로 전환하세요.

HTML에 상응하는 요소가 없는 요소가 있을 수 있습니다. 괜찮습니다. tabindex를 사용하여 맞춤 양방향 컨트롤에 키보드 지원을 추가하는 방법을 알아보려면 계속 읽어보세요.