키보드 전용 및 보조 기술 사용자를 위한 UX 최적화

(이 기사는 후원을 받은 기사입니다.) 접근성에 대한 멋진 점 중 하나는 일반적인 마우스 기반 사용자 경험을 넘어 애플리케이션을 보고 생각하게 만든다는 것입니다. 키보드 전용(KO) 및/또는 보조 기술(AT)을 통해 탐색하는 사용자는 애플리케이션의 정보 아키텍처가 신중할 뿐만 아니라 모든 유형의 사용자에게 가능한 한 직관적인 경험을 유지하기 위해 애플리케이션이 제공하는 어포던스에 크게 의존합니다.

이 기사에서는 다른 사람의 경험을 실제로 바꾸지 않고도 KO/AT 사용자 경험을 개선할 수 있는 몇 가지 어포던스에 대해 알아볼 것입니다.

애플리케이션의 UX에 대한 추가 사항

KO/AT 사용자를 위한 UX를 개선하기 위해 애플리케이션에 추가할 수 있는 기능입니다.

링크 건너뛰기

건너뛰기 링크는 웹사이트나 애플리케이션의 상단에 보이지 않게 위치하는 탐색 기능입니다. 존재하는 경우 호출되어 애플리케이션의 첫 번째 탭 정지에 표시됩니다.

건너뛰기 링크를 사용하면 사용자가 탭을 순환할 필요 없이 응용 프로그램 내의 다양한 관심 섹션으로 "건너뛰기"할 수 있습니다. 응용 프로그램에 여러 관심 영역이 있는 경우 건너뛰기 링크에 여러 링크가 있을 수 있습니다.

KO/AT 사용자의 경우 이 도구는 앱을 빠르게 탐색할 수 있도록 하고 앱의 정보 아키텍처에 방향을 맞추는 데 도움이 되는 유용한 도구입니다. 다른 모든 사용자는 이 기능이 있는지조차 모를 것입니다.

다음은 건너뛰기 링크를 처리하는 방법에 대한 예입니다. 링크를 클릭한 후 Tab ⇥ 을 누르고 왼쪽 상단 모서리를 보십시오. 건너뛰기 링크에는 기본 콘텐츠 및 코드 샘플 의 두 가지 링크가 있습니다. Tab ⇥ 을 사용하여 이들 사이를 이동할 수 있고 Enter 키를 눌러 링크로 이동할 수 있습니다.

단축키/단축키 메뉴

이것은 모두에게 친숙한 기능이라고 생각합니다. 바로 가기와 단축키입니다. 때때로 사용했을 가능성이 높으며 응용 프로그램의 고급 사용자 사이에서 매우 인기가 있으며 다양한 형태로 제공됩니다.

KO/AT 사용자의 경우 바로 가기/단축키는 매우 중요합니다. 이를 통해 시각적으로 대상을 지정하거나 애플리케이션을 탭하여 요소나 콘텐츠에 도달할 필요 없이 의도한 대로 애플리케이션을 사용할 수 있습니다. 단축키/단축키 메뉴에 표시될 때 빈번한 작업과 콘텐츠는 항상 감사하지만 UI에 묻힐 수 있는 약간 덜 빈번한 작업을 고려할 수도 있습니다(합당한 이유로). 그러나 여전히 사용자가 원할 것입니다. 액세스할 수 있습니다.

이러한 기능에 대한 바로 가기를 만드는 것은 KO/AT 사용자에게 매우 도움이 될 것입니다. (3) 키 입력을 사용하여 명령을 불러일으키는 것과 같이 명령을 좀 더 복잡하게 만들어 덜 자주 사용되는 기능 부분임을 암시할 수 있습니다. 바로 가기/단축키 메뉴가 있는 경우 사용자, 특히 KO/AT 사용자가 찾고 효과적으로 사용할 수 있도록 응용 프로그램에서 홍보할 수 있는 방법을 찾으십시오.

사용자 교육

사용자 교육은 사용자에게 무엇을 해야 하는지, 어디로 가야 하는지 또는 무엇을 기대해야 하는지 지시하는 기능을 말합니다. 툴팁, 지적, 정보 풍선 등은 모두 사용자 교육의 예입니다.

사용자 교육을 위한 사본을 디자인, 배치 및/또는 작성할 때 자문해야 할 한 가지는 다음과 같습니다.

"내가 이것을 볼 수 없다면 ______을(를) 이해하는 것이 여전히 가치가 있습니까?"

많은 경우 모든 사람에게 훨씬 더 나은 경험을 제공할 수 있는 렌즈를 통해 사용자 교육의 방향을 조정하는 것입니다. 예를 들어, "다음, 아래 버튼을 클릭하세요."라고 말하는 대신 "시작하려면 시작 버튼을 클릭하세요."라고 쓰고 싶을 수 있습니다. 두 번째 방법은 시각적 방향을 제거하고 대신 시력 및 KO/AT 사용자가 마음대로 사용할 수 있는 공통 정보에 초점을 맞추는 것입니다.

참고 : 지적 사항과 같은 사용자 교육 기능을 사용하여 응용 프로그램의 항목을 시각적으로 지적하는 것은 완벽하게 괜찮다는 것을 언급해야 합니다. 단지 동반 텍스트가 KO/AT 사용자가 시각적으로 참조되는 것과 동일한 것을 이해할 수 있도록 하십시오.

애플리케이션의 UX 확장

KO/AT 사용자를 위한 UX를 개선하기 위해 일반적인 구성 요소/기능을 변경하거나 조정할 수 있습니다.

모달 포커싱

이제 우리는 본론으로 들어갑니다. 접근성의 가장 큰 장점 중 하나는 이전에 고려하지 않았을 수 있는 문제를 해결하는 새로운 방법의 문을 여는 방법입니다. 완전히 WCAG 2.0 AA에 액세스할 수 있도록 만들고 매우 다른 접근 방식으로 문제를 해결할 수 있습니다. 모달의 경우 Deque에서 대부분의 시력 사용자에게는 완전히 보이지 않지만 KO/AT 사용자는 거의 즉시 알아차릴 수 있는 흥미로운 접근 방식을 고안했습니다.

모달에 액세스할 수 있으려면 호출될 때 자신을 발표해야 합니다. 이를 수행하는 두 가지 일반적인 방법은 모달이 열린 후 모달의 본문 에 초점을 맞추거나 모달이 열린 후에 모달의 헤더 (있는 경우)에 초점을 맞추는 것입니다. 이렇게 하면 사용자의 AT가 "프로필 편집" 또는 "새 구독 만들기"와 같은 모달의 의도를 읽을 수 있습니다.

본문이나 머리글에 초점을 맞춘 후 Tab ⇥ 를 누르면 모달의 다음 포커스 가능한 요소(일반적으로 필드 또는 헤더에 있는 경우 닫기 버튼(X))로 포커스를 보냅니다. 계속 탭하면 모달에서 포커스 가능한 모든 요소로 이동하게 되며 일반적으로 SAVE 및/또는 CANCEL과 같은 터미널 버튼으로 마무리됩니다.

이제 우리는 흥미로운 부분에 도달합니다. 모달의 마지막 요소에 초점을 맞춘 후 Tab ⇥ 를 다시 누르면 첫 번째 탭 정지로 "순환"되며, 모달의 경우 본문 또는 헤더가 시작되기 때문에 여기가 본문 또는 헤더가 됩니다. 그러나 모달에서 우리는 초기 탭 정지를 "건너뛰고" 두 번째 정지(모달에서 상단 모서리의 닫기(X))로 이동합니다. 모달 이 자체적으로 계속 발표할 필요가 없기 때문에 이 작업을 수행합니다. 각 사이클 에 대해 계속해서 수행해야 하는 후속 여행이 아닌 초기 호출 시에만 수행해야 하므로 첫 번째 이후에 자체적으로 건너뛰는 특별한 프로그래밍 방식 중지가 있습니다.

이것은 다른 사람들에게는 완전히 알려지지 않은 KO/AT 사용자를 위해 독점적으로 고안한 작지만 감사한 사용성 개선입니다.

탐색 메뉴 탐색 및 초점/선택 관리

탐색 메뉴가 까다롭습니다. 그것들은 다양한 방식으로 구조화될 수 있고, 계층화되고, 중첩될 수 있으며, 불러일으키고, 공개하고, 통과하는 수많은 메커니즘이 있습니다. 따라서 설계 단계에서 KO/AT 사용자와 상호 작용하고 표현하는 방식을 고려하는 것이 중요합니다. 좋은 메뉴는 "입력" 및 "종료"되어야 합니다. 즉, 메뉴를 탭하여 사용하고 탭에서 빠져 나와 종료해야 합니다(사용하지 않는 경우).

이 아이디어는 문자 그대로의 예에서 가장 잘 설명되어 있으므로 Cauldron에서 2계층 수직 탐색을 살펴보겠습니다.

1. https://pattern-library.dequelabs.com/으로 이동합니다.
2. Tab ⇥을 세 번 누르십시오. 첫 번째 탭 정지는 건너뛰기 링크(이전에 살펴보았음)이고, 두 번째 탭은 "홈으로 돌아가기" 링크 역할을 하는 로고이며, 세 번째 탭은 메뉴로 들어갑니다.
3. 이제 메뉴에 있으므로 화살표 키( → 및 ↓ )를 사용하여 메뉴 섹션을 이동하고 엽니다.
4. 아무 때나 Tab ⇥ 을 누르면 메뉴에서 빠져 나와 페이지의 내용으로 이동합니다.

탐색 메뉴는 바로 가기/단축키 메뉴와 같은 일부 이전 항목과 함께 작동하여 메뉴를 더욱 효율적으로 사용할 수도 있습니다.

논리적 초점 유지(IE 삭제 행, 페이지로 돌아가기)

초점 유지는 매우 중요합니다. 대부분의 사람들은 최소한 개념적으로는 페이지에서 논리적으로 의도된 순서대로 요소를 집중시키는 데 익숙합니다. 그러나 요소 또는 콘텐츠가 변경/표시/사라질 때 흐릿해질 수 있습니다.

• 현재 있는 필드가 삭제되면 포커스는 어디로 가나요?
• 애플리케이션에 새로운 컨텍스트가 있는 다른 탭으로 이동하는 경우는 어떻습니까?
• SAVE와 같은 터미널 작업으로 인해 모달이 닫힌 후에는 어떻게 됩니까?

시력을 가진 사용자에게는 무슨 일이 일어났는지 알려주는 시각적 단서가 있습니다.

다음은 예입니다. 사용자가 재료를 추가 및 제거할 수 있는 Edit Recipe 모달이 있습니다. 그 아래에 "다른 재료 추가" 버튼이 있는 재료 필드가 하나 있습니다. (예, 링크로 스타일이 지정되었지만 다른 날의 주제입니다.) 초점은 버튼에 있습니다. 버튼을 클릭하면 버튼과 첫 번째 필드 사이에 새 필드가 나타납니다. 초점은 어디로 가야 할까요? 사용자가 다른 요소를 추가하여 참여했을 가능성이 높으므로 포커스는 버튼에서 새로 추가된 필드로 옮겨야 합니다.

이 모든 것에서 중요한 점은 구체적인 예가 아니라 이를 지원하는 사고방식입니다. KO/AT 사용자와 마우스만 사용하는 사용자의 관점에서 응용 프로그램의 UX를 고려하십시오. 가장 훌륭하고 기발한 아이디어 중 일부는 가장 흥미롭고 중요한 도전에서 나옵니다.

기능에 액세스할 수 있는지 확인하는 데 도움이 필요한 경우 Deque의 무료 웹 액세스 가능성 테스트 애플리케이션인 ax pro를 사용하여 위의 모든 예제와 셀 수 없이 많은 예제를 테스트할 수 있습니다. 무료이며 여기에서 가입할 수 있습니다.