올바른 시맨틱 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를 사용하여 맞춤 대화형 컨트롤에 키보드 지원을 추가하는 방법을 알아보세요.