웹 접근성을 고려한 게시판 제작 기법.

출처 : http://naradesign.net/wp/

민간부문의 장애인 웹 접근성 제고 세미나(2008.11.3)에서 ‘웹 접근성을 고려한 게시판 제작 기법’이라는 주제로 발표하였습니다. 400석짜리 대한상공회의소 국제회의실 홀은 아침부터 저녁까지 가득 차 있었고 약 500여분 정도가 참석하셨다고 하는군요. ‘장애인 차별금지 및 권리구제 등에관한 법률‘이 당장 2009년 4월 부터 ‘공공기관’을 시작으로 적용되기 때문에 많은 분들께서 기다리는 세미나 였다고 생각합니다. 오전에는 주로 웹 접근성에 관한 사회 전반의 분위기에 관한 이야기들로 시작되었고 오후 시간으로 접어들면서 점점 IT 실무자들에게 필요한 주제로 전환 되었습니다. 물론 저도 다양한 이야기를 들어보고 싶어서 아침부터 저녁까지 함께 했고 제 발표는 오후에 진행이 되었습니다. PDF 형식의 자료 배포를 선호하지 않고 사용성이나 접근성이 모두 떨어진다고 생각하기 때문에 발표자료를 이렇게 블로그에 풀어 놓습니다.

1. 게시판 인터페이스의 웹 접근성.
   1. 숨은 레이어를 가능한 사용하지 않기.
   2. HTML 문법으로 수행 가능한 동작을 Javascript로 처리하지 않기.
   3. Form 전송기능을 Javascript로 처리하지 않기.
   4. 숨은 제목(h*, caption, legend)을 제공하기.
   5. label이 생략된 input은 title 속성을 사용하기.
   6. Permalink 제공하기.
   7. ‘리치 텍스트 에디터’를 제공할 때 ‘플레인 텍스트 에디터’를 함께 제공하기.
   8. 사용자의 실수(세션만료, 로그아웃, 새로고침, 뒤로가기)를 만회할 수 있는 기회 제공하기.
   9. CSS를 지원하지 않는 Form Control요소를 장식하지 않기.
2. 게시판 인터페이스의 CSS 활용 기교.
   1. 가변폭 텍스트와 줄바꿈 처리에 관한 테이블 표현 기법.
   2. 숨은 제목 제공 기법.
   3. 텍스트 버튼 만들기.

1.1. 숨은 레이어를 가능한 사용하지 않기.

숨은 레이어란 display:none을 이용하여 일부 콘텐츠를 화면에 출력하지 않고 숨겨두는 형태를 말합니다. 이 방법이 문제가 되는 이유는 현재 국산 화면낭독기가 display:none 되어있는 콘텐츠를 모두 읽어내기 때문입니다. 현재 국내에서 50%이상의 점유율을 보이고 있는 화면낭독기 ‘센스리더’는 display:none을 읽지 않아야 한다는 웹 개발자들의 충고를 일부 수용하여 환경설정에서 display:none을 읽지 않을 수 있도록 조치하였지만 기본값은 여전히 display:none을 읽도록 설계되어 있습니다. 시각장애인들이 상황에 맞지 않는(또는 불필요한) 콘텐츠를 건너 뛰는데 많은 시간을 소비한다는 점을 감안할 때 숨은 레이어는 되도록 자제하는 것이 좋다는 의견 입니다. CSS의 모든 속성에는 각각의 속성들을 여러 종류의 미디어들(시각장치, 음성장치, 점자장치…)이 어떻게 받아들여야 하는지가 정의되어 있고 display 속성은 모든 장치에서 이 속성을 받아들이도록 명시되어 있습니다. 참조 CSS2 display, CSS2 Media Group.

1.2. HTML 문법으로 수행 가능한 동작을 Javascript로 처리하지 않기.

a 엘리먼트에 유효하지 않은 href 값을 사용하고 Javascript에 의존하여 페이지 이동을 수행하는 경우가 종종 발견 됩니다. Javascript를 지원하지 않는 브라우저  환경(PC, Mobile)에서는 링크에 접근할 수 없으므로 Javascript는 사용하지 않거나 겸손하게(Javascript를 지원하지 않는 환경에서도 기능할 수 있도록 Javascript 기능은 HTML으로부터 독립적으로 분리) 설계하여야 합니다.

1.3. Form 전송기능을 Javascript로 처리하지 않기.

<input type="submit" value="확인" />, <input type="image" alt="확인" /> 엘리먼트를 사용하면 Javascript 없이도 Form 전송 기능을 수행할 수 있습니다. 그러나 이때 <a href="#" onclick=""><img /></a> 형태로 마크업 한 다음 Form 전송 기능을 Javascript로 처리하는 경우도 자주 발견 됩니다. 이런 경우도 HTML이 해야 할 일을 Javascript가 가로챈 경우로써 Javascript를 지원하지 않는 사용자 환경에서 작동하지 않습니다. 또한 화면낭독기는 HTML 마크업 기반으로 웹 문서를 읽어내기 때문에 Form 전송 버튼을 <a> 엘리먼트로 마크업 한 경우 해당 버튼을 ‘~링크’라고 읽어주게 되고 이 버튼이 진짜 Form 전송 버튼인지 확신할 수 없게 되는 문제가 있습니다. <input type="submit" value="확인" /> 형식으로 올바르게 마크업 하는 경우 화면낭독기는 ‘확인 전송 버튼’ 이라고 읽게 됩니다. <input type="image" alt="확인" /> 형식으로 마크업 하는 경우 ‘확인 이미지 버튼’ 이라고 읽어주게 됩니다.

1.4. 숨은 제목(h*, caption, legend)을 제공하기.

시각이 있는 사용자들은 전체적인 내용을 한눈에 훑어내는 능력이 있기 때문에 각각의 콘텐츠 덩어리에 소제목을 부여하지 않더라도 어떤 내용인지 파악한 다음 빠르게 무시하거나 즉시 읽기를 시작할 수 있습니다. 그러나 시각이 없는 사용자들은 소제목을 생략하면 콘텐츠 본문을 읽어보아야만 해당 항목이 무엇을 의미하는지 추측할 수 있게 됩니다. 소제목을 표현하는 엘리먼트로는 h*, caption,  legend 등이 있는데 시각이 있는 사람들에게는 보이지 않고 시각이 없는 사람들만 인지할 수 있도록 설계할 수 있습니다. 이 기법은 이 글의 본문 ‘숨은 제목 제공 기법‘에 소개되어 있습니다.

1.5. label이 생략된 input은 title 속성을 사용하기.

서식 제어 요소들(input, textarea…)을 label 엘리먼트와 명시적으로 짝지어 주어야 한다는 지침과 label 엘리먼트의 적용 문법은 익히 알고 계시리라 생각 됩니다. 그러나 때로는 너무도 익숙한 인터페이스이기 때문에 label을 생략하는 것이 관행처럼 굳어버린 서식 제어 요소도 있고 label을 넣을 수 없는 경우도 있습니다. ‘검색’ 필드에서 label 엘리먼트를 사용하지 않는것이 label을 관행처럼 생략하는 대표적인 예 입니다. 하나의 인풋을 2~3개로 나누어 놓는 형태(주민등록번호, 전화번호, 우편번호…)는 각각의 인풋에 label 엘리먼트를 모두 연결해 줄 수 없는 사례에 해당 됩니다. 이런 경우 억지로 label 엘리먼트를 사용할 필요가 없습니다. 서식 제어 요소에 title 속성을 사용해도 동일한 효과를 얻을 수 있습니다. <input type="text" title="주민번호 뒷자리" /> 라고 마크업 하는 경우 화면낭독기는 label 대신 title 속성에 적힌 문자를 읽어주게 됩니다. 그러나 label 텍스트가 존재할 때에는 되도록 title 속성을 사용하는 것 보다 label 엘리먼트와 input을 명시적으로 연결해 주는 것이 좋습니다. label 텍스트는 서식 제어 요소에 ‘포커스’를 넣거나 ‘체크’ 또는 ‘체크 해제’ 기능을 수행하기도 하는 이유 때문입니다.

예)
정보메일 수신에 동의 합니다.

1.6. Permalink 제공하기.

Permalink란 변하지 않는 고유한 URL을 의미합니다. 웹 사이트를 개편하거나 CMS^{Content Management System}를 교체하는 과정에서 흔히 게시물의 고유한 주소체계가 자주 바뀌어 불편을 격게 됩니다. 웹 사이트 관리자는 사이트가 개편 되더라도 게시물의 고유한 주소가 변하지 않도록 설계 단계에서부터 고려하여야 합니다.

1.7. ‘리치 텍스트 에디터’를 제공할 때 ‘플레인 텍스트 에디터’를 함께 제공하기.

리치 텍스트 에디터란 WYSIWYG^{What You See Is What You Get} 방식의 웹 기반 편집기를 말합니다. 포털에서 제공하는 ‘네이버 스마트 에디터’나 ‘다음 에디터’가 이에 해당합니다. 대부분의 리치 텍스트 에디터들이 갖는 치명적인 접근성 문제는 키보드로 접근할 수 없거나 또는 편집창에 한번 들어가면 키보드만으로는 빠져 나올 수 없다는 것 입니다. 리치 텍스트 에디터에 접근하더라도 Tab키를 사용하면 ‘들여쓰기’ 명령으로 받아들이기 때문에 빠져 나올 수가 없는 것입니다. 따라서 리치 텍스트 에디터를 제공할 때 플레인 텍스트 에디터를 함께 제공하여 선택할 수 있도록 하면 키보드만을 사용하거나 시각 장애가 있는 사람도 글을 작성할 수 있게 됩니다. 한편 이 둘을 함께 제공하고자 할 때 풀어야 할 문제는 리치 텍스트 에디터에서 플레인 텍스트 에디터 사이를 전환하게 될 때 서식정보(제목, 글자크기, 색상 등..)들을 어떻게 처리해야 하는지 입니다. 리치 텍스트 에디터에서 플레인 텍스트 에디터로 전환하게 되면 스타일 정보들이 모두 사라지기 때문에 발생하는 고민 입니다. 글쓰기 화면 예제 보기.

1.8. 사용자의 실수(세션만료, 로그아웃, 새로고침, 뒤로가기)를 만회할 수 있는 기회 제공하기.

사용자는 언제 세션이 만료되어 로그아웃이 되는지 모릅니다. 그것을 친절하게 경고하거나 알려주는 사이트도 거의 없기 때문에 웹에서 글을 작성하다가 잠깐 한눈을 팔게되면 오랜시간 공들여 작성한 문서를 잃게 됩니다. 또한 사용자는 실수로 새로고침(Ctrl+R. F5)키를 누르거나 뒤로가기(backspace)키를 누를 수 있습니다. 이 한번의 실수로 오랜시간 작성한 글을 잃도록 방치하는 것은 옳지 않습니다. WCAG 2.0 PR^{Proposed Recommendation} 에도 이와 관련된 새 항목이 추가 되었습니다. WCAG 2.0 Guideline 2.2.5 재인증 : 인증된 세션이 만료 되었을 때 사용자는 데이터를 잃지 않은 상태로 재 인증 후에 계속해서 활동할 수 있어야 한다.

1.9. CSS를 지원하지 않는 Form Control 요소를 장식하지 않기.

Form Control(서식 제어) 요소는 모든 브라우저들이 CSS를 제한적으로만(color, background, border, width, height 정도) 지원하고 있습니다. 이것을 제한하는 이유는 웹 개발자(디자이너 포함)가 이것의 모양을 마음대로(극단적으로) 바꾸었을 때 발생할 수 있는 치명적인 사용성 및 보안 문제 때문으로 추측 됩니다. 하지만 최근에는 디자이너들이 Form Control 요소의 디자인을 마음대로 가공하기 시작했습니다. 물론 악의적이지도 않고 극단적이지도 않아서 시각이 있는 사람이라면 마우스를 이용해서 이용할 수 있지만 보통의 경우 키보드 접근에 문제가 생기고 설사 키보드 접근을 지원(정확하게 말해서 키보드가 접근되는 것처럼 흉내내는 것)했다 하더라도 화면낭독기가 접근할 수 없게 됩니다. 왜냐하면 CSS를 지원하지 않는 Form Control 요소를 가공하기 위하여는 표현을 위한 가짜 마크업이 들어가게 되기 때문입니다. 디자인 하지 말아야 하는 Form Control 요소는 제 글 ‘서식 제어 요소의 디자인은 제한되어야 한다‘ 라는 글을 참고해 주세요.

2.1. 가변폭 텍스트와 줄바꿈 처리에 관한 테이블 표현 기법.

게시판 목록 페이지에서 가장 골치아픈 문제 가운데 하나는 테이블 셀의 너비를 효율적으로 사용하지 못하고 있다는 점 입니다. 보통의 경우 각 컬럼의 너비값을 지정하여 고정시키는데 이렇게 너비가 고정된 셀 안에서 문자들은 셀의 너비보다 커지게 되면 줄 바꿈이 되고 셀의 너비보다 작은 경우에는 공간을 낭비하게 됩니다. 지금 설명드리는 CSS 기법은 제목 컬럼을 제외한 나머지 컬럼들의 너비가 문자의 크기에 따라서 결정될 수 있도록 하고 줄 바꿈 되지 않도록 처리하는 기법 입니다. 예제 페이지에서 브라우저의 너비를 극단적으로 좁게(또는 넓게) 조절해 보세요. 게시판 목록 페이지 예제 보기.

table { width:100%; }
th, td { white-space:nowrap; }
td.title { width:100%; white-space:normal; }

2.2. 숨은 제목 제공 기법.

숨은 제목등을 display:none 을 이용하여 제공하는 기법은 화면낭독기의 설정이나 종류에 따라서 읽지 못할 수도 있고 본래 읽지 않아야 하는 속성이기 때문에 안전한 방법이 아닙니다. 따라서 화면 낭독기 사용자를 위하여 숨은 제목을 제공하고자 할 때 더 이상 display:none 기법을 사용하는 것은 안전하지 않습니다. 시각이 없는 사람에게 숨은 제목을 제공하는 CSS 기법은 다음과 같습니다. 

.selector { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }

2.3. 텍스트 버튼 만들기.

버튼의 질감이나 입체 표현은 background-image를 사용하고 버튼의 내용물에 해당하는 문자는 텍스트로 처리하는 기법으로써 버튼을 마크업 하는 방법과 CSS 기법을 설명합니다. 문자의 길이에 따라 늘어나는 가변폭 버튼을 표현하려면 background-image를 두 번 사용해야 하는데 현재로서는 하나의 엘리먼트에 이미지를 한 번만 적용할 수 있기 때문에 표현을 위한 span 엘리먼트가 사용됩니다.

링크 버튼 :

<a href="#" class="button"><span>TEXT</span></a>

서식 전송 버튼 :

<span class="button"><input type="submit" value="TEXT" /></span> 

사용자 인터페이스 조작 버튼 :

<span class="button"><button type="button">TEXT</button></span>

텍스트 버튼 예제 보기. 예제에 사용된 이미지 보기. CSS 보기.