♿️ 한국형 웹 콘텐츠 접근성 지침 2.2
한국형 웹 콘텐츠 접근성 지침 2.2(Korean Web Content accessibility guidelines 2.2)는 방송통신표준심의회 심의를 거쳐 제작/배포된 문서이고, 비교적 최근에 지침이 개정되었다.(2022.12.28 개정)
웹 접근성 조치가 필요할 때 해당 문서를 기준으로 작업하면 중심을 잘 잡을 수 있다.
2.2버전은 이전 문서보다 양식 자체도 읽기 훨씬 편해졌고, 내용도 구체적으로 정의된 부분이 많아졌다.
기존 지침서와 비교해서 새롭다고 느껴졌거나 주목할만한 포인트를 기록해보자.
🌀 그전에...
웹 접근성을 왜 지켜야해요?
의외로 자주 듣는 질문이다. (악의적 의도가 아닌 순수 궁금증..)
- 우리회사는 접근성마크 필요 없는데요?
- 개발 불가해요/귀찮아요
- 전부 다 지키면 못생겨져요(?)
등등..여러가지 사유를 들어보았지만.. 그럼에도 내 입장은 '지켜야한다'이다.
접근성마크가 필요 없더라도, 개발이 불가하면 우회적인 방법으로라도, 디자인적인 부분을 조금 양보해서라도 지켜져야하는 부분이다. 그래서 웹 접근성 준수는 모든 직군의 협력이 필요한 작업이다.
접근성을 준수해야하는 기초적이고도 이상적인 이유로는 '모든 사람의 평등한 웹 이용'이다.
시각/청각/신체적 제한/이해력 제한 등에 구애받지 않고 동일한 정보를 제공받을 권리가 누구에게나 있다.
- 우리 회사 서비스는 비장애인만 사용하는데요..?
지침서는 신체적 장애를 기준으로 작성되었지만.. 그것이 반드시 장애를 의미하는 것은 아니다. 극단적인 예로 소음에 노출되었는데 미디어를 봐야하는 상황/ 마우스 없이 키보드로만 웹을 이용해야하는 상황 등이 있겠다.
이번에 개정된 지침에서 이 부분을 확실하게 짚어준다.
그래도 와닿지 않는다면...
법이라는게 있고요.. 법이 있으면.. 지켜야하고요.. 지키지 않으면.. 고소당할 수도 있어요..
지킬 수 있는 만큼 지키는 것이 좋다고 생각합니다.
「국가정보화기본법」, 「장애인 차별금지 및 권리구제 등에 관한 법률」...
왜 문서에서 구체적인 방법을 제시하지 않나요?
는 머리말과 개요에 써있다.
...
그러나 지침들을 가능한 한 준수하기 위해서 특정한 기술이 사용되어야 함을 전제하지 않았다.
그 이유는 본 표준에 포함된 지침들을 제정하는 시점에서 사용되는 기술만으로 한계를 정하기보다는
앞으로 개발될 기술을 최대한 수용할 수 있도록 하였기 때문이다.
...
그러나 본 표준에서는 웹브라우저나 컴퓨터, 운영체제의 종류 등은 고려하지 않았다.
그 이유는 본 표준에서 제시하는 기술은 현시점의 기술뿐만 아니라
향후 개발될 기술까지도 최대한 수용하지만
기술 발전에 따라 표준의 내용이 빈번하게 수정 또는 개정되는 일을 피할 수 있기 때문이다.기술 발전 속도를 지침서가 따라가지 못한다.
또 모두가 너무나도 잘 알고 있듯.. 개발 환경은 매번 다르고, 환경에 따라 접근하는 방법도 다를 수 있다.
예시로 들기에는 케이스가 너무 다양해서 지침서에 작성하기 어려움이 있지 않았을까 하고 예상해본다. 기본적인 예시는 구글링...... 또는 이곳에서 확인할 수 있다.
혹시나.. 다시한번..
지침서의 모든 내용을 정리하거나 상세히 설명하지 않습니다. 이미 잘 정리된 자료와 문서가 굉장히 많고,
한국형 웹 콘텐츠 접근성 지침 2.2에 아주 구체적이고 체계적으로 정리되어있으니 읽어보면 아주 유익합니다.
📌 개요
문서를 설계함에 있어 고려해야 하는 웹사이트 이용자 유형은 다음과 같다.
- 시각을 통해 정보를 인지할 수 없는 시각장애가 있는 경우
- 청각을 통해 음향 정보를 인지하지 못하는 청각장애가 있는 경우
- 신체의 움직임에 제한이 있는 지체장애가 있는 경우
- 읽기나 문장 이해력에 제한이 있는 언어 또는 지적장애 등이 있는 경우
- 키보드나 마우스를 사용할 수 없는 장애가 있는 경우
- 시각,청각 또는 손을 사용하고 있어 필요로 하는 일을 할 수 없는 경우: 운전중이거나 소음이 많은 곳에서 일하는 경우 등 웹 사용자가 처한 환경에 따라 제한받는 경우
💡 개요부터 박수를 쳤다.
웹 접근성이 반드시 신체적인 장애만을 위한 것은 아니라고 아주 맨 처음부터 명시가 되었다.
적용범위
이 표준은 웹 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로, 본 표준이 적용되는 범위는 PC, 터치스크린 기반 기기, 모바일 기기 등에서 실행되는 모든 웹 콘텐츠이다. 이 표준은 제3자가 제공하는 서비스(third-party services)를 포함하여, 웹 콘텐츠 서비스 제공자가 제공하는 모든 콘텐츠에 적용된다.
💡 적용범위에 대해서도 명확하게 명시되었다.
이제 "모바일도 비슷하지 않을까~?", "모바일은 정확한 문서가 없으니까 대강해도 괜찮지 않을까?"는 먹히지 않는다.
범위가 분명하고 명확해진만큼 접근성 준수는 더 까다로워지지 않을까.
📌 용어와 정의
3.1.5 네임(name)
사용자가 소프트웨어를 통해 웹 콘텐츠 내의 구성요소를 식별할 수 있도록 제공된 텍스트를 의미한다. 레이블(label)은 노출되어 있어 모든 사용자가 볼 수 있는 반면, 네임은 숨겨져 있을 수 있으며 보조기술에 의해서만 노출된다. 대부분의 경우, 레이블과 네임은 동일하다. 네임은 HTML의 name 속성과는 관련이 없다.
3.1.12 레이블(label)
사용자가 웹 콘텐츠 내의 구성요소를 식별할 수 있도록 제시된 텍스트나 텍스트 대체수단이 있는 구성요소. 네임(name)은 숨겨져 있을 수 있으며 보조기술에 의해서만 노출되는 반면, 레이블은 노출되어 있어 모든 사용자가 볼 수 있다. 대부분의 경우, 네임과 레이블은 동일하다. 레이블은 HTML의 label 요소에 한정되지 않는다. HTML의 label 요소는 모든 사용자 입력(예: 텍스트 입력 상자, 라디오 버튼, 체크 박스, 드롭다운 메뉴 등)의 용도 또는 역할에 대한 설명을 의미한다.
💡 지침서 내에서 의미하는 name과 label은 단순히 html 속성 또는 태그요소가 아니라 해당 용어 자체를 의미한다.
3.1.7 대체수단(alternatives)
멀티미디어 콘텐츠에 포함된 음성(대화)을 대체하기 위한 콘텐츠. 자막, 구술된 내용을 글로 옮긴 대본(transcript), 수어(sign language) 등이 그것이다. 여기에서 자막과 대본은 텍스트 콘텐츠이며, 수어 는 미디어 형식의 대체 콘텐츠이다.
3.1.8 대체 콘텐츠(alternative content)
텍스트 콘텐츠를 오디오, 비디오 또는 오디오-비디오 형식으로 변환하여 제공하는 미디어 콘텐츠. 예를 들어, 어떤 텍스트를 수어로 번역하여 제공하는 비디오 파일은 대체 콘텐츠라고 할 수 있다.
3.1.17 멀티미디어(multimedia)
시간의 변화에 따른 정보를 제공하기 위하여 오디오 또는 비디오 콘텐츠를 또 다른 포맷과 동기화하여 제공하도록 만들어진 콘텐츠 또는 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용이 필요한 매체
💡 비슷하다고 느껴져 한 군데에 모아보았다.
3.1.13 레이어 팝업 콘텐츠(layer popup content)
팝업창 차단 기능이 있는 브라우저에서 시각적으로 팝업창과 같은 효과를 내도록 구현한 콘텐츠. 레이어 팝업 콘텐츠는 같은 페이지의 일부 영역을 가리고 그 위에 표시되므로, 그 뒤의 콘텐츠를 보기 위해서는 반드시 레이어 팝업을 화면에서 사라지도록 해야 한다. 레이어 팝업은 웹 페이지에 포함되는 콘텐츠이므로, 6.1.2절(초점 이동과 표시)과 5.3.2절(콘텐츠의 선형구조)을 위반하지 않도록 구현해야 한다.
💡 레이어 팝업의 접근성 준수는 생각보다 까다로워질 수 있다는 힌트를 주고있다고 느꼈다. 아니나다를까 7.2.1(사용자 요구에 따른 실행)절 에서도 다시 짚어준다. 개인적으로는 접근성 준수 측면에서 가이드 툴팁도 레이어 팝업과 맥락이 비슷하다고 생각한다.
3.1.38 콘텐츠의 선형구조(linear structure of content)
콘텐츠가 보조기술로 제공되는 순서. 웹 페이지의 모든 콘텐츠는 시각적인 2차원 공간의 상하좌우로 배치되어 있어서 원하는 곳을 바로 찾아가거나 그 기능을 바로 선택하여 실행할 수 있다. 그러나 화면낭독프로그램 사용자는 모든 콘텐츠를 순차적으로 접근할 수 있기 때문에 시각적인 배치가 아닌 읽어주는 순서가 중요하다. 콘텐츠의 선형구조라고 하며, 이 구조는 논리적이어야 한다. 마크업 언어 로 제작된 콘텐츠의 선형구조는 스타일 시트와 테이블 구조들을 제거하면 얻을 수 있다.
➕ 5.3.2 (콘텐츠의 선형구조) 콘텐츠는 논리적인 순서로 제공해야 한다.
(2)내용, 표현 및 기능 분리: 브라우저 화면에 표시되는 콘텐츠의 순서는 웹 페이지에 수록된 콘텐츠의 선형구조와 항상 동일한 것은 아니다. 예를 들어, 스타일 시트를 사용하면 웹 페이지를 구성하는 콘텐츠의 순서를 변경하지 않고도 화면에 표시되는 콘텐츠의 배치(layout)를 임의로 변경할 수 있다. 따라서 웹 페이지를 구성하는 콘텐츠의 나열 순서는 그 맥락을 이해할 수 있도록 논리적으로 구성해야 한다. 배치를 시각적으로 변경해야 하는 경우에도 콘텐츠의 선형구조는 유지해야 한다.
💡 마크업에서 가장 기초적이고 본질적인 내용 중 하나. css가 없어도 인지하는 정보에 차이가 없어야 한다.
📌 인식의 용이성(perceivable)
5.1.1 (적절한 대체텍스트 제공) 텍스트 아닌 콘텐츠는그 의미나 용도를 인식할 수 있도록 대체텍스트를 제공해야 한다.
검사항목 5.1.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.
...
(4) 대체 텍스트를 제공함으로써 텍스트 아닌 콘텐츠에 대한 검색이 가능하게 된다.
💡 접근성과 최적화는 최종적으로 추구하는 방향이 같다. 접근성은 최적화와 동떨어진 별개의 항목이 아니다.
5.3.1 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
(1)표 정보 제공: 데이터를 표로 구성할 경우, 표의 내용, 구조 등을 이해할 수 있는 정보를 제공하여 표의 이용 방법을 예측할 수 있도록 해야 한다.
(2)표의 구성: 표의 내비게이션을 위하여, 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 한다.
💡 table을 구현할 때 최대한 table elements를 사용하면 좋지만 디자인이나 기획 등 여건에 따라 불가피하게 div와 같은 요소를 사용해서 table을 만들어야하는 경우도 있다. 이때 어떻게 대응하면 좋을지 구체적인 방법을 익혀두면 도움이 될 수 있다.
5.3.3 (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
5.4.1 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
💡 즉, css가 없는 상태에서도 정보는 동일하게 제공되어야 한다.
📌 운용의 용이성(operable)
6.1.3 (조작 가능) 사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.
웹 페이지에서 제공하는 모든 이웃한 콘트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기
로 제공해야 한다.
(1)콘트롤의 크기: 콘텐츠에 포함된 모든 콘트롤은 대각선 방향의 길이를 6.0mm 이상으로 제공하는 것이 바람직하다.
(2)링크, 사용자 입력, 기타 콘트롤 등의 안쪽 여백: 링크, 사용자 입력 및 기타 콘트롤은 테두리 안쪽으로 1픽셀 이상의 여백을 두고, 그곳에서는 위치 지정 도구의 조작에 반응하지 않도록 구현하는 것이 바람직하다.
💡 대각선의 길이가 6mm면서 각도가 45도인 정사각 형태의 버튼일 경우 가로,세로가 각 16px을 초과해야한다.
보다 명확한 영역 지정을 통해 사용성을 높이는 것은 물론 손떨림이 있는 사용자의 접근성을 보장한다.
6.1.4 (문자 단축키) 문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.
단일 문자 단축키(예: 대/소문자, 구두점, 기호 등 글자키나 숫자키 또는 특수문자키)를 제공하는 경우, 오류를 방지하기 위하여 다음 중 하나 이상을 충족해야 한다.
(1) 비활성화: 단축키를 끌 수 있는 방법을 제공해야 한다.
(2) 재설정: 한 개 이상의 기능키(예: Ctrl, Alt, Shift, Option, Command 등)를 조합하여 단축키를
재설정할 수 있어야 한다.
(3) 초점을 받은 경우에만 활성화: 사용자 인터페이스 구성요소(예: 폼 콘트롤, 링크, 콘텐츠 에디터 등)가 초점을 받은 경우에만 단축키가 활성화되어야 한다.
검사항목 6.1.4을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.
(1)음성명령 사용자가 입력을 위해 음성을 사용하는 것만으로도 의도하지 않게 단일 문자 단축키를 실행시키는 오작동을 방지할 수 있다.
(2)손 사용이 원활하지 않은 사용자의 단일 문자 단축키 사용 오류를 방지할 수 있다.
(3) 단일 문자 단축키 재설정 기능을 활용하여 익숙한 단축키로 변경할 수 있다.
💡 이번 개정에서 신규로 추가된 검사항목이므로 익혀두면 좋을것 같다. 그 외 신규 추가 항목은 아래와 같다.
(출처: 한국형 웹 콘텐츠 접근성 지침 2.2)
6.4.2 (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
(1) 웹 페이지 제목(title) 제공: 모든 웹 페이지가 해당 내용을 간단명료하게 기술한 제목을 포함하고 있을 경우, 사용자(예: 시각장애인, 지적장애인, 중증지체장애인 등)는 여러 개의 웹 페이지가 열려 있더라도 제목을 통해 웹 페이지를 선택하므로, 모든 웹 페이지에는 해당 페이지를 간단명료하게 설명한 제목을 제공해야 한다. 또한, 웹 페이지는 유일하고 서로 다른(unique and exclusive) 제목을 제공해야 한다.
(2) 팝업창 제목(title) 제공: 팝업창에도 제목을 제공해야 한다.
(3) 프레임 제목(title) 제공: 웹 페이지의 모든 프레임에는 각 프레임을 설명하는 간단명료한 제목을 제공해야 한다. 모든 프레임에 간단명료한 제목이 부여되면, 사용자(예: 시각장애인, 지적장애인, 중증지체장애인 등)는 프레임 제목을 통해 프레임의 선택, 이동 등이 가능하다. 아무런 내용이 없는 프레임에도 '빈 프레임' 등과 같이 제목을 제공해야 한다.
(4)콘텐츠 블록 제목 구성: 콘텐츠 블록에는 적절한 제목(heading)을 제공하면 제목과 본문을 구분할 수 있으며, 제목을 이용하여 콘텐츠 블록 간의 이동이 가능하다. 그러나 본문이 없는 콘텐츠 블록에는 제목을 붙이지 않아야 한다.
(5)특수 기호 사용 제한: 웹 페이지, 프레임 또는 콘텐츠 블록의 제목은 문장의 하나로 간주하여 불필요한 특수 기호를 반복하여 사용하지 않아야 한다.
💡 의외로 종종 간과되는 내용이라 강조해보았다.
문서 내에도 작성되어있지만 웹 페이지와 마찬가지로 동일한 페이지에 포함된 모든 프레임은 해당 프레임만의 유일하고 서로 다른 프레임 제목을 가져야 한다. 프레임 제목을 통해 프레임 간 이동을 보다 편리하게 할 수 있다.
📌 이해의 용이성(understandable)
7.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
…
(4) 레이어 팝업: 레이어 팝업은 콘텐츠의 논리적 초점 이동 및 콘텐츠의 선형구조를 위반할 가능성이 많으므로 사용하지 않는 것이 바람직하다.
(5)새 창/팝업창/레이어 팝업의 닫음: 새 창/팝업창/레이어 팝업에 초점이 있을 경우, 새 창/팝업창/레이어 팝업을 닫거나 종료 버튼을 클릭하였을 때, 해당 창 또는 팝업 등이 종료되어야 한다. 사용자가 화면에 나타난 새 창/팝업창/레이어 팝업을 닫거나 종료하도록 요구하였음에도 불구하고 해당 창 또는 팝업 등이 종료되지 않으면 사용자는 매우 당황하게 된다. 특히 레이어 팝업의 경우 이러한 혼란이 가중될 수 있다.
💡 3.1.13 레이어 팝업 콘텐츠(layer popup content) 에서 설명되었듯 7. 이해의 용이성(understandable) 파트에서도 레이어팝업의 위험성(?)을 한번 더 명시한다.
👏🏻 마무리
🐱: 오랜만에 포스팅을하며... 별안간 벅차오른 오타쿠가 되었다..
정리해둔 내용은 조금 더 있지만..... 이미 양질의 자료가 많기때문에 생략했다.
조금 거친 표현으로.. 누구나 소외계층이 될 수 있기때문에.. 본인 혹은 주변인을 위해서라도 접근성은 지켜지는 것이 맞다.
인간은 누구나 나이를 먹고.. 그에따라 발생되는 신체적 제약도 있을 것이다. 10픽셀짜리 버튼 눌러야하는데 잘 안보여서, 손이 떨려서 계속 잘못 누르게되면 속상하지 않겠는가..
모든 상황에서 자신만은 예외라고 생각하는 것은 오만이 아닐까.
🗂 참조한 문서
- 한국형 웹 콘텐츠 접근성 지침 2.2
