惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Attack and Defense Labs
Attack and Defense Labs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The Last Watchdog
The Last Watchdog
B
Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Google DeepMind News
Google DeepMind News
The GitHub Blog
The GitHub Blog
博客园_首页
N
News and Events Feed by Topic
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Security Archives - TechRepublic
Security Archives - TechRepublic
Y
Y Combinator Blog
Vercel News
Vercel News
T
Troy Hunt's Blog
L
LINUX DO - 最新话题
H
Hacker News: Front Page
云风的 BLOG
云风的 BLOG
Hugging Face - Blog
Hugging Face - Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
aimingoo的专栏
aimingoo的专栏
Recorded Future
Recorded Future
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
Microsoft Azure Blog
Microsoft Azure Blog
Last Week in AI
Last Week in AI
T
The Exploit Database - CXSecurity.com
T
The Blog of Author Tim Ferriss
S
Schneier on Security
Project Zero
Project Zero
MyScale Blog
MyScale Blog
博客园 - 聂微东
F
Fortinet All Blogs
AWS News Blog
AWS News Blog
W
WeLiveSecurity
L
LangChain Blog
N
Netflix TechBlog - Medium
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Tailwind CSS Blog
Scott Helme
Scott Helme
S
Secure Thoughts
A
Arctic Wolf
The Register - Security
The Register - Security
C
Check Point Blog
Security Latest
Security Latest
O
OpenAI News
S
Securelist
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Blog — PlanetScale
Blog — PlanetScale
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events

The Tracks of mulder21c

고정된 참조 위치 정보 선형 이미지의 최소 명도 대비 요구사항은 몇 대~ 몇? 입력 방식(Input Modalities) 적응성(Adaptable) KWCAG 2.2 변경 사항 개요 Git hook으로 브랜치 이름 규칙 강제하기 댓글 시스템 remark42로 변경기 새 테마로 갈아입힘 Atomic Design + Storybook 적용 후기 json-server에 사용자 인증 구현하기 개발환경 WSL2 + zsh로 갈아타기 Pass function as props in vue 2020년 회고 colum flexbox에서 padding bottom 문제 해결 Nuxt를 통해 보는 프론트엔드 개발자가 하는 일 Nuxt Router kebab-case 처리 JS to SCSS 변환 Nuxt + Storybook 통합 하기 2020 이직 이야기 2020 이직 이야기 2020 이직 이야기 2020 이직 이야기 Windows에서 PM2 실행 오류 해결 오픈톡 정지에 대한 카카오톡 고객센터 후기 배려에 대한 단상 학습이 잘 되지 않는 이유 웹팩 4 마이그레이션 삽질기 babel 7 업데이트 후 node_modules 패키지가 변환되지 않는다면? white space는 4px이다? 정말? 2020년 시간 관리를 위해서 도입 한 툴들 Codility Lesson 5 — PassingCars 2019년 회고 Codility Lesson 4 — MissingInteger Codility Lesson 4 — MaxCounters Codility Lesson 4 — FrogRiverOne Codility Lesson — PermCheck 착각은 자유가 아닌각 세미나 진행 후기 Codility Lesson 3 — tapeEquilibrium Codility Lesson 3 — PermMissingElm Codility Lesson 3 — FrogJump 알고리즘 연습을 다시 시작했다. Codility Lesson 2 — CyclicRotation Codility Lesson 2 — OddOccurrencesInArray Codility Lesson 1 — BinaryGap 아이패드 구매 하고 3주 써 본 기록 세미나 어떻게 준비해야 할까? HTML은 웹이다 접근성 향상을 위한 이름 짓기 접근성 교육에서 자주 나오는 상위 5가지 질문
단일 문자 단축키 (Character Key Shortcuts)
멀더끙 · 2023-11-01 · via The Tracks of mulder21c

KWCAG 2.2 변경 사항 톺아보기 시리즈

  1. KWCAG 2.2 변경 사항 개요
  2. 적응성(Adaptable)
  3. 입력 방식(Input Modalities)
  4. 단일 문자 단축키 (Character Key Shortcuts)
  5. 고정된 참조 위치 정보
  6. 단일 포인터 입력 지원
  7. 포인터 입력 취소
  8. 레이블과 네임
  9. 동작기반 작동
  10. 찾기 쉬운 도움 정보
  11. 접근 가능한 인증
  12. 반복 입력 정보

문자 단축키 검사 항목은 운용의 용이성 원칙의 입력장치 접근성 지침에 속해있으며 WCAG 2.1의 Character Key Shortcuts 성공 기준에서 도입되었다.

의도

이 검사 항목의 목적은 단일 문자 단축키를 제공했을 때 사용자가 의도치 않게 문자 단축키가 작동되는 것을 방지하기 위한 것이다.

'의도치 않게 작동되는 것을 방지한다는 것'은 의도하지 않게 작동되는 경우가 있다는 것을 의미한다.
그러니까 이 지침을 이해하려면 '의도하지 않게 작동되는 경우'가 누구에게 발생하는지 알아야 하고, 단일 문자 단축키가 정확히 무엇인지 알아야 한다.

단일 문자 단축키가 뭐지?

우선 단일 문자 단축키가 무엇인지부터 알아보자.

Gmail에서 제공하는 단일 문자 단축키 중 일부

단일 문자 단축키는 눌렀을 때 어떤 기능을 작동시키도록 제공 된 단일 문자키를 말한다.
그렇다면 단일 문자키는 또 정확히 무얼 말할까? 검사 항목 내용에 기술되어 있듯 대/소문자, 구두점, 기호 등의 글자나 숫자 또는 특수 문자를 출력하는 키를 말한다. 쉽게 생각하면 a, b, 1, /등의 키가 이에 해당한다. 이 단축키는 공기처럼(?) 매우 가까이에 존재하지만 존재를 미처 알아차리지 못하는 경우가 많다. 마치 다음과 같이 Gmail에서 제공 된 단축키처럼 말이다.

단일 문자 단축키가 뭐가 문제인데?

단일 문자 단축키가 무엇인지 알았으니 이제 이 단일 문자 단축키가 의도하지 않게 작동되는 경우가 정말 있는지 살펴보자.

사실 일반적인 컴퓨터 사용 환경에서 단일 문자 단축키가 의도하지 않게 작동되는 경우는 떠올리기 어렵다. 아무리 머리를 굴려봐도 실수로 키보드를 눌러서 발생하는 것 외에는 발생할 소지가 적을 것 같고, 이건 장애와 관계 없이 누구나 발생 할 수 있는 상황일 것이다.

음성입력

하지만 이건 어디까지나 ‘일반적인 컴퓨터 사용 환경’에서이고, 단일 문자 단축키의 의도하지 않은 대표적인 작동은 음성 입력에서 발생하게 된다.

예를 들어, 이메일을 작성하려고 할 때 다음의 상황이 일어날 수 있다. 받는 사람의 이메일이 mulder21c@gmail.com 이라고 가정해보자.

이미지출처: Freepik
  1. 이메일 작성 페이지를 진입하고, 받는 사람 입력 상자에 초점을 둔다.
  2. 받은 사람의 이메일을 입력하기 위해 음성 입력을 통해 알파벳 하나 하나를 발음한다.
  3. ‘Mike’, ‘Uniform’, ‘Lima’
  4. 그리고 ‘Delta’를 입력하는 순간 ‘d’에 매핑 된 단축키 기능이 실행되어
  5. 작성하려던 메일 창을 벗어나 새 탭의 편지 쓰기 페이지로 가버린다. (전혀 의도하지 않은 기능의 실행이다)
  6. 무한 반복이다

에이~ 설마요~ 하는 분이 계시다면 아래의 영상을 잠시 보시기 바란다.
다소 오래전의 영상이고 화질이 매우 좋지 않지만, 실제로 이 성공 기준에 대한 리포트로 W3C에 올라와 있는 내용이고, 구글 드라이브에서 ‘dad’를 발음 하는 순간 drawing이 실행되는 것을 볼 수 있다.

혹자는 이렇게 생각할 수 있다. 그럼 그냥 음성 입력을 안 쓰면 되잖아?
미안하지만, 이건 장애를 전혀 이해하지 못해서 발생하는 의문이기 때문에 장애의 종류에 대해서 다시 알아보셔야 한다.

만일 전신 마비를 겪고 있는 사용자라면 손이나 발 등의 신체를 사용하여 입력하기 어렵기 때문에, 이들이 선택할 수 있는 입력 장치는 매우 제한적이고 어쩌면 그 중 가장 편하고 쉽게 접근할 수 있는 것이 음성 명령 소프트웨어를 통한 입력일 것이다.

그런 사용자까지 고려해야 하냐고? 당연하다.
전신 마비를 겪고 있다고 해서 온라인 쇼핑을 하고 싶은 욕구와 권리를 막아서도 안되고, 최근 유행하는 OTT 드라마나 예능 프로를 보고 싶은 욕구와 권리를 막아서도 안되며, 인터넷 커뮤니티에서 다른 이들과 이야기를 나누고 웃고 즐기고 싶은 욕구와 권리를 막아서도 안된다.

무튼, 이러한 음성 입력 사용자에게는 매우 쉽게 발생 할 수 있는 문제이기 때문에 이 문제를 경험하지 않도록 방지하는 것이 필요하고 이를 위한 지침이 바로 이 검사 항목(성공 기준)이다.

손 떨림이 심하거나 정확한 키를 누르기 힘든 사용자

손 떨림이라고 표현했지만 수전증과 같은 수준의 손 떨림은 아니다. (단지 번역 상 손 떨림 말고는 선택할 만한 어휘가 떠오르지 않았을 뿐)

뇌병변 질환 등의 이유로 근육을 자유롭게 사용하기 힘든 사용자나, 손이나 발을 사용할 수는 없지만 머리나 몸의 사용 등은 가능하여 머리에 쓰는 스틱이나 입에 무는 스틱 등을 사용하여 키보드를 사용하는 사용자의 경우에는 내가 원하는 키를 한 번에 정확히 누르는 게 어려울 수 있다

이러한 사용자들의 경우에도 앞선 상황에서와 마찬가지로 의도하지 않게 어떤 기능이 작동되게 된다면 기능을 되돌리는데 많은 힘을 들여야 할 수 있다.

어떻게 해야 하나?

일단 가장 손 쉬운 방법은 단일 문자 단축키를 제공하지 않는 거다. 얼마나 쉬운가! 단일 문자 단축키를 제공하지 않으면 위와 같은 문제는 일어날 이유가 없다.

이렇게 이야기 하는 순간! 이제 상상력이 부족한 혹자는 ‘역차별’을 운운하기 시작한다. 단축키를 제공하지 말라니?! 겨우 장애인을 위해서 기능을 제거하라는게 말이나 되는 소리냐는 식의 논조를 가져오는 경우를 적어도 나는 매우 쉽게 받아봤다.

자, 나는 단축키를 제공하지 말라는 이야기를 한 적이 없다. 내가 말한 것은 “단일 문자 단축키”다. 그러니까 단일 문자 단축키를 제공하지 말고, 보조 키(CTRL, ALT 등등)와의 조합을 사용하는 단축키를 제공하면 위의 문제를 일부해소 할 수 있다.

하지만 조합 키를 사용하게 되는 순간 누군가에게는 또 다른 불편함이 증가되기 마련이다. 그러니까 사실 이것은 해답이 될 수 없다. 🤣

단일 문자 단축키 활성/비활성 기능 제공

단일 문자 단축키는 분명히 누군가에게는 매우 편리한 기능일 수 있다. 그러니까 이 단축키를 사용하기 원하는 사용자에게는 제공되는 것이 당연히 좋을 것이다. 그리고 이 단축키가 문제가 될 수 있는 사용자는 이 기능이 제공되지 않는 것이 좋을 것이다. 제공과 비제공의 동시 적용은 당연히 모순이다. 하지만 우리는 언제든지 이를 적용할 수 있는 방법을 가지고 있지 않나?

제공하고자 하면 켜두면 되고, 제공하지 않고자 하면 꺼두면 된다. 바로 설정 기능을 통해서.

그러니까 단일 문자 단축키 기능에 대한 활성/비활성 기능을 제공하면 원하는 사용자는 단축키를 활성화해서 사용할 것이고, 원하지 않는 사용자는 단축키를 비활성화해서 사용할 수 있다.

앞서 언급한 문제들이 깔끔하게 해결될 수 있다.

단 이를 제공할 때 주의해야 할 것은, 기본 설정은 비활성 상태여야 한다는 것이다. (그런데 이 중요한 사실을 알려주는데가 없…)
왜 비활성 상태가 기본이어야 할까?

설정을 통해 기능을 비활성시킨다는 것은 이 설정 기능이 있는지 아직 인지하지 못한 상태라면 단일 문자 단축키를 언제든지 작동시킬 확률이 매우 높다는 것을 암시한다. 결국 앞서의 문제를 겪는 사용자가 여전히 발생한다.

하지만 설정을 통해 기능을 활성화 시키게 되면, 모든 사용자는 단일 문자 단축키가 작동하지 않는 상태이므로 앞서의 문제를 겪는 사용자는 없는 상태이고 이후 설정 기능을 통해 기능을 활성화하게 되면 내 선택에 의한 활성화이기 때문에 그로 인한 불편함을 겪어야 하는 사용자는 이미 이를 염두해 둔 상태일 것이므로 문제될 것이 없다.

보조 키를 조합한 단축키로의 재할당 기능 제공

네이버 메일 단축기 변경 화면

혹시 여러분이 사용하는 프로그램이나 서비스에서 제공 된 단축키를 변경해본 적이 있나?
대부분 단축키를 변경하는 것은 내가 기억하기 쉬우려고 혹은 내가 사용하기 편하려고 하는 경우가 가장 많을 것이다. 앞서서 잠깐 보조 키의 조합에 대해서 언급했는데 이것은 해답이 될 수 없다고 했지만 엄밀하게는 누군가에게는 해결 방법이 될 수도 있고 누군가에게는 아닐 수도 있다. (예를 들면 머리에 쓰는 스틱을 사용해서 키보드를 사용하는 사용자는 기능키 조합이 매우 어려울 테니까 말이다)

하지만 누군가에게는 단축키 재할당이 혹시 발생할 수 있는 잘못 누름을 방지할 수 있는 기능이 될 수 있고, 누군가에게는 아예 단일 문자 단축키가 작동하는 것을 막기 위한 수단으로서의 기능이 될 수도 있다.

초점을 받은 상태에서만 단일 문자 단축키 기능 작동

또 다른 방법으로는 단축키가 아무 때나 작동하는 것이 아니라, 특정 컴포넌트가 초점을 가지고 있을 때 단축키가 작동할 수 있도록 제공하는 것이다.

예를 들어, 지도 서비스에서 지도뷰 컴포넌트가 초점을 가지고 있을 때 f키를 누르면 확대 되는 단일 문자 단축키가 작동하게 한다면 어떤 장소를 검색하기 위해 f를 발음 했을 때 지도가 확대되어 원하던 검색어 입력이 아닌 전혀 다른 기능이 작동되는 것을 방지 할 수 있을 것이다.


물론 이 방식을 모두 만족 또는 조합시켜야 하거나 한 가지 방식을 선택하기만 하면 되는 문제가 아니다. 서비스의 성격 상 어떤 방법은 적절할 수 있고 어떤 방법은 다소 적절하지 않을 수도 있다. 그리고 언급하지 않은 또 다른 방법을 고려해 볼 수도 있다.

중요한 것은 서두에 언급한 문제들을 해소하면서도 이 기능들을 사용할 수 있는 사용자의 편리함을 해치지 않을 수 있을까를 고민하는 것이다.

개인적으로는 단일 문자 단축키 기능을 활성/비활성 할 수 있는 기능 제공과 내가 원하는 키로의 변경할 수 있는 기능 그리고 초점을 받은 상태에서만 기능 작동 이 3가지가 모두 조합되어 있는 형태가 가장 좋다고 생각하기는 한다.

그렇게 되면 단축키 자체가 불편을 일으키는 사용자는 비활성 상태로 사용하면 되고, 단축키를 기억하기 힘든 사용자는 내게 익숙한 단축키로 변경(기능키 조합은 선택)으로 손 쉽게 사용할 수 있으며 동시에 조작하려는 컴포넌트가 초점을 얻고 있는 상태에서만 조작되니 의도하지 않게 기능이 작동하게 되는 것을 줄일 수 있을테니 말이다.