들어가기 앞서… 오랜만에 펜을 잡… 아니 키보드를 두들겨봅니다. 이 글이 나태해진 제 자신에게 변화의 시작이 되기를 바라봅니다. 여기까지만 존대말… ^^;

이 글은 Accessible Culture의 Programmatically Determined라는 글의 일부 발번역과 나의 견해가 포함된 글임을 알린다.

프로그래밍 방식으로 결정

“프로그래밍 방식으로 결정” 이라는 문구는 61개의 WCAG 2.0 성공 기준 중 6개에서 눈에 띄는 항목이다. 그것은 아마 처음으로 접근성과 WCAG를 접하는 사람들에게는 약간은 어려울지 모르겠지만, 사실은 그렇게 복잡하지는 않다. 사실, 당신이 이 문구 자체에 익숙하지 않더라도 당신은 이미 그것을 다루고 있을 것이다.

어쨌든, 난 “프로그래밍 방식으로 결정”이 웹 개발자들에게 WCAG에 관해 웹 접근성이란 무엇이며 왜 HTML의 적절한 사용이 중요한지 설명할 때 상당히 유용한 개념이라고 생각한다.

HTML에 포함

일반적인 웹 페이지 내용의 기반은 물론 HTML 마크업이다. 제대로 사용하면 그것은 의미론적 구조 그리고 콘텐츠 간 연관 관계 및 차이점을 식별하는 역할을 한다.

대부분의 사람들은 웹 페이지의 HTML을 보지 못한다. 그러나 웹 페이지에 액세스하는 데 사용되는 브라우저는 페이지의 콘텐츠를 이해하기 위해 HTML에 의존한다. HTML은 브라우저에게 다음과 같은 것들을 알려준다.

• 이 콘텐츠는 단락으로 이루어저 있고 2레벨 제목 아래에 제공되고 있다.
• 이것은 5개의 항목을 가진 순서 있는 항목의 3번째 항목이다.
• 이것은 텍스트 입력 필드이고 어떤 이름을 가지고 있다.
• 이것은 그 웹 사이트의 저 페이지로 이동할 수 있는 링크이다.
• 이 웹 페이지는 불어로 되어 있다. 단 이 문장은 영어 등으로 구성되어 있다.

콘텐츠 구조와 관계에 대한 정보를 제공하는 것은 어떻게 HTML이 설계 되었는지와 그것을 사용하기 위한 방법에 대한 기본적인 부분이다.

우리는 그것을 ‘프로그래밍 방식으로 결정’이라고 부른다.

콘텐츠가 HTML로 적절히 마크업 된 경우, 그 의미론적 구조와 관계는 마크업 자체에 포함된다. 즉, 그것들은 “프로그래밍 방식으로 결정”될 수 있다. 말하자면 이러한 정보는 코드에 포함되기 때문에 지원 기술은 프로그램을 통해 그것을 해석하여 사용자에게 다른 방식으로 제공할 수 있다. 이 정보는 “다른 감각 형식(예. 비주얼, 음성) 혹은 개인 사용자들의 요구에 맞는 표현 양식으로 변경”될 수 있다. 이것이 접근성 있는 웹 콘텐츠와 WCAG 2.0의 핵심 컨셉의 중요한 측면이다.

이러한 정보는 브라우저를 통해 다양한 디바이스 혹은 소프트웨어가 그것을 이용 가능한 형태로 전달될 수 있다. 스크린리더, 음성 인식 소프트웨어, 대체 입력 장치 등이 각각의 콘텐츠가 무엇인지 이야기하고 사용자가 적절하게 그것들과 상호 작용하도록 할 수 있다.

위의 인용문은 WCAG 등 웹 접근성 규격에서 말하는 “프로그밍 방식으로 결정”이 무엇인지를 설명하고 있다.

쉽게 말해 HTML을 의미에 맞게 작성하면 브라우저나 보조 기기에서 그 의미를 해석하여 나름대로 가공하여 사용자에게 전달할 수 있고 이것은 곧 해당 콘텐츠가 “프로그래밍 방식으로 결정”될 수 있다고 할 수 있다.

링크를 a 요소가 아닌 span 같은 요소로 구현하고 키보드 접근성을 위해 tabindex를 0으로 주고 자바스크립트로 링크처럼 구현했다고 치자. 자바스크립트 비활성화 경우는 차치하고 무슨 문제가 있을까? 결론은 해당 링크가 “프로그래밍 방식으로 결정”되지 못한 것이 문제이다. 사용자는 링크처럼 클릭해서 사용할 수 있지만 브라우저나 보조 기기는 해당 콘텐츠가 링크인지 알 수가 없다는 것이다.

이 문제는 브라우저나 보조 기기가 링크를 가공할 때 도드라진다. 가령 브라우저는 링크를 우클릭할 경우 즐겨찾기에 추가, 새 창으로 열기 등 관련 편의 기능을 제공하고 스크린리더는 링크만 모아서 제공하거나 “무슨 무슨 링크”라고 읽어주는 등의 기능을 제공하는데… 위의 경우 그것이 불가능하게 된다.

결론 요약

가능하다면, 적절한 HTML 요소와 속성을 사용하라. 내용의 구조와 관계가 표현되게끔 마크업을 작성하라.

• 그것은 어떤 종류의 콘텐츠인가?
• 주위 콘텐츠와의 관계는 무엇인가?
• 기능을 제공하는 경우 그것은 무엇을 하는가? 이름, 역할, 상태, 그리고 값이 마크업에 드러나는가?

이러한 질문에 대한 답변을 HTML과 WAI-ARIA 마크업만으로 명확하게 제공된다면, 이는 곧 이와 같은 정보가 브라우저에 의해 프로그래밍 방식으로 결정되는 것이고 이는 곧 보조 기술 및 장치를 지원한다는 것을 뜻한다.

결국 인용한 글의 결론과 같이 의미있는 웹 콘텐츠가 있을 때 해당 의미가 HTML에 포함되도록 HTML 코드를 만들면 “프로그래밍 방식으로 결정”이라는 명제를 만족할 수 있다.