Daum의 아고라에 대한 의견

(다음 글은 Daum의 아고라 페이지에 대하여 시각장애인의 효율적인 사용을 조금이라도 증진하고자 스크린 리더 접근 시 문제점을 제시한 것이다)

1. 메뉴 건너뛰기 링크 문제:

현재 문서의 처음에 있는 메뉴를 건너뛰기 위한 skip navigation으로 메뉴 건너뛰기 현재 페이지 링크를 제공하였다.
- 명칭 문제: 왜 메뉴 건너뛰기인가? 메뉴 건너뛰기란 복잡한 메뉴를 건너뛰고 다른 곳으로 간다는 바로 이동한다는 의미인데 이동되는 곳에 대한 언급이 없다. 또한 무슨 메뉴를 건너 뛴다는 것인지 알 수가 없다.
따라서 '메뉴 건너뛰기' 보다는 이동할 곳을 지칭하여 '본문으로 바로 가기'가 좋지 않을까?
- 이동 후 문제: skip navigation 후 바로 만나는 것은 메뉴 밑의 아고라 핫이슈 관련 이미지의 앞에 위치한다. 스크린 리더로 들으면 다음과 같다.

Daum 미디어다음 - 아고라
웹접근성안내 링크
메뉴 건너뛰기 현재페이지 링크
링크
20071207090730.559.gif 그래픽 링크
아고라 핫이슈 이미지
총기탈취 당한 해병, 그들을 왜 탓하나 그래픽 링크

문제는 메뉴 건너뛰기를 하고난 다음 바로 듣게 되는 것은 20071207090730.559.gif 그래픽 링크 로서 스크린 리더로 들으면
이십조 칠백십이억 칠백구만 칠백삼십 쩜 오백오십구.gif 그래픽 링크
라고 음성 출렫한다. 처음 듣는 사람은 과연 이것이 무슨 말일까 의심하지 않을수 없다. 더구나 숫자가 일반인이 경험하지 못하는 조 까지 나오는 경우에는 더욱 그렇다. 십중 팔구는 잘못 이동한 것이라 생각한다.
이것은 해당 위치에 그림을 자동으로 올려 놓기 때문이라 생각된다.
이런 경우에는 자동으로 너무 자주 바뀌기 때문에 그림에 Alt text를 붙이지 못하는 경우라면 차라리 Alt text를 Null Text를 제공하고 바로 아고라 핫이슈 이미지에 접할 수 있도록 하는 것이 훨씬 나을 것이다.


2. 툴바3.0 설치가 세 번 음성 출력하는 이유?

이 부분은 daum의 툴바3.0 설치가 나와 있는 모든 페이지에 공통적으로 나온다.
파이어 폭스로 css를 제거하고 보면 다음 그림과 같다.

각각의 URL은
http://toolbar.daum.net/?nil_profile=g&nil_logo=toolbar
http://toolbar.daum.net/?nil_profile=g&nil_logo=ie7-search
http://toolbar.daum.net/?p=ie7&nil_profile=g&nil_logo=ie7-toolbar
과 같이 나타나나 화면상 차이는 없다. 상태 표시줄을 보면 세 번째 URL이 표시된다.
화면 상에는 한 개로 나오는데 소스에는 왜 세 개씩이나 있는지 궁금하다.

3. 아고라 메뉴의 구별

위의 그림을 스크린 리더로 읽으면 다음과 같다.

미디어다음 링크
스포츠 링크
텔레비존 링크
아고라 링크
아고라 홈 링크
토론 링크
이야기 링크
즐보드 링크
청원 링크
대선토론 링크
100분토론 링크
세계엔n 링크
블로거뉴스 링크
2007대선 링크

그림없이 소리만 들었을 경우에는 어떤 것이 큰 메뉴이고, 어떤 것이 작은 메뉴인지 알기가 어렵다.

대안 1. 큰 메뉴는 이미지 처리하여 그래픽 링크라고 음성 출력하고, 아고라의 하위 메뉴는 현재처럼 텍스트로 링크처리하면 그래픽 링크, 링크 만으로도 구분이 된다.

텔레비존 그래픽 링크
아고라 그래픽 링크
아고라 홈 링크
토론 링크

대안 2. 큰 메뉴의 텍스트에 헤딩을 사용한다. 예를 들어 큰 메뉴에 <h4>를 사용하면 큰 메뉴는 헤딩 4라고 읽고 링크는 그대로 링크라고 하기 때문에 구별이 가능학다.

텔레비존 링크 헤딩4
아고라 링크 헤딩4
아고라 홈 링크 헤딩4
토론 링크 헤딩4

4. 이동 문제:

화면 상의 내용을 스크린 리더로 읽는 경우
- 2007년 대선 메뉴,
- [2007대선 캠페인] 금주의 생활 공약 베스트 5 발표 링크
- 12.1(토) 날씨로 이동한다.
화면 상에서 본다면
- 2007년 대선 메뉴,
- 12.1(토) 날씨
- (지역별 날씨) 전남 0.7 맑음
- [2007대선 캠페인] 금주의 생활 공약 베스트 5 발표 링크
로 이동해야 한다.

5. 날씨 읽기

현재 날씨 부분을 스크린 리더로 읽으면 서울/경기 -0.1, 맑음 과 같이 한 지역을 두 줄로 읽어준다. 자신에게 필요없는 날씨 부분을 전부 소리로 듣는다는 것은 소음 공해다.

따라서 이러한 실시간 업데이트 되는 것의 앞에 시각장애인을 위한 보이지 않지만 소리로 음성출력하는 체크 상자(또는 라디오 버튼)를 만들어 '실시간 급상승 검색어 사용'이라는 명칭으로 제공하면 어떨까 한다. 즉 시각장애인은 이 콘트롤을 만나 선택안함을 선택하면 해당 부분을 건너 뛰고 다음으로 넘어갈 수 있게 하면 훨씬 사용하기 편리할 것이다.

6. 입력자 아이디 문제:

아고라 핫이슈 밑에는 현재 글 입력자에 대한 아이디가 나타난다. 이 아이디는 스크린 리더로 읽는 경우 해수사랑 링크 와 같이 음성 출력한다.

위의 내용을 소리로 듣는 경우 다음과 같다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
토론 링크

링크가 연속해서 3개가 나타나 글쓴이를 의미하는 링크는 무엇인지 알수 없다. 특히 글쓴이의 아이디가 갑자기 어려운 단어나 이상한 글자 조합으로 된 영어인 경우에는 더더욱 알 수가 없다.
따라서 제목 링크와 아이디 사이에 소스에 화면에는 보이지 않는 텍스트 "글쓴이:"을 주어 다음과 같이 음성 출력하면 좋겠다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
글쓴이:
해수사랑 링크
토론 링크

위와 같은 문제는 그 밑에 있는 아고라 핫 이슈에 대한 글 목록에서도 마찬가지이다.

위의 내용을 스크린 리더로 들으면 다음과 같다.

한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 방문한 링크
[100분토론]D-20, 국민의 선택은? 링크
미디어다음 링크
원칙 없는 42개大 총학회장 지지 선언 링크
해수사랑 링크
[생활공약] 고위 공무원에게 경차를! 링크
대선시민연대 링크
42개대 총학회장의 이후보 지지 보고 링크
onestep55 링크
이번 대선판, 혼란스럽고 답답한 이유 링크
겨울태양 링크
김근태 의원의 '노망난 국민'발언 듣고 링크
무상 링크

처음 방문자는 과연 어떤 링크가 기사 내용이고 어떤 링크가 글쓴이인지 알 방법이 없다. 해당 링크를 여러 군데 들어갔다 나오면 글 제목과 글쓴이가 링크로 되어 있다는 것을 알게 된다. 그러나 그것이 어느 정도의 시간을 투자해야 하는지는 알수가 없다.
위의 내용을 위에서와 같이 글쓴이 앞에 화면에는 보이지 않는 텍스트를 주어서 다음과 같이 음성 출력하게 하면 처음 접하는 사람도 쉽게 이해할수 있을 것이다.

한나라당의 웃음소리가 들립니다 링크
글쓴이:
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
글쓴이:
Lyricism 링크
[100분토론]D-20, 국민의 선택은? 링크
글쓴이:
미디어다음 링크
원칙 없는 42개大 총학회장 지지 선언 링크
글쓴이:
해수사랑 링크

7. 현재 경로 문제:

아고라 핫 이슈(위 그림)에서 글쓴이 다음에 갑자기 현재 경로가 표시된다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
토론 링크
>
경제 링크
>
경제 링크
한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 링크

링크 사이에 현재 경로 표시가 링크로 되어 있으니 소리만 듣고 이것을 현재 경로라고 인식할 사람은 아무도 없다. 실제로 시각장애인 정보화 교육 현장에서는 왜 갑자기 > 이 나타나느냐고 질문을 한다.
따라서 이것은 현재 경로 처음과 끝에 "현재 문서 위치 시작" "현재 문서 위치 끝" 이라는 보이지 않는 텍스트를 주면 훨씬 이해하기 쉬울 것이다.

성장지상주의,IMF 그리고 현 대한민국의 경제난... 코앞으로 불어닥친 대선, 각정파간의 대권.. 링크
|
해수사랑 링크
현재 문서 위치 시작
토론 링크
>
경제 링크
>
경제 링크
현재 문서 위치 끝
한나라당의 웃음소리가 들립니다 링크
바람의 근돌 링크
100분토론 보고,어떤 후보를 뽑을까 링크
Lyricism 링크

8. 아고라 글쓰기, 내 글 보기 음성 출력 순서 문제

아고라 첫 화면 오른쪽에 아고라 글쓰기와 내 글보기가 있다.
아고라 글쓰기에는 토론, 이야기, 즐보드, 청원이 있다.





스크린 리더로 확인하면 다음과 같다.

아고라 글쓰기 이미지
내 글 보기 그래픽 링크
토론글쓰기 그래픽 링크
이야기올리기 그래픽 링크
즐보드사진올리기 그래픽 링크
청원글쓰기 그래픽 링크

아고라 글쓰기에 토론, 이야기, 즐보드, 청원이 하위 항목으로 되어 있지만 스크린 리더로 확인하면 아고라 글쓰기는 이미지로 되어 있고 나머지 5개는 이미지에 링크로 연결된 그래픽 링크로 되어 있다.
따라서 음성 출력만으로는 아고라 글쓰기에 4개의 하위 항목(토론, 이야기, 즐보드, 청원)이 있는 것이 아니라, 아고라 글쓰기 이미지가 있고 5개의 그래픽 링크가 있는 것으로 이해된다.
또한 마우스로 아고라 글쓰기에 위치하면 밑의 4개 항목이 펼쳐지나 키보드로 아고라 글쓰기에 가면 펼쳐지지 않는다.
대안:
- 아고라 글쓰기 이미지에 키보드가 위치하면 밑의 부메뉴가 열려야 하며,
- 키보드로 이동시 아고라 글쓰기 다음에 토론, 이야기, 즐보드, 청원, 내 글보기 순으로 이동해야 하며,
- 아고라 글쓰기와 내글 보기를 헤딩 처리하여 구분해 주면 좋겠다.

위 세가지를 적용한 후 스크린 리더로 읽으면 다음과 같이 음성 출력하여 충분히 구별할 수 있다.

헤딩 5 아고라 글쓰기 이미지
토론글쓰기 그래픽 링크
이야기올리기 그래픽 링크
즐보드사진올리기 그래픽 링크
청원글쓰기 그래픽 링크
헤딩 5 내 글 보기 그래픽 링크

주의: 아고라 글쓰기 하위 메뉴를 텍스트로 바꾸면???
아고라 글쓰기 메뉴의 하위 4개를 그림이 아닌 텍스트로 처리하면 스크린 리더로는 다음과 같이 음성 출력한다.

아고라 글쓰기 이미지
토론글쓰기 링크
이야기올리기 링크
즐보드사진올리기 링크
청원글쓰기 링크
내 글 보기 그래픽 링크

음성 출력시 속성이 이미지, 링크로 되어 구별할 수 있지 않느냐고 하겠지만 아고라 글쓰기 이미지에 4개의 링크가 포함되었다는 것은 알수 없다. 따라서 이것은 좋은 방법이 못된다고 할 수 있다.

9. 이미지의 Alt text 문제 1:

화면상에는 아고라 핫채널, 아고라 베스트라고 되어 있는데 Alt text는 "메뉴 모음" " 베스트 글목록"이라고 되어 있다.
이미지에 Alt text를 다는 기본 원칙은 이미지의 글자를 그대로 Alt text화 하는 것이 아닐까?

10. 이미지의 Alt text 문제 2:

아고라 핫채널 밑에는 토론, 이야기, 즐보드, 청원 항목이 있고 각각의 밑에 세부 항목이 있다. 4개의 항목은 그림으로 되어 있고, 그림에는 Alt Text를 제공하였다.
문제는 제공한 Alt Text의 내용이다. 예를 들어 토론 그림에는 "토론탑"이라고 Alt Text를 제공하여 밑의 링크와 구별을 시도하였다.
즉 스크린 리더로 들으면

메뉴 모음 헤딩4
토론탑 그래픽 링크
정치방 링크
|
경제방 링크
|
사회방 링크

라고 음성 출력한다.
여기서 문제는 그림에는 "토론"이라고 되어 있는데 왜 "토론탑" "이야기탑" "즐보드탑"과 같이 "탑"이라는 글자를 붙였느냐는 것이다. 밑의 링크 항목과의 구별을 위해 "탑"을 붙였다면 "탑"은 처음이라는 뜻인데 처음 듣는 사람은 "토론탑" 이라는 단어로 인지하지 토론의 첨음인 토론탑으로 인지하지 않는다는 것이다.

대안:
- 먼저 Alt Text를 "토론"이라고 한다.
- 현재 부분이 메뉴시작 헤딩 4이기 때문에 토론, 이야기, 즐보드, 청원 항목에 <h5> 를 붙인다.
위와 같이 바꾸고 스크린 리더로 들으면 다음과 같이 된다.

아고라 핫채널 헤딩 4
헤딩 5 토론
정치방 링크
경제방 링크
사회방 링크
....
헤딩 5 이야기
이야기즐 링크
유머 링크
.....
헤딩 5 즐보드
포토즐 링크
직찍/제보 링크
.....

11. 테이블의 데이터 확인 문제:

아고라 베스트 밑의 글목록을 스크린 리더로 들으면 다음과 같다.

베스트 글목록 헤딩4
RSS안내 링크
테이블시작 (6행 3열)
빈줄
테이블 제목: 토론글 베스트 글목록
제목,댓글수
글쓴이
추천수
빈줄
후보간 '짝짓기' 도래, 현명한 유권자 선택은 링크
[64]
어린작가 링크
97
빈줄
BBK 수사발표 임박, 국민이 납득하려면 링크
[488]
torreypines 링크
1605
빈줄

(빈줄: 센스리더가 표에서 줄이 바뀌는 경우 표시해주는 소리)
위와 같은 표에서 시각장애인은 제목, 댓글수, 글쓴이, 추천수의 관계를 명확하게 알기 어렵다. 예를 들어 글쓴이의 아이디가 숫자(예: 1975)와 같이 되어 있다면 댓글수, 글쓴이, 추천수가 모두 숫자로 되어 있다면 더욱 어려워진다.
대안:
- 표에서의 각 셀에 타이틀 속성을 지정하여 스크린 리더가 정확하게 표현할 수 있도록 해 주어야 한다. 즉 테이블에서 다음과 같이 음성 출력할 수 있도록 하여야 한다.

베스트 글목록 헤딩4
RSS안내 링크
테이블시작 (6행 3열)
빈줄
테이블 제목: 토론글 베스트 글목록
제목
댓글수
글쓴이
추천수
빈줄
후보간 '짝짓기' 도래, 현명한 유권자 선택은 링크
댓글수: [64]
글쓴이: 어린작가 링크
추천수: 97
빈줄
BBK 수사발표 임박, 국민이 납득하려면 링크
댓글수: [488]
글쓴이: torreypines 링크
추천수: 1605
빈줄


12. 헤딩의 부적절한 사용 문제:

현재 아고라에는 <h1>부터 <h5>까지 있다.

헤딩1 다음 첫페이지로 가기 그래픽 링크
메뉴 모음 헤딩4
베스트 글목록 헤딩4
2007 대선 베스트 헤딩4
오른쪽 날개 컨텐츠 헤딩3
오늘의 토론 헤딩4
이야기 & 즐보드 헤딩4
네티즌 청원 헤딩4
헤딩2
헤딩3

문제:
- 문서 처음의 툴바 3.0 다음에 나타나는 <h1>을 사용한 의도를 모르겠다. 현재 문서에서 <h1>은 유일하게 사용되고 있으며, DAUM 로고 이미지와 연결되어 다음 첫페이지로 이동하기로 되어 있다. 궁금한 것은 굳이 다음 첫 페이지로 이동하기 위한 링크가 <h1>을 정할만큼 중요한 것이냐는 것이다. 그냥 링크로 하여도 관계없지 않을까?
- 오른쪽 날개 컨텐츠 헤딩3으로 되어 있는 것의 명칭 문제: 헤딩으로 처리하는 것은 현재 내용의 제목을 의미하는 것인데 "오른쪽 날개 컨텐츠"는 무엇을 의미하는지 알수 없다. 오른쪽 날개란 화면의 내용을 시각적으로 구분할 수 있는 경우에 가능한데, 시각장애인을 위하여 헤딩에 설명을 붙이는데 오른쪽, 왼쪽이라는 설명이 유용한지?
- 밑의 헤딩 2는 문서 밑의 "24시간 뉴스센터" 앞에 위치하고, 헤딩 3은 "서비스 약관"의 앞에 위치하나 헤딩의 내용이 없다.

즉 <h2>메뉴 안내</h2>라고 입력하면 스크린 리더는 메뉴안내 헤딩 2 라고 음성 출력함으로서 시각장애인이 현재 위치에 대한 중요도 또는 깊이를 파악할 수 있다. 그러나 <h2> </h2> 식으로 정의하면 "헤딩2"라고만 음성 출력하여 헤딩의 내용을 알수 없게 된다.
- 아고라 문서의 끝에 있는 <h2>와 <h3>의 구별이 없다. 24시간 뉴스센터 다음에 있는 9개의 링크가 전부 한 그룹이 아닌지?

대안:
- 기존의 문서 처음에 있는 <h1>과 문서의 끝 부분에 있는 <h2> <h3>을 삭제한다.
- 메뉴 모음, 베스트 글목록 이라고 달린 Alt text를 아고라 핫채널, 아고라 베스트로 바꾼다.
- 아고라 핫채널의 토론, 이야기, 즐보드, 청원에 <h5>를 적용한다.
- 공지사항에 <h4>를 적용한다.
위와 같이 정하고, 시각장애인이 스크린 리더로 헤딩간 이동(ctrl-f6)을 실행하면 다음과 같이 음성 출력하여 현재 문서의 구조를 파악하는데 아주 유익하다.

헤딩4 아고라 핫채널
헤딩5 토론 그래픽 링크
헤딩5 이야기 그래픽 링크
헤딩5 즐보드 그래픽 링크
헤딩5 청원 그래픽 링크
헤딩5 이야기 그래픽 링크
공지사항 헤딩4
헤딩4 아고라 베스트
2007 대선 베스트 헤딩4
오늘의 토론 헤딩4
이야기 & 즐보드 헤딩4
네티즌 청원 헤딩4

(참고: 현재 스크린 리더는 텍스트에 헤딩이 걸린 경우에는 "텍스트" 헤딩x 라고 음성 출력하고, 이미지나 이미지에 링크가 걸린 경우에는 "헤딩x, Alt text" 식으로 음성 출력함)

13. 토론 제목의 이미지 문제:
오늘의 토론 제목 옆에는 up, hot과 같은 이미지가 있다. 스크린 리더로는 전혀 음성 출력하지 않는다.

대안: 이미지에 대한 Alt text를 정확하게 정의하고(ip:상승 주제 hot:핫이슈), 해당 제목의 처음에 음성 출력하게 한다. 시각장애인은 음성 출력시 처음에 듣는 몇 단어를 가장 확실하게 이해하기 때문이다.

상승주제: 문국현 단일화 토론 제안, 이것이 논점이다 링크
핫이슈: 5년전 63만원으로 시작한 나, 지금은.... 링크

14. 배너에 Alt text 없슴
배너에 Alt Text가 없다.

"시사기획 쌈: 1988년 당신은 무엇을 하셨나요?" 라고 제공해야 한다.

15. 더보기 링크 문제:

아고라 메인 화면에는 더보기 링크가 2개 있다.
하나는 공지 사항의 더보기이고, 또 하나는 오늘의 토론의 더보기이다.
두 개 모두 이미지이기 때문에 Alt text를 "공지사항 더보기" "오늘의 토론 더보기"라고 하면 좋을 것 같다.


16. 웹접근성 안내 내용에 대한 의견:

무엇보다도 웹 접근을 위해서 설명서가 따로 제공되는 단계에 까지 이르렀다는 것이 뿌듯하다.
그러나 현재 내용으로는 시각장애인에게 문서 구조나 사용 방법 설명을 위해서는 많이 부족한 것 같다. 혹시 참고될 수 있을까봐 작성해 본다.

- 화면낭독기 사용시 참고 사항 -

화면 낭독기로 아고라 홈페이지를 쉽게 이해할 수 있는 방법은 다음과 같습니다.

현재 문서 처음으로 이동하여 화면낭독기의 헤딩간 이동()을 하면 문서 구조를 쉽게 이해할 수 있습니다.
기본적으로 헤딩1이 가장 높은 단계이며, 헤딩 2, 3, 4, 5의 순으로 분류됩니다.
또한 헤딩의 레벨에 따라 현재 위치가 어느 수준에 있는가를 확인할 수도 있습니다.

예를 들어
헤딩4 아고라 핫채널
헤딩5 토론 그래픽 링크
헤딩5 이야기 그래픽 링크
헤딩5 즐보드 그래픽 링크
헤딩5 청원 그래픽 링크
헤딩5 이야기 그래픽 링크
로 되어 있다면 아고라 핫채널 밑에 토론, 이야기, 즐보드, 청원, 이야기 항목이 있다는 것이 됩니다.
즉 문서 처음부터 끝까지 내용을 확인하시던가, 헤딩간 이동을 하여 원하는 위치로 바로 이동한 다음 한 줄씩 확인하시면 됩니다.

문서 내에서 여러 가지 불필요한 메뉴들을 건너 뛰고 본문으로 바로가기 위한 본문으로 이동 링크를 화면 낭독기로 확인할 수 있도록 제공하였습니다. 그러나 현재 국내 화면낭독기가 이 기능을 제대로 이해하지 못하여 본의 아니게 제대로 이동하지 않는 경우도 있습니다.

현재 문서 제목은 'Daum 미디어다음-아고라'로 통일되어 있습니다. 이 부분은 점진적으로 'Daum 미디어다음-아고라-경제토론방'과 같이 좀더 구체적으로 바꿀 예정입니다. 불편하시더라도 조금만 기다려 주십시오.

토론 글목록에서는 맨 처음에 제목이 나오고 다음부터는 댓글수: 글쓴이: 추천수: 등을 음성 출력하게 함으로서 소리로 쉽게 확인할 수 있도록 하였습니다.

Daum에서는 웹접근성 향상을 위해 여러분의 제안이나 의견을 환영합니다.
의견은 한메일의 아이디 a c c e s s I b I l I t y 로 보내 주시기 바랍니다.

(a c c e s s I b I l I t y 로 한 이유는 이메일을 전부 입력해 놓으면 너무 길고, accessibility라는 단어가 어려워 한 자씩 발음할 수 있게 한 것이다)