본문 바로가기 목차 바로가기

텍스트 스타일

텍스트 크기 색상 모드

Daum 첫화면 웹 접근성 안내 본문

1. 소개

 Daum은 1997년 한메일을 시초로 서비스를 시작한 대한민국 최고의 포털 사이트입니다.
 Daum은 서비스의 입구라 할 수 있는 첫 화면을 "모두가 함께 하는 웹서비스"로 만들기 위해 웹 표준을 준수하고, 접근성을 높이기 위해 꾸준히 최선의 노력을 기울이고 있습니다.
 장애가 있더라도 원활하게 서비스를 이용할 수 있도록 Daum 첫 화면 사용 안내와 변경사항을 안내해 드립니다.

 Daum 첫 화면에는 종종 일부 화면을 덮는 동영상 광고가 자동 재생됩니다.
 이러한 사운드를 포함한 자동실행 광고를 제공받지 않기를 원하시면 '제공받지 않음'에 체크 후 '확인' 버튼을 눌러주세요.

자동실행 광고 설정 폼

 해당 기능은 브라우저별로 제공되며, '제공받지 않음' 설정은 1년 동안 유효 합니다. 만약 쿠키를 삭제할 경우, 해당 기능도 삭제되오니 재설정해주시기 바랍니다.

3. 자동 갱신에 대한 유의사항

3.1 페이지 전체 자동갱신

 Daum 첫 화면은 미디어, 유익한 정보, 블로그, 쇼핑 등의 다양한 정보를 담고 있고, 이 정보를 최신 상태로 유지하고 있습니다.
 새로운 정보를 업데이트하기 위해 매 10분마다 자동으로 페이지를 새로고침 하고 있습니다. 실시간으로 변하는 새로운 정보를 반영하기 위한 것이니 이용하실 때 참고 부탁드립니다.

3.2 페이지탭의 자동전환과 정지기능

 Daum 첫 화면에는 많은 콘텐츠를 담고 있어서 페이지 탭 구조가 많이 사용되었습니다. 페이지 탭은 서로 겹쳐져 있어서 다른 탭을 가리고 있으므로 한 번에 하나의 탭만 화면에 표시됩니다.
 Daum의 다양한 정보를 사용자에게 보여드리기 위해 주기적으로 페이지 탭이 전환되면서 새로운 정보를 표시하고 있는데 일부 장애인 사용자들은 자동전환이 불편할 수 있습니다. 이를 보완하기 위해 탭 영역에 마우스 포인터를 올려놓거나 키보드 초점이 진입하면 탭 자동전환 기능이 멈추도록 적용되어 있습니다.

4. 시각장애인 사용자 안내

최종업데이트. 17년 7월 4일

4.1 바로가기 링크 이용하기

 Daum 첫 화면에는 사용자가 주요 콘텐츠 영역으로 빠르게 이동할 수 있도록 바로가기 링크를 제공하고 있습니다. 키보드와 화면낭독 프로그램 사용자는 이 링크를 이용해서 페이지를 빠르게 탐색할 수 있습니다.

 화면낭독 프로그램으로 건너뛰기 링크를 이용할 때는 Ctrl + Home 키를 눌러 페이지의 첫 부분으로 이동한 후 아래 방향키를 눌러 이동하고자 하는 링크에서 Enter 키를 누르면 매우 편리합니다.
 다만 Daum 첫 화면 접속 후 Tab 키를 이용한 초점 이동과 화면낭독 프로그램의 위 / 아래 방향키를 이용한 초점 이동 순서가 다릅니다. 이것은 화면낭독 프로그램 뿐 아니라 키보드 사용자도 주요 기능을 편리하게 접근하도록 배려하기 위한 것임을 참고해주세요.

4.2 헤딩 구조 살펴보기

 Daum 첫 화면의 다양한 콘텐츠는 헤딩을 이용해서 구조화되었습니다. 헤딩 1의 'Daum'을 시작으로 가장 큰 분류인 각 섹션을 헤딩 2로 구분하고, 그 하위 카테고리 탭은 헤딩 3과 헤딩 4로 구분되어 있습니다.

예를 들면 아래와 같습니다.

  • Daum 헤딩1 그래픽링크
  • 검색 헤딩2
  • 주요서비스 헤딩2
  • 오늘의 정보 헤딩2
  • 로그인 정보 헤딩2
  • 미디어 헤딩2
  • 선택됨 뉴스 헤딩3 링크
  • 일반뉴스 헤딩4
  • 연예 헤딩3 링크

4.3 탭 메뉴의 사용

4.3.1 탭 메뉴의 기본 사용방법

 헤딩 2는 큰 섹션의 제목을 나타내고, 그 하위에는 여러 개의 페이지 탭을 가지는데 여기에는 헤딩 3을 사용하고 있습니다. 헤딩 3으로 구성된 탭은 하위에 여러 링크 목록을 콘텐츠로 가지는 제목입니다. 모든 헤딩 3 탭의 링크 목록이 항상 표시되는 것은 아니며, 현재 활성화된 탭의 링크 목록만 바로 접근할 수 있습니다.

미디어 섹션을 예로 들어보면 다음과 같습니다.

  • 미디어 헤딩2
  • 선택됨 뉴스 헤딩3 링크
  • 일반뉴스 헤딩4
  • 링크목록
  • 연예 헤딩3 링크
  • 스포츠 헤딩3 링크

 헤딩 3의 탭 제목 중 다른 탭의 링크 목록을 확인하려면 "OOO 헤딩 3 링크"에서 Enter 키를 누른 후 아래 방향키나 Tab 키를 눌러서 글 링크 목록을 탐색하면 됩니다. 위 목록을 예로 들면 "스포츠 헤딩 3 링크"에서 Enter 키를 누르면 다음과 같이 콘텐츠가 로딩됩니다. "OOO 헤딩 3 링크"의 앞에 "선택됨"은 해당 콘텐츠가 활성되었다는 정보입니다.

  • 미디어 헤딩2
  • 뉴스 헤딩3 링크
  • 연예 헤딩3 링크
  • 선택됨 스포츠 헤딩3 링크
  • 주요 경기 헤딩4
  • 링크 목록
  • 스포츠 일반뉴스 헤딩4
  • 링크 목록
  • (중략)
  • 영화 헤딩3 링크

 이와 같이 스포츠 탭이 활성화되면 스포츠 헤딩 3 링크와 영화 헤딩 3 링크 사이에 헤딩 4인 제목과 링크 목록들이 추가된 것을 확인할 수 있습니다.

4.3.2 미디어 뉴스탭의 페이지 전환

 미디어 헤딩 2의 뉴스 헤딩 3은 다른 카테고리와 달리 3개의 페이지로 구성되어 있습니다.

  • 미디어 헤딩2
  • 선택됨 뉴스 헤딩3 링크
  • 선택됨 뉴스1 탭
  • 뉴스목록
  • 연예 헤딩3 링크

 뉴스의 하위 3개의 탭 중 현재 활성화되어있는 탭은 뉴스 헤딩 3 링크 다음에 나오는 "선택됨 뉴스 1 탭"으로 제공되어 쉽게 확인할 수 있습니다. 페이지 탭을 전환할 때는 미디어 섹션의 끝 부분에 있는 탭 전환 기능을 사용해야 합니다. 탭 전환 기능에는 "현재 탭 2 / 전체 탭 9"와 같이 현재 섹션의 페이지 탭 구성을 안내하고 "이전 탭 버튼" "다음 탭 버튼"을 함께 제공하여 콘텐츠를 전환할 수 있습니다.
 뉴스의 페이지 탭 전환을 위해 뉴스 목록에서 센스리더의 입력 서식 이동 기능키 N을 누르면 "이전 탭 버튼" 한 번 더 누르면 "다음 탭"버튼으로 접근됩니다. 이 곳에서 Enter 키를 누르면 현재 활성화되어있는 탭의 다음 탭이 활성화됩니다.
 탭 전환 후 뉴스 목록에 빠르게 접근하려면, 먼저 헤딩 단위 이동키 Shift + 2를 사용하여 미디어 섹션의 처음으로 이동한 후 아래 방향키나 Tab키를 눌러서 뉴스 헤딩 3 하위의 뉴스 2 탭의 목록을 확인할 수 있습니다.

4.4 탭 메뉴의 상세페이지 이동 기능

 헤딩 3 또는 헤딩 4로 구성된 링크는 기본적으로 페이지 탭 구성을 가지고 있어, 이미 설명드린 바와 같이 Enter 키를 눌러 탭 콘텐츠를 활성화한 후 하위 목록을 탐색할 수 있습니다.

 탭을 활성화시키는 헤딩 3 링크에는 한 가지 기능이 더 있습니다. 활성화된 탭의 제목 링크에서 Enter 키를 누르게 되면 해당 서비스의 상세 페이지로 이동하게 됩니다.

 예를 들어 미디어 섹션의 연예 탭 콘텐츠가 활성화되어 "선택됨 연애 헤딩 3 링크"가 되었을 때, 이 링크에서 Enter 키를 누르면 다음뉴스 서비스의 연예기사 목록 페이지로 이동하게 됩니다. Daum 첫 화면의 기사 목록 외에 더 많은 기사를 확인하고 싶을 때 이 기능을 사용할 수 있습니다.

4.5 콘텐츠 구조의 이해 ‐ 최신 기술의 적용

 화면낭독 프로그램 사용자가 웹을 탐색할 때 겪는 어려움 중 콘텐츠의 구조를 이해하고 탐색하기 어려운 점이 있습니다. 이를 보완하기 위해 Daum의 많은 서비스에서 WAI-ARIA 및 HTML 5 Section Content Model을 활용하여 화면낭독 프로그램 사용자가 콘텐츠의 구조를 이해하기 쉽도록 구성하였습니다.

 Daum 첫 화면에서 WAI-ARIA를 제공한 부분 중 Landmark 역할을 사용하여 영역의 의미를 명확히 하여 구조를 이해하기 쉽게 했고, aria-selected로 선택된 항목을 구분하였으며, aria-expanded를 사용하여 하위 콘텐츠의 펼침 / 접힘 상태를 안내하고 있습니다.
 화면낭독 프로그램 사용자가 Landmark 영역으로 빠르게 이동하기 위한 기능키는 다음과 같습니다.

센스리더 5.9
J
NVDA (2017.1)
D
JAWS for Windows 15
R

4.6 중복되는 콘텐츠의 배제

 글로 이동하는 링크 목록에서 동일한 내용의 이미지 링크와 텍스트 링크가 중복으로 나타나는 경우가 많이 있었습니다. 이 경우 불필요한 키조작과 중복 정보 제공으로 인해 화면낭독 프로그램 사용자의 사용성이 떨어지는 문제가 있기 때문에 이런 부분을 방지하기 위한 작업을 진행했습니다.
 중복되는 이미지의 대체 텍스트 처리 및 WAI-ARIA 속성 활용 등을 통해 사용성을 높이기 위해 노력했습니다.

4.7 Windows 고대비 테마 지원

 Windows 시스템의 시각 효과로 제공중인 고대비 테마를 사용하는 경우, Internet Explorer 웹 브라우저에서 일부 이미지 콘텐츠가 화면에 표시되지 않아 일부 사용자들은 정보를 인식할 수 없는 이슈가 발생합니다. Daum 첫 화면의 이미지 콘텐츠에 대체 정보를 제공하여 고대비 테마를 사용하더라도 모든 사용자가 콘텐츠를 인식할 수 있도록 노력하고 있습니다.

5. 문의하기

 Daum에서는 웹 접근성 향상을 위해 여러분의 제안이나 의견을 환영합니다.
언제든 Daum내 서비스에 관한 의견을 보내주시기 바랍니다.
고객센터 바로가기