키보드로 탐색할 수 있는 대화형 차트

대화형 차트는 종종 호버할 때만 값을 보여 줍니다. 키보드와 터치 사용자는 호버할 수 없으므로 해당 데이터에 접근할 수 없습니다.

tabindex="0"을 지정해 사용자가 각 데이터 지점이나 계열로 Tab 이동할 수 있게 하세요. 이제 마우스가 호버하는 대상에 키보드로도 접근할 수 있습니다.

아무것도 알리지 않는 포커스 가능 지점은 쓸모가 없습니다. 3월, 판매량 240과 같이 레이블과 값을 말하는 접근 가능한 이름을 각각에 지정하세요.

100개의 지점을 Tab으로 차례로 이동하는 것은 고통스럽습니다. 화살표 키로 지점 사이를 이동하고, 차트에 들어가거나 나올 때만 Tab을 사용하세요.

한 지점은 tabindex 0으로 유지하고 나머지는 -1로 둔 다음, 화살표 키를 누를 때 0을 이동하세요. 이 roving tabindex 방식은 Tab 이동 지점 수를 적절하게 유지합니다.

호버할 때 툴팁에 표시하는 내용은 포커스할 때도 표시하세요. 모든 mouseenter 처리기에 focus 처리기를 함께 연결해 두 입력 방식이 동일하게 작동하도록 하세요.

명확한 윤곽선이나 마커로 현재 포커스된 지점을 강조하세요. 그렇지 않으면 키보드 사용자는 현재 위치를 알 수 없습니다.

포커스가 새 지점으로 이동하면 aria-live 영역이 그 값을 읽어 줄 수 있습니다. 레이블이 화면에는 표시되지만 DOM에는 없는 경우 특히 유용합니다.

전체를 이름이 있는 figure로 감싸세요. 사용자는 차트를 쉽게 찾고 탐색을 마친 뒤 하나의 단위로 건너뛸 수 있습니다.

대화형 기능은 대체 수단이 아니라 보너스입니다. 화살표 키로 이동하는 것이 너무 느릴 때를 대비해 간단한 경로가 되는 일반 데이터 표를 항상 유지하세요.

마우스를 치우고 Tab과 화살표 키만으로 차트를 조작해 보세요. 모든 값에 접근할 수 없다면 사용자도 접근할 수 없습니다. ⌨️

키보드 사용자는 차트에서 많은 데이터 지점 사이를 어떻게 이동해야 할까요?

지점에 포커스를 둘 수 있게 하고 이름을 지정하며, roving tabindex를 통해 화살표 키로 이동하고, 포커스할 때도 호버와 같은 정보를 표시하며, 항상 표 대체 콘텐츠를 유지하는 방법을 배웠습니다. 🚀