웹에서 입력창에 마법을 부릴 때 접근성이 훼손되면 싫다.

나는 마우스를 쓰는 걸 엄청 싫어해서 브라우저에도 pentadactyl1이라는 플러그인을 설치해서 쓴다. 이 플러그인은 웹 접근성이 떨어질 수록 이상하게 작동하는 문제가 있다. 예를 들어 코드 편집을 할 때 자동으로 인덴트를 해주는 경우 엔터가 두 번 입력된다든가.

하지만 오늘 WordPress의 CSS를 수정하다가 굉장히 짜증나는 걸 발견했다. 코드 하이라이팅을 해주기 위해 textarea에 입력하는 값들을 모두 후킹해서 화면 위에 덮어씌워진 pre태그 안에 쑤셔넣는다. 그래서 textarea는 비어있게 된다.

Pentadactyl은 vim 사용자를 위해 텍스트 입력중에 C-t를 누르면 그 입력창을 vim처럼 쓸 수 있게 해준다. hjkl로 이동도 되고 비주얼 블럭도 잡힌다. 그런데 CSS 편집중에 이 기능을 사용하지 아무런 입력도 되지 않고 이동도 되지 않아 개발자 도구를 꺼내서 이런 마법을 부려놓은 걸 알아냈다.
C-i를 누르면 입력창의 내용을 임시파일로 복사한 후 외부 편집기로 열어주는데 역시나 빈 내용 뿐이었다.
워드프레스는 웹 접근성을 엄청나게 따지고 접근성을 훼손하는 경우에는 접근성모드라는 것을 제공한다. 하지만 플러그인 제작자는 그럴 의무가 없다. 그래서 나는 불편을 겪고 아마 시각장애인들도 불편을 겪을 것이다.

요즘 웹을 한다는 어린 개발자들을 보면 접근성에 대해 말할 때 “그냥 잘 보이기만 하면 되지 그런 걸 왜 고려해요?”라고 말하는 사람들이 있다. 심지어 학교에서 HTML을 가르칠 때도 h1~6 태그의 의미를 가르치지 않고 그냥 글자 크기를 키워주는 태그라고 가르친다. 저렇게 가르칠 거면 차라리 가르치지 말았으면 하는 생각이다.


  1. http://5digits.org/pentadactyl/에서 제공하는 플러그인인데 Vim 사용자라면 꽤나 익숙하게 mouseless 브라우징을 할 수 있다.
    vimparator라는 플러그인이 더 유명하지만 이건 기능이 다양하지 않아서 Geek들은 pentadactyl을 더 좋아한다. 

pentadactyl 사용법

Basic: green

middle: blue

expert: red

scroll:

h: scroll left

l: scroll right

j: scroll down

k: scroll up

gg: go top

G: go bottom

<number>%: goto <number> percent of page

focus:

f: follow link

F: follow link in a background tab

;;: mouse over on a link (useful in frame-like page)

;s: save a link or image

mamaging tab:

o: open url

O: open url based current url

t: tab open

T: tab open based current url

d: close current tab

r: reload current tab

R: reload current tab without cache

gt: goto next tab

gT: goto previous tab

<C-n>: goto next tab

<C-p>: goto previous tab

:tabm <number>: move tab to <number>

:pin: pin tab

misc:

gi: goto input box

gf: view source

gF: view source in external editor

<C-i>: edit inputbox in external editor

<C-v>: passthru one command

<C-z>: passthru any command until press <esc>

managing url:

H: goto previous page

L: goto next page

gu: goto upper directory

gU: goto root directory

<C-a>: increase number on url

<C-x>: decrease number on url

<

p style=”margin-left: 2em;”>]]: goto link labeled “next” or etc

pentadactylrc

"1.0rc1

loadplugins '\.(js|penta)$'
group user
highlight Hint font: bold 20px "Source Code Pro", monospace !important; margin: -.2ex; padding: 0 0 0 1px; outline: 1px solid rgba(0, 0, 0, .5); background: rgba(255, 248, 231, .8) !important; color: black !important;
map -count -modes=n j -builtin <count><C-d>
map -count -modes=n k -builtin <count><C-u>
set autocomplete=
set guioptions=brs
set hintkeys=asdfg;lkjhweio
set hintmatching=firstletters
set scroll=5
set showtabline=multitab
set hinttags+=a:not([name])

set editor='/usr/local/bin/mvim -f + +"sil! call cursor(0, <column>)" '

set passkeys=mail.google.com:'`~!#*+-./<C-Down><C-s><Enter>?INU[]acefjklmnopqrsuvxyz',*a,*n,*r,*s,*t,*u,ga,gc,gd,gi,gl,gs,gt,yo
set passkeys+=twitter.com:jkr.<cr>ln,gr,gh,ga,gf
set passkeys+=plus.google.com:jkonprl<Left><Right><Up><Down>
set strictfocus=twitter.com:laissez-faire,'chrome:*':laissez-faire,*:moderate

nmap -builtin <C-]> <C-v><esc>
imap -builtin <C-]> <esc>
tmap -builtin <C-]> <esc>

imap -builtin <C-p> <esc><C-p>
imap -builtin <C-n> <esc><C-n>

imap -builtin <cr> <pass>

js hints.addMode('h', "Echo title of element", function (elem) dactyl.echo(elem.title));
se extendedhinttags+=[h]:[title]

js hints.addMode('e', 'Focus input field', function(elem){dactyl.focus(elem);} );
se extendedhinttags+=[e]:input:not([type=hidden]),textarea,button,select

"map <esc> <C-v><esc><esc>

" vim: set ft=vim: