웹접근성 > 위지윅(WYSIWYG) 에디터와 스크린리더 관련 문의

펄님님의 글타래

님에 대한 정보

펄님님의 의견

최근에 위지윅 에디터의 스크린리더 접근성에 대해 살펴볼 일이 있었는데요, 신기한 사실을 하나 발견했습니다.

위지윅 에디터는 문서 구조나 스타일이 입력하는대로 바로바로 표현이 되어야 하기 때문에 일반적으로 iframe 을 넣고 body에 contenteditable="true"라는 속성을 지정합니다. contenteditable이라는 속성은 HTML5에서 생긴 것인데 input이나 textarea가 아니더라도 편집이 가능하도록 하는 속성입니다. 자세한 설명은 아래 URL을 참고해주세요.

http://html5doctor.com/the-contenteditable-attribute/

우리나라 포털에서 사용하고 있는 에디터들, 해외 에디터들이 모두 비슷한 방식으로 구현이 되어 있있습니다.


1. 네이버 메일 에디터

 <iframe src="/js_src/com/nhncorp/mail/write/se2_new/smart_editor2_inputarea.html" id="se2_iframe" name="se2_iframe" class="se2_input_wysiwyg" width="400" height="300" title="글쓰기 영역 : 글쓰기 영역에서 빠져 나오시려면 Shift+ESC키를 누르세요" frameborder="0" style="display: block; height: 500px;" tabindex="5">
iframe 내부
    <body class="se2_inputarea" style="height: 470px; font-family: 나눔고딕, NanumGothic, sans-serif; font-size: 9pt;" contenteditable="true">.....

2. 다음 메일 에디터

<iframe id="tx_canvas_wysiwyg1" name="tx_canvas_wysiwyg" tabindex="5" allowtransparency="true" frameborder="0" title="내용 입력" src="/hanmailex/pages/wysiwyg_html.html?prefix=1&amp;">
iframe 내부
<body onload="init()" contenteditable="true" style="background-color: transparent; padding: 8px;">.....

3. CKeditor

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, editor1" aria-describedby="cke_49" tabindex="0" allowtransparency="true" style="width: 100%; height: 100%;">
iframe 내부
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr" spellcheck="false">.....

이 코드 만으로는 세 에디터의 차이를 잘 모르겠는데요, 스크린리더를 실행시키면 1, 2번 에디터는 body 영역 내에 텍스트 편집이 되지 않습니다. 센스리더의 경우 가상커서를 해제하고 텍스트 입력을 시도했을 때 다른 영역으로 포커스가 이동하며, NVDA 테스트 시에는 편집 가능한 영역이라는 것 자체를 인식하지 못했습니다.

이와 다르게, 3번 에디터는 센스리더와 NVDA 모두 정상 인식/입력이 가능합니다.

다르게 반응하는 두 에디터 간에 어떤 동작의 차이가 있는것일까요??

펄님님의 글타래

님에 대한 정보

의견을 남기려면 소셜 로그인이 필요합니다.