아마 여기에 적는 내용들은 웹접근성 명세에 상세하게 나와있는 부분일 것이다. 정말 관심을 가지고 완벽하게 준비했더라면 여기까지 오지 않았을 수 있겠지만, 최근에 제작했던 웹사이트의 웹접근성 인증마크 획득에 문제가 생겼다.

아무튼 문제가 생겼던 내용 각 부분들과, 각 문제들을 해결하기 위해 취해야할 구체적인 방법을 웹접근성 인증센터의 담당자와 통화를 하며 구체화했다. 웹접근성 인증마크 획득에 있어 문제가 되었던 각 사례들과 해당 사례들을 대처하는 방법을 나열해 본다.

이미지 Alt 값 대처

(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
이미지에 alt 값을 넣는 것은 접근성 제공의 가장 기초적인 방법임에도 불구하고, 정확하게 어떤 상황에 어떤 대체 텍스트를 제공해야 하는지에 대해서는 아는 바가 없었다. 아무런 텍스트가 없는 웹페이지의 헤더 이미지나 슬라이드 이미지들에 해당 이미지의 용도를 설명하는 텍스트를 적었지만, 부적합 판정을 받았다.

이미지에 텍스트가 존재하는 경우
이미지에 정보를 제공하는 텍스트가 존재하는 경우에 alt에 모든 텍스트를 적어준다.

이미지에 텍스트가 존재하지 않는 경우
alt 값은 적되 그냥 비워둔다. <img src="img/test.png" alt="" />

달력 선택 Javascript Plugin

(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
웹사이트 제작 중에 날짜 입력을 위해 datepicker.js 같은 자바스크립트 달력 플러그인을 사용할 일이 있다. 대중적인 datepicker.js 는 키보드 입력방법을 제공하지 않고, 가능하도록 수정하는 것도 쉽지 않은 일이다.

이 경우, 달력이 로드되고 결과가 입력되는 input 에 키보드를 이용해 수동으로 입력가능하도록 해 주기만 하면된다. 대신 placeholder를 이용해 예제 양식을 YYYY-MM-DD 같은 방식으로 제공해 준다.

DIV 스크롤 박스 접근

(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
위 내용을 보다 구체적으로 풀면, ‘마우스로 조작가능한’ 모든 기능을 키보드로 사용할 수 있어야 한다고 한다. div 를 이용해 제작된 스크롤 박스, 예를 들어 회원가입 페이지의 약관 내용같은 경우, 마우스로 스크롤을 내릴 수 있는 만큼 키보드로도 접근이 가능해야 한다.

이 부분이 가장 까다로웠는데 결국 div를 iframe으로 대체하는 것으로 정리했다. textarea를 사용할까 했지만, pre처럼 안쪽 내용의 스타일링이 불가능한 속성 때문에 포기하였다.

div 에 키보드로 포커스 접근을 가능하게 하는 방법이 있으면 좋겠지만, 아직은 찾지 못했다.

포커스 중인 링크 표시

(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
focus 가능한 모든 요소에 시각적으로 focus 중이라는 표시를 제공해 주어야 한다. 브라우저 기본 스타일로 대부분 제공되는 내용이지만, overflow 나 특정 스타일링에 의해서 가려질 수 있으니 주의.

키보드로 웹사이트를 이용하는 경우가 시각장애인임을 생각했을 때에, 왜 굳이 모든 링크에 focus 표시가 되어야 하나가 의문이었다. 문의해보니 마우스를 사용하지 못하는 지체장애인의 경우에 키보드만으로 웹사이트를 이용하고 있다고 하며, 때문에 시각적으로 표현해줄 필요가 있다.

레이어 팝업

많은 웹사이트에서 간헐적인 이벤트성 홍보 목적으로 팝업을 이용하는데 초점 이동이나, 사용가능한 메뉴를 가린다는 이유 등으로 웹접근성에서는 윈도우 팝업이나 Modal 방식의 레이어팝업 모두 쓰지 않는 것을 권한다.

피치 못할 경우 1개 정도의 팝업은 허용하나, 첫 번째 Tab키를 눌렀을 경우 바로 해당 팝업을 닫을 수 있도록 이동되어야 한다. 내가 제작한 웹사이트의 경우 두개의 팝업이 주 메뉴를 가리고 있었고, 모든 팝업을 삭제하고 인덱스의 메인 슬라이드를 이용해 홍보 내용을 디스플레이 하는 것으로 수정하였다.

제목 제공

(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
페이지 제목의 분류가 더 가능함에도 불구하고, 상위 범주로 제목을 제공한 경우에는 웹접근성에 위배된다. 여기서 제목이라는 것은 <head>안의 <title> 태그를 의미한다.

게시판의 경우
최선은 목록에서 포스트를 클릭하여 한 포스트를 자세히 보는 경우에 해당 포스트의 제목도 <title>로 제공해주는 것이지만, ‘공지사항 목록’, ‘공지사항 상세보기’ 정도로 제공해 주어도 통과에는 문제가 없다고 한다.

탭의 경우
탭으로 제작된 페이지 역시 각 탭의 제목이 <title>에 반영되는 것이 최선이지만, url 의 변화가 없는 경우에 굳이 <title>에 반영할 필요는 없으며, <h1>등의 헤딩태그를 이용해 제목을 제공해 줌으로 스크린리더가 읽을 수 있도록 구성해 주면 된다.

데이터 테이블과 레이아웃 테이블의 구분

(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
설명을 들었음에도 어떤 기준인지 여전히 명확하지 않지만, 인증센터에서는

을 두 가지 경우, ‘데이터 테이블’과 ‘레이아웃 테이블’로 구분한다. 표의 가장 위에 아래 row들의 제목이 column으로 나누어 제공되고 아래쪽으로 각 제목에 맞는 column이 row로 반복되는 일반적인 표의 형태를 ‘데이터 테이블’로 명명하고, 이것이 아닌 모든 경우를 ‘레이아웃’ 테이블라고 이해하면 좋을 것 같다.

레이아웃 테이블
th, summary, caption 을 제공하지 않아야 한다.

데이터 테이블
th, summary, caption 을 모두 제공하여야 한다. 이때 caption은 표의 제목, summary는 표에 대한 구체적인 설명이며 이 둘이 같을 경우에도 접근성에 위배된다고 한다.

사실 웹접근성이라는 것이 사업의 일환이 되면서, 웹접근성 인증센터에 대해 그리 긍정적인 인상을 가지고 있지는 않았다. 과하게 사소한 부분들을 책잡으며 불합격 판정을 내리고 재검수를 받는데에 추가금액을 요구하는 것에 뜨악하기도 했다.

당연히 복지차원에서 제공되어야 하는 부분이 누군가에겐 지출의 대상이 되고, 자본주의의 일환이 된다는 것은 여전히 불만이지만 실제 담당자들과 통화해 보면서, 내가 그저 사소하다고 생각했던 부부들이 어떤 의미에서 필요하고 또 누군가에게 큰 도움이 되는 것인지를 알게 되었다.

단순히 시각장애인들을 위한 접근성만을 웹접근성의 전부로 파악하고 있었던 내게 웹접근성에 대한 시야를 넓혀준 경험이 된 것 같다.