마우스 없이 웹 사이트를 탐색해 본 적이 있다면(프레젠테이션 도중에 트랙패드가 작동하지 않거나 단순히 키보드 위에 손을 놓고 있는 것을 선호하는 경우) 그 좌절감을 이미 알고 계실 것입니다. 페이지의 절반은 출입 금지입니다. 버튼이 반응하지 않습니다. 메뉴는 멀리서 당신을 조롱합니다.
여러분은 혼자가 아닙니다. 대략 50%의 웹사이트가 키보드 탐색 작업을 위한 기본 구성 요소인 tabindex를 완전히 건너뜁니다. Microsoft는 이 문제를 해결하기를 원하며 개발자가 스스로 문제를 해결하기를 기다리지 않습니다.
키보드 친화적인 웹사이트를 구축하는 더 간단한 방법
Edge 팀이 방금 발표했습니다. 포커스 그룹는 키보드로 접근 가능한 웹 디자인을 훨씬 더 단순하게 만드는 새로운 HTML 속성입니다. 개발자가 HTML에 하나의 속성을 추가하면 브라우저는 복잡한 tabindex 로직이나 코드베이스를 늘리는 타사 라이브러리 없이 해당 속성을 가져옵니다.
화살표 키는 사용자가 실제로 기대하는 방식으로 작동하고, 숨겨진 요소나 비활성화된 요소는 조용히 건너뛰며, 심지어 짜증을 내지 않고 Shadow DOM 내부에서도 작동합니다.
그것이 해결하고 있는 문제는 수년간 개발자들을 조용히 괴롭혀 왔습니다. 메뉴, 하위 메뉴, 도구 모음 및 탭 그룹이 포함된 완전한 키보드 액세스 가능 사이트를 구축하는 것은 간단하지 않습니다. 사용자가 방문할 때마다 다운로드해야 하는 상당한 시간, 전문 지식 및 JavaScript 더미가 필요합니다.
코드가 많을수록 로드 시간이 느려지고, 로드 시간이 느려지면 사용자는 좌절감을 느끼게 됩니다.
더 적은 코드, 더 빠른 페이지, 더 나은 접근성
Microsoft는 2021년에 처음으로 포커스 그룹을 스케치한 다음 2022년에 OpenUI 커뮤니티 그룹에 가져왔습니다. 따라서 이것은 주말 프로젝트가 아닙니다. 브라우저 생태계 전체의 의견을 바탕으로 수년 동안 베이킹되어 왔습니다.
수혜자는 다양합니다. 운동 장애가 있는 사람, 고급 사용자, 복잡한 대시보드를 탐색하는 기업 직원 등 기본적으로 탭을 누르고 기도해 본 적이 있는 사람이면 누구나 가능합니다.
현재 Edge에서 초기 테스트를 위해 실시간으로 제공되고 있으며 Microsoft는 코드 업스트림을 Chromium 프로젝트로 푸시했습니다. 즉, Chrome과 그 많은 형제들도 이 코드를 선택할 수 있습니다. 나머지 브라우저 세계가 이를 따른다면 조용한 개발자 도구처럼 보이는 것이 마우스를 전혀 터치하지 않는 수백만 명의 사람들이 웹에 접근하는 느낌을 바꾸는 결과를 가져올 수 있습니다.