사이트가 키보드 탐색 가능하다는 것이 실제로 무엇을 의미합니까 – Smashing Magazine

효율적인 내비게이션은 기능 웹 사이트에 필수적이지만 모든 사람이 인터넷을 같은 방식으로 사용하는 것은 아닙니다. 대부분의 방문자는 모바일에서 스크롤하거나 마우스로 클릭하지만 많은 사람들이 키보드 만 사용합니다. 최대 1 천만 명의 미국 성인이 손목 터널 증후군을 앓고있어 마우스를 잡을 때 통증을 유발할 수 있으며 시력 문제로 인해 커서를 따르기가 어려울 수 있습니다. 결과적으로 사이트를 유지해야합니다 키보드 탐색 가능 보편적 인 호소와 접근성을 달성합니다.

키보드 탐색을 통해 사용자는 키보드 입력을 통해서만 웹 사이트에 참여할 수 있습니다. 여기에는 바로 가기를 사용하고 요소를 선택하는 것이 포함됩니다 꼬리표 그리고 입력하다 열쇠.

운영 체제와 잠재 고객이 사용할 특정 앱간에 500 개 이상의 키보드 바로 가기가 있습니다. 웹 탐색의 표준에는 다음이 포함됩니다 Ctrl 키 + 에프 단어 나 자원을 찾기 위해 옮기다 + 화살 텍스트를 선택하고 Ctrl 키 + 꼬리표 브라우저 탭 사이를 이동합니다. 이들은 주로 특정 브라우저 또는 OS 뒤에있는 소프트웨어 회사의 책임이지만 여전히 고려해야합니다.

단일 버튼 내비게이션 키보드 탐색 가능성의 또 다른 중요한 부분입니다. 사용자는 클릭 가능한 항목을 사용하여 이동할 수 있습니다 꼬리표 그리고 옮기다 키, 사용 화살 스크롤 할 키, 누릅니다 입력하다 또는 공간 링크를 “클릭”하고 팝업을 종료하려면 ESC.

워싱턴 포스트 홈페이지가 더 나아갑니다. 압박 꼬리표 클릭 가능한 요소가 강조 표시되지만 첫 번째 버튼 프레스는 먼저 사이트의 접근성 문에 대한 링크를 제공합니다. 사용자는이 과거를 탐색 할 수 있지만, 포함하여 디자인이 어떻게 이해하는지 강조합니다. 키보드 탐색 가능성은 접근성의 문제입니다.

사람들이 이러한 컨트롤을 어떻게 사용할 수 있는지 이해해야하므로이를 용이하게하는 사이트를 구축 할 수 있습니다. 이러한 내비게이션 옵션은 일반적으로 표준이므로 모든 편차 또는 기능 부족이 눈에 띄게됩니다. 특히 이러한 특정 바로 가기 및 제어를 가능하게하는 데있어 키보드 탐색 가능성을 보장하면 그러한 기대치를 충족시키고 사용자를 멀리하는 것을 피할 수 있습니다.

키보드 탐색 가능성은 몇 가지 이유로 중요합니다. 특히, 사이트에 더 액세스 할 수있게됩니다. 미국에서만 4 명 중 1 명 이상이 장애가 있으며 그러한 많은 조건은 기술 사용에 영향을 미칩니다. 예를 들어, 운동 장애로 인해 누군가가 표준 마우스를 사용하기가 어렵고 시력 문제가있는 사용자는 일반적으로 키보드 및 스크린 리더 사용이 필요합니다.

다양한 사용 요구를 설명하는 것 외에도 더 넓은 범위의 제어 방법을 가능하게하면 사이트가 편리합니다. 마우스가 아닌 키보드를 사용하는 것이 더 빠르고 더 편안하게 느낄 수 있습니다. 근로자가 근로 주의 거의 3 분의 1을 정보를 찾는 방법을 고려할 때 효율성에 대한 장애물은 매우 파괴적 일 수 있습니다.

이 영역에서 부족하면 법적 합병증이 발생할 수 있습니다. 같은 규정 장애가있는 미국인 법 기술 접근성이 필요합니다. ADA에는 액세스 가능한 웹 사이트를 구성하는 것에 대한 구속력있는 규칙이 없지만 비 결합 지침의 키보드 내비게이션을 구체적으로 언급합니다. 이러한 기능을 지원하지 않는다고해서 반드시 법적 처벌에 직면하게 된 것은 아니지만 법원은 이러한 표준을 사용하여 사이트에 합리적으로 액세스 할 수 있는지에 대한 결정을 알 수 있습니다.

2023 년에 KitchenAid는 그러한 표준을 충족시키지 못한 것에 대한 집단 소송에 직면했습니다. 원고는 회사의 사이트가 ALT 텍스트 또는 키보드 내비게이션을 지원하지 않았으므로 시각 장애가있는 사용자가 액세스 할 수 없다고 주장했습니다. 이 사건은 궁극적으로 법정에서 해결되었지만 포용성이 간과되는 잠재적 인 법적 및 재정적 영향.

법 밖에서 접근 할 수없는 사이트가 제시됩니다 윤리적 관심사마우스를 사용할 수있는 사람들에게는 우선적 인 치료를 보여줍니다. 법적 조치가 없어도이 편견에 대한 대중의 인정은 방문자의 하락과 오염 된 공개 이미지로 이어질 수 있습니다.

키보드 새겨진 사이트의 요소

고맙게도 보장합니다 키보드 탐색 가능성 간단한 사용자 경험 설계 연습입니다. 내비게이션은 OS 및 브라우저에서 표준이므로 키보드 액세스 가능한 사이트는 몇 가지 일관된 요소를 사용합니다.

초점 지표

웹 접근성을 염두에두고 사이트는 사용자가 누를 때 초점을 맞춘 요소의 시각적 표시기를 제공해야한다고 명시합니다. 꼬리표. 초점 표시기는 일반적으로 강조 표시된 아이콘 주위의 간단한 상자입니다.

이들은 CSS의 표준이지만 일부 디자이너는 숨기므로 사용하지 마십시오. outline:0 또는 outline:none 가시성을 제한합니다. CSS에서 대비를 높이거나 표시기의 색상을 변경할 수도 있습니다.

CNN Breaking News 홈페이지는 좋은 예입니다. 강력한 초점 지표. 압박 꼬리표 즉시 상자를 올리면 쉽게 볼 수있을 정도로 대담하고 검은 색 또는 어두운 색의 사이트 요소와 눈에 띄기 위해 필요한 경우 흰색 테두리를 사용합니다.

논리적 탭 순서

초점 표시기가 요소간에 이동하는 순서도 중요합니다. 일반적으로 말하면, 꼬리표 키는 사람들이 영어로 읽는 것과 같은 방식으로 왼쪽에서 오른쪽으로, 오른쪽으로, 위쪽으로 이동해야합니다.

몇 가지 오류가 방해가 될 수 있습니다. 비활성화 된 버튼은 설명없이 요소를 건너 뛰거나 클릭 할 수 없게 만들지 않고 키보드 탐색 흐름을 방해합니다. 마찬가지로, 아이콘이 예측 가능한 왼쪽에서 오른쪽으로 오른쪽으로 떨어지지 않는 인터페이스는 논리적 탭 움직임을 어렵게 만듭니다.

Sutton Maddock 차량 렌탈 사이트는하지 말아야 할 일의 좋은 예입니다. 당신이 누를 때 꼬리표초점 표시기는 트위터 링크로 돌아 가기 전에 “연락처”에서 Facebook 링크로 점프합니다. 그것은 오른쪽에서 시작하여 다음 줄로 갈 때 왼쪽으로 움직입니다.

건너 뛰기 링크도 필수적입니다. 이러한 대화식 요소를 사용하면 키보드 사용자가 키 스트로크를 반복하지 않고 특정 콘텐츠로 점프 할 수 있습니다. 이 건너 뛰기는 누를 때 강조된 첫 번째 영역 중 하나 여야합니다. 꼬리표 그래서 그들은 의도 한대로 작동합니다.

HSBC Group 홈페이지에는 몇 가지 Skip Navigation 링크가 있습니다. 압박 꼬리표 세 가지 옵션을 가져 와서 사용자가 사이트의 어느 부분에 관심이 있는지 빠르게 뛰어 넘을 수 있습니다.

키보드 접근 가능한 대화식 요소

마지막으로, 키보드 새 사이트의 모든 대화 형 요소는 키 스트로크. 사람들이 커서를 클릭하거나 드래그 할 수있는 것은 내비게이션 및 상호 작용을 지원해야합니다. 이를 활성화하면 사용자가 모든 항목을 꼬리표 또는 화살 열쇠를 눌렀습니다 공간 또는 입력하다.

적절하게, 키보드 접근성에 관한이 애리조나 주립 대학 페이지는이 개념을 잘 보여줍니다. 모든 드롭 다운 메뉴는 꼬리표 그리고 압박 입력하다따라서 사용자는 마우스와 상호 작용할 필요가 없습니다.

키보드 탐색 가능성을 테스트하는 방법

키보드 액세스 가능한 UX를 설계 한 후에는 제대로 작동하는지 확인해야합니다. 이를 수행하는 가장 쉬운 방법은 키보드로만 사이트를 탐색하는 것입니다. 아래 차트는 귀하의 사이트가 합법적으로 키보드를 항해 할 수 있는지 여부를 결정할 때 찾아야 할 기준을 간략하게 설명합니다.

	키보드 탐색 가능	키보드 탐색 가능하지 않습니다
클릭 가능한 요소	모든 요소가 키보드를 통해 도달 할 수 있으며 누를 때 열립니다. `입력하다`.	키보드를 통해 도달 할 수있는 일부 요소 만 가능합니다. 누를 때 일부 링크가 파손되었거나 열리지 않을 수 있습니다. `입력하다`.
초점 지표	압박 `꼬리표`,,, `공간`또는 `입력하다` 모든 브라우저에서 쉽게 볼 수있는 초점 표시기를 제공합니다.	모든 버튼을 누를 때 초점 표시기가 나타나지 않을 수 있습니다. 상자는 일부 브라우저에서는보기 어려울 수 있습니다.
내비게이션 링크를 건너 뜁니다	압박 `꼬리표` 처음으로 하나 이상의 Skip Link를 끌어 당겨 사용자가 많이 방문한 컨텐츠 또는 메뉴로 이동합니다. 계속 누르고 있습니다 `꼬리표` 이 링크를지나 초점 표시기를 이동하여 페이지의 요소를 정상적으로 강조 표시합니다.	누르면 건너 뛰기 링크가 나타나지 않습니다 `꼬리표` 처음으로. 또는 다른 모든 요소를 통해 이동 한 후에 나타납니다. 건너 뛰기 링크가 작동하지 않을 수 있습니다.
스크린 리더 지원	스크린 리더는 초점 표시기로 강조 표시되면 각 요소를 읽을 수 있습니다.	일부 요소는 강조 표시 될 때 스크린 리더의 조치를 장려하지 않을 수 있습니다.

그만큼 웹 컨텐츠 접근성 가이드 라인 키보드 탐색 가능성을 확인하기 위해 두 가지 테스트 규칙을 간략히 설명합니다.

첫 번째는 모든 대화 형 요소를 통해 액세스 할 수 있도록합니다. 꼬리표 열쇠,
두 번째는 키보드 스크롤 기능을 확인합니다.

사이트를 생중계하기 전에 두 표준을 사용하여 UX를 검토하십시오.

일반적인 문제는 꼬리표 키나 자연 순서로 떨어지지 않는 것들. 키보드로 모든 것에 액세스하려고 시도하여 두 가지 문제를 모두 발견 할 수 있습니다. 그러나 제 3자를 통해 항해 가능성 감사를 수행하는 것이 좋습니다. 많은 민간 회사가 이러한 서비스를 제공하지만 기본 WCAG 감사에 인터넷 접근성 국을 사용할 수도 있습니다.