나라디자인

WCAG 1.1

모든 비-텍스트 콘텐츠에 대해서는 대체 텍스트를 제공한다.

KWCAG 1.1

텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

드림위버의 환경설정 메뉴에는 접근성 관련 항목이 존재합니다. 폼 요소, 프레임, 미디어, 이미지 요소를 삽입하는 경우 접근성 관련 속성을 삽입할 수 있는 대화상자가 자동으로 나타나거나 경고할 수 있도록 설정할 수 있습니다. 예를 들면 <img> 요소를 삽입할 때 alt 또는 longdesc 속성을 삽입할 수 있는 대화상자가 나타납니다. 작업순서는 다음과 같습니다. 아래와 같이 설정하면 <img>, <object>, <input>, <frame> 태그요소가 삽입되거나 복사될 때 접근성 관련 속성을 입력할 수 있는 대화상자가 나타납니다.

1. Preferences (Ctrl+U).
2. 
3. Accessibility.
4. Show attributes when inserting.
5. Form object, Frames, Media, Images 항목에 모두 체크한다.

바로 아래쪽에 있는 두 가지 추가 항목은 드림위버를 사용하는 시각장애인을 위한 설정 입니다.

• Keep focus in the panel when opening 에 체크하면 새로운 패널이 드림위버의 인터페이스와 Docking(결합) 되지 않은 상태로 열릴 때 가상포커스가 그곳으로부터 탐색할 수 있도록 해줍니다.
• Offscreen rendering (need to disable when using screen readers) 항목에 체크하면 스크린 리더와 드림위버가 충돌할 때 스크린 리더의 기능을 제한하게 됩니다.

참고로 드림위버를 사용하는 시각장애인들은 드림위버에서 제공하는 일반사용자들의 단축키 조합과 함께 추가적으로 Ctrl+Alt+Tab(가상커서 이동), Shift+Space(패널 여닫기) 및 방향키를 가지고 드림위버를 조작합니다. 위와 같이 접근성 관련 설정을 셋팅해 두면 <img>, <object>, <input>, <frame> 태그를 삽입할 때 다음과 같은 대화상자를 만나게 됩니다.

1. img 요소를 삽입할 때 나타나는 접근성 속성 대화상자.

   
   위와 같이 입력하면 alt 속성만 삽입 됩니다. longdesc 속성은 alt 속성만으로 대체문자를 표현하기에 분량이 많아지는 경우 해당 이미지만을 설명하는 별도의 html 문서를 따로 작성한 다음 그것을 링크하여 참조할 수 있도록 해주는 속성 입니다. 이렇게 longdesc 를 사용할 만한 상황은 권장되지 않습니다. 분량이 많은 텍스트를 이미지로 처리하는 경우 longdesc 속성을 사용할 수 있는데 이는 바람직 하지 않고 텍스트로 처리되어야 하는것이 정석 입니다.

2. object 요소를 삽입할 때 나타나는 접근성 속성 대화상자.

   
   swf 와 같은 오브젝트 요소는 alt 속성이 없기 때문에 title 속성으로 대체하여야 합니다. 그러나 title 속성을 넣더라도 스크린 리더가 그것을 읽어주는지는 장담하지 못합니다. 대부분의 스크린 리더는 flash와 같은 object 요소는 읽지 못하고 건너 뜁니다. 바로 아래쪽 항목인 Access key 및 Tab index 속성을 추가로 사용하는 것은 권장되지 않습니다. Access key 는 스크린 리더의 단축키와 충돌할 수 있는 가능성이 항상 존재합니다. 또한 Tab index 를 설정하여 Tab 키의 이동순서를 강제로 변경하는 것보다는 콘텐츠의 배열을 순차적으로 하여 Tab index 를 설정하지 않더라도 Tab 키의 이동순서가 문맥의 흐름에 맞도록 하는것이 좋습니다.

3. form control(input 따위) 요소를 삽입할 때 나타나는 접근성 속성 대화상자.

   
   여기서 label 텍스트를 입력하면 label 요소와 label 텍스트가 form control 요소와 함께 동시에 코딩 됩니다. label 태그로 form control 요소와 텍스트를 모두 감쌀 것인지, 또는 label 태그를 form control 과 분리하여 코딩하고 label 태그에 for 속성을 넣어줄 것인지, 또는 label 역할의 텍스트만 입력하고 label 태그는 넣지 않을 것인지를 설정할 수 있습니다. 또한 label 텍스트의 위치가 form control 요소의 앞쪽인지, 뒤쪽인지도 설정할 수 있습니다. 여기서도 Access key 와 Tab index 속성은 넣지 않는것이 좋습니다. Access key 와 Tab index 속성은 모든 경우를 통털어 사용하지 않는것이 좋고 더이상 언급하지 않도록 하겠습니다.

4. frame 요소를 삽입할 때 나타나는 접근성 속성 대화상자.

   
   프레임은 가급적 사용하지 않는것이 좋습니다. 스크린 리더 사용자는 프레임이 여러개로 나뉜 문서를 탐색할 때 프레임의 title 정보를 참조하여 어떤 목적의 프레임인지를 추측하게 되는데 만약 이것을 넣지 않는 경우 여러개의 프레임 내용을 일일이 읽어내어야 프레임의 용도를 알 수 있습니다. 이 작업은 학습되기 어려우며 매번 페이지를 이동할 때마다 똑같은 프레임을 어떤 내용인지 확인해 보아야 하는(갱신된 프레임은 아닌지, 프레임 구조가 바뀌지는 않았는지..)불편함이 있습니다. 이러한 불편은 스크린 리더 사용자가 프레임 문서에 접근할 엄두도 나지 않게 합니다. 그나마 이렇게 불편한 프레임을 굳이 사용하여야 한다면 최소한 프레임에 대한 title 속성은 넣어 주시기 바랍니다. 스크린 리더는 프레임을 탐색할 때 title 속성을 먼저 읽어주기 때문에 접근성을 조금 더 향상시킬 수 있습니다.

다음에 게시할 내용은 드림위버를 이용하여 제목태그 마크업 하기 입니다. 웹 표준에서 제가 가장 중요하게 생각하는(경험상 사용빈도가 높은) 것은 title, h*, ol, ul, dl 등과 같은 시멘틱 마크업 인데 특히 title 태그와 h* 태그는 매우 중요 합니다. 이는 접근성 뿐만 아니라 검색엔진 로봇으로부터 좋은 점수를 받게 되어 검색결과의 상위에 랭크될 수 있습니다.