Techniques for WCAG 2.0 - HTML and XHTML Techniques - 윤좌진
이 세션은 HTML and XHTML Techniques for WCAG 2.0에 대한 부분으로 한글문서도 번역되어 제공되고 있습니다.
대체텍스트
텍스트는 어디서나 사용가능하기 때문에 대체텍스트가 가장 사용하기에 접합합니다. img를 사용할 때 alt로 중요한 당어를 반드시 제공해야 하며 form의 이미지 전송버튼도 alt로 대체텍스트를 제공해야 합니다.(간혹 value로 제공하기도 하는데 이는 잘못된 것입니다.) alt로 충분한 정보를 제공할 수 없다면 longdesc를 이용해서 자세한 설명이 있는 곳에 경로를 제공해야 합니다. 과거에는 longdesc에 긴 설명을 넣어야 한다는 의견도 있었지만 일반적으로 링크를 사용하며 반드시는 아니지만 html문서로의 링크를 권장합니다.
- 동일한 의미의 텍스트와 이미지를 함께 사용하게 될경우에는 alt=""로 처리하여 대체텍스트를 제공하지 않습니다.
- 이미지의 존재를 무시하도록 하며련 alt와 title을 공백("")으로 만들어 비워둡니다.
- link에 대해서도 클릭했을 때 어떤 변화가 생기는지를 사용자에게 알려주기 위해서 링크텍스트를 제공합니다.
- map의 area는 alt와 title을 같이 제공하는 것이 바람직한데 이는 map의 이미지가 나타나지 않았을 때를 위해서입니다.
- object사용시에는 대체텍스트나 비대체텍스트를 제공해야 하면 이미지로 대체할때는 그 이미지의 대체텍스트를 제공해야 합니다.
- embed에는 noembed를 사용합니다.
- 프리픽스 문자어나 축약어를 사용할 때도 대체 텍스트를 제공합니다.
- frame, iframe에도 title을 사용하며 frame간의 탐색이 용이하도록 합니다.
올바른 마크업
- 스펙에 맞게 HTML을 사용해야 합니다.
- 시작태그와 종료태그는 DTD에 맞게 사용합니다.
- 올바르게 되었는지를 확인하는 1단계는 유효성감사입니다. 현실적인 어려움은 있지만 계속 노력해야 합니다.
- title태그는 고유한 페이지 제목을 정해야 합니다.(한 웹사이트에서 계속 동일한 타이틀을 사용하지 않습니다.)
- 문서의 주언어를 설정하여 사용되는 언어를 잘못인식되지 않도록 합니다.
- 컨텐츠는 가시적인 제목을 지정하는게 좋으므로 h1~h6태그를 사용합니다.
- 목록에는 ol, ul, dl을 사용합니다.
- 정의형 목록은 dl, dt, dd를 사용하며 용어와 설명간의 관계를 확실하게 하는 것이 좋습니다.
- 문장중 강조하려는 것은 의미에 맞는 마크업을 사용하는 것이 좋습니다.
- 반복되는 블록을 그룹화 하기 위해서 frame을 사용할수 있지만 권장하지는 않습니다.(보통은 서버쪽 기술로 반복되는 블록을 처리합니다.)
- 사용자측 리다이렉트를 하려면 meta태그의 http-equiv의 refresh속성을 사용하는데 0초 초과로 하면 사용자 히스토리에 남기 때문에 0초 초과로 하지 않습니다.
- 화면구성이 가로스크롤이 나타도록 하는 레이아웃은 좋지 않습니다.
테이블
- 테이블의 제목을 위해서 caption태그를 사용합니다.
- 개요를 위해서는 summary속성을 사용하면 이는 caption과 내용이 중복되지 않도록 합니다.
- 컨텐츠의 모양을 맞추기 위한 pre태그는 사용하지 않습니다.
- 제목셀과 내용셀의 정확한 관계를 위해서 scopre, headers, id의 연결관계를 나타내는 것이 좋습니다.
링크
- URI만으로는 충분한 정보를 제공했다고 할 수 없습니다.
- 링크의 그룹을 위해서 ol, ul을 사용할 수는 있지만 부분별하게 사용하는 건 좋지 않습니다.
- 목록이나 단락안의 a태그는 링크에 대한 충분할 설명이 제공되어야 합니다.
- 새창을 열기 위해서는 target속성을 사용하여 사용자가 인식할 수 있도록 합니다.
Form(서식)
- 논리적으로 순서에 맞게 작성하고 그럴수 없을경우에만 tabindex를 사용합니다.
- 서식전송을 위해서 submit버튼이 제공되어야 합니다.
- select요소의 동작을 실행하기 위해서도 버튼을 활용해야 합니다.
- 폼컨트롤과 텍스트레이블을 label요소로 연결하며 label로 연결할 수 없을 경우 title로 대체텍스트를 적용합니다.
- 폼은 fieldset과 legend요소를 사용하여 컨트롤들의 특징에 맞게 그룹화 합니다.
- select에서는 option을 optiongroup로 묶을 수 있습니다.
- 필수입력요소는 label이나 legend를 활용합니다.
내용은 알찼지만 스펙의 각내용의 대한 설명의 나열이었기 때문에 세션의 진행이 처음부터 끝까지 동일했기 때문에 장시간 집중해서 듣기에 좀 힘들었습니다. 어찌보면 이는 마크업의 특징상의 어쩔수 없는 부분이라고도 생각합니다. 다른 기술과는 달리 화려함이나 특별히 인상적인 부분없이 각 마크업의 나열식 설명이 될 수밖에 없기 때문에 듣는 입장에서는 약간 지루할 여지가 있다고 생각합니다. 다만 개인적인 의견으로는 스펙에 대한 설명을 처음부터 끝까지 다 하는것 보다는 상당부분은 번역된 문서로 해결될수 있으니 중요한 부분이나 실무에서 적용할수 있는 경험적인 테크닉의 공유쪽에 좀더 비중이 있었으면 하는 아쉬움이 있습니다.
Techniques for WCAG 2.0 - CSS Techniques - 연홍석
이 세션은 CSS Techniques for WCAG 2.0에 대한 내용으로 한글 번역문서도 제공되고 있습니다.
CSS는 표현을 담당하는 언어로 구조에 집중하게 해주는 수단입니다. CSS의 이점은 문서의 구조와 표현을 분리해 준다는데에 있습니다. WCAG의 4가지 원칙중에서 Perceivable와 Operable 2가지가 CSS에 관한 것이고 Understandable는 HTML, Robust는 신기술에 대한 것입니다.
- spacer이미지 대신 CSS의 margin과 padding을 사용해서 레이아웃을 디자인합니다.
- 구조적인 마크업을 기반으로 컨텐츠를 배치하여 CSS가 없더라도 구조화된 컨텐츠가 의미를 가지도록 합니다. CSS로 자유롭게 컨텐츠를 배치할 수 있으나 의미가 달라져서는 안됩니다.
- letter-spacing속성으로 단어내부의 간격을 제어합니다. 띄어쓰기로 처리하면 스크린리더에서 의미가 달라질 수 있습니다.
- DOM상의 순서가 시각적인 순서와 일치하도록 처리합니다. 순서가 화면과 다르게 되면 스크린리더를 사용하는 사용자는 혼란스럽습니다. 시각적인 순서는 위에서 아래, 왼쪽에서 오른쪽으로 진행됩니다.
- CSS를 사용해서 포커스를 받을 때 외관을 변경하는 것이 좋습니다.(보통 배경이나 border를 변경합니다.) :focus를 사용하는데 IE7이하헤서는 적용되지 않습니다.
- 텍스트 컨테이너의 크기를 em단위로 지정하여 텍스트가 커져도 잘리지 않도록 합니다.
- CSS로 텍스트의 시각적인 표현을 제어하고 이미지텍스트는 사용을 지양합니다.
- CSS를 사용해서 텍스트를 텍스트이미지로 대체하고 상호 전환할 수 있는 사용자 인터페이스 컨트롤을 제공할수 있습니다. 이는 IR(Image Replacement) 기법을 사용합니다.
- CSS로 왼쪽/오른쪽 정렬중 하나를 지정합니다.
- 브라우져의 리사이즈 시 행의 평균 글자수가 80자 이내가 되도록 컬럼폭을 상대적인 크기로 지정합니다.
- 배너나 네비게이션같은 부가 컨텐츠에만 CSS로 텍스트와 배경의 색상을 지정하고 메인 컨텐츠에는 지정하지 않아 사용자가 메인 컨텐츠의 색상을 변경할 수 있도록 합니다.
- CSS를 사용해서 컨테이너의 크기를 퍼센트값으로 지정합니다.
이 세션도 마찬가지로 문서의 스펙설명을 위주로 진행이 되었습니다. 특성 주제를 이용해서 관련된 스펙들에 대해서 설명하였는데 HTML세션과 마찬가지로 세션의 굴곡이 없는 스펙설명의 나열이었기 때문에 지루한 느낌이 드는 것은 어쩔수 없었습니다. 특성상 어쩔수 없다고 생각하는(개인적인 의견으로) 마크업과는 달리 CSS의 경우는 보여줄수 있는 요소들이 더 많았음에도 스펙위주로 설명이 된 것은 약간 아쉬웠습니다. 마지막에 약간의 데모시연이 있었지만 설명중간중간에 섞여서 구성되었다면 좀더 낫지 않았을까 하는 생각이 듭니다. 앞세션과 마찬가지로 좀더 현실적으로 구체적인 설명이 함께 되었다면 좋은 내용이 더 전달이 잘 되었을 것 같습니다. 스펙설명임에도 각 내용이 중요하다는 부분이라는 것은 굳이 언급하지 않아도 되겠죠 ㅎ
Techniques for WCAG 2.0 - Client-side Scripting Techniques - 김태곤
이 세션은 Client-side Scripting Techniques for WCAG 2.0에 대한 내용으로 한글번역문서도 제공되고 있습니다.(추가적으로 WCAG 2.0을 위한 ARIA 기법도 번역되어 있습니다.) 김태곤님의 발표자료는 블로그에 올라와 있습니다.
장치 독립성을 위해서 마우스 이벤트에 키이벤트를 같이 제공하여야 합니다. 다만 click에 대응하는 keypress에 대해서는 모든 키입력에 반응하기 때문에 Enter인지를 확인하는 코드가 추가되어야 합니다.
시간제어는 사용자에게 충분한 시간을 제공해 주어야 함을 의미합니다. 페이지에 제한시간이 있을 경우 제한시간의 중단, 조절, 연장중 최소한 1가지는 제공해 주어야 하며 실시간이 중요하거나 제하시간이 필수이거나 제한시간이 20시간 이상일 때 3가지 예외상황만 있습니다.
사용자 인지는 스크린리더같은 보조기술에서 얼마나 인식될 수 있는가 하는 부분입니다. 동적인 컨텐츠는 이벤트가 발생한 요소 바로뒤에 삽입해주어야 이상없이 스크린리더가 읽어줄 수 있습니다.
시간이 약간 초과된 관계로 이 세션을 빠르게 진행되기도 했고 스크립팅에 대한 부분이어서 흥미롭게 들었습니다. 키이벤트까지 추가되어야 한다는 것은 처음 듣는 얘기라서 정말 그렇게 해야하는 가는 약간 고민해야 보긴 해야겠지만 그외내용들은 생각지 못했던 부분이었던 관계로 상당히 알찼다고 생각하고 있습니다.
Epilogue
웹접근성에 상당히 관심이 있고 지지하고 있지만 관련한 실제 테크닉에 대해서는 많이 모르고 있었던 건 사실이었습니다. 퍼블리싱이 주 업무가 아니기 때문에 학습에 많은 시간을 할애하지 못한것도 사실입니다.
전체적으로도 꽤 의미있는 세미나였지만 마지막 전체 QA시간이 이 세미나에서 가장 인상적이었습니다. Q&A중에 한분이 질문을 하면서 자신의 내용을 공유하고 싶다고 하셨습니다. 보통 Q&A시간에는 질문이 아니라 쓸데없는 다른 자기 얘기하는 사람도 많기에 이번에도 그런가보다 하고 있었는데 이분이 나눠준 얘기가 아주 중요한 얘기였습니다.
이분은 실제로 약시 1급를 가진 시각장애인이셨는데 다른 시각장애인에게 접근성에 대한 많은 교육을 몇년동안 하셨습니다. HTML세션에서 얘기나왔던 longdesc에 대해서 테크닉적으로 여러 얘기를 나누었지만 국내 시각장애인중에는 longdesc를 어떻게 보는지 알고 있는 사람이 거의 없다고 하였습니다. longdesc가 있을 경우 스크린리더가 설명이 있다는 표시는 해주지만 그 설명을 보려면 단축키(Alt+Enter)를 눌러야 하는데 그에 대해서 아는 사람이 없기 때문에 longdesc를 개발자들이 사용하더라도 실제 시각장애인에게는 도움이 되지 않고 수백자 정도는 alt에 넣어주는 것이 오히려 좋다는 얘기를 공유해 주셨습니다.(이부분이 그동안 국내에서는 longdesc를 거의 사용안했기 때문에 그분들이 그걸 사용할 일이 없었기 때문에 기인한 일인지 원래 많이 쓰지 않는 기능인지는 잘 모르겠습니다.)
접근성에 대해서 생각하면 가장 어려운것이 이론으로만 어디서 찾아봤지 실제로 장애인들이 어떻게 사용하는지 모른다는 것이었습니다. 최근에는 관련자료도 많이 나와서 스크린리더가 어떻게 동작하는지에 대한 동영상들도 있고 정보문화진흥원에 가면 스크린리더를 체험해 볼 수 있는 시설이 있기는 하지만 말그대로 체험일뿐 실제 사용하는 사람과는 많이 다를 수밖에 없습니다. 구글도 접근성부분을 실제 장애인들이 많이 담당하고 있는 것으로 알고 있는데 국내에도 이런 실제적인 도움이 많이 필요하다고 생각됩니다.(명함을 받아오기는 했는데 개인적으로는 다음에 FRENDS에서 세미나라도 하게되면 이분께 이른부분에 대한 한세션을 부탁드리고 싶을 정도더군요. ㅎ)
오랜만에 회사에서 보내준 세미나인데 웹접근성에 대해서 생각을 많이 정리하고 동기부여도 많이 된 세미나였습니다. (물론 현실에서의 적용을 멀고 먼 길이지만요... 개인적으론 접근성은 테크닉보다는 마인드의 문제라고 생각합니다.)
