현재 페이지 위치

Home> 나눔> 웹접근성 가이드> PC/모바일 웹 접근성 체크리스트

PC/모바일 웹 접근성 체크리스트

체크리스트 보기

2.4.1 콘텐츠가 논리적인 순서로 되어 있는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음.
  • 스크린리더나 점자정보단말기, VoiceOver, TalkBack은 모든 콘텐츠를 위에서 아래, 좌측에서 우측 순서대로 읽기 때문에 정보의 구조가 이 순서에 맞지 않으면 정보를 이해하는데 오래걸리고 올바르게 이해할 수 없음.

오류 유형

두 단계 이상의 메뉴를 선형화했을 때, 계층 관계를 알 수 없는 경우

오류 예시
콘텐츠를 선형화했을 때 상위메뉴와 하위메뉴가 동일한 레벨로 존재하여 상위메뉴와 하위메뉴의 구분이 어려운 경우
참고 이미지

해결 방법
하위 메뉴는 상위 메뉴 바로 다음에 와야 하며, 계층관계가 명확하도록 마크업 되어야 함.
<ul>
  <li><a href="#">스팸 차단 정책</a>
    <ul>
      <li><a href="#">스팸 메일이란?</a></li>
      <li><a href="#">스팸메일 차단 원칙</a></li>
      ...
    </ul>
  </li>
  <li><a href="#">대량메일 발송 가이드</a></li>
</ul>

숨김 텍스트가 논리적인 순서에 맞지 않게 제공되었을 경우

오류 예시
메일 검색 편집창의 <label>이 검색 버튼 다음에 숨김 텍스트로 제공됨
참고 이미지

해결 방법
폼 콘트롤 요소와 연계된 <label>은 폼 콘트롤 요소에 인접(바로 옆에)해야 함

콘텐츠를 선형화 했을 때 무엇에 대한 정보인지 파악이 어려운 경우

오류 예시
공지사항 목록을 선형화했을 때 어떤 것이 작성일인지 조회수인지 번호인지 파악이 어려움
참고 이미지
해결 방법
게시판 형태의 UI는 테이블로 마크업하고 <th> scope를 제공하는 것이 가장 바람직함. 테이블 형태로 마크업하기 어려운 경우는 콘텐츠를 선형화했을때 '11.12.02', '4385' 등의 값이 각각 '작성일', '조회수'임을 바로 알 수 있도록 숨김텍스트 등을 추가로 제공해야 함.

탭 형태의 콘텐츠에서 각 탭에 해당하는 콘텐츠가 무엇인지 알 수 없는 경우

오류 예시
뉴스캐스트 영역을 선형화했을 때, 기사목록이 어떤 카테고리의 기사목록인지 알 수 없음
참고 이미지
해결 방법
- 콘텐츠를 선형화했을 때 기사목록의 카테고리를 알 수 있도록 마크업 또는 UI를 수정해야 함.
- 현재 순서를 유지한 상태에서, 마크업 순서와 상관없이 콘텐츠 이해가 가능하도록 하려면, 기사 목록 앞에 선택된 카테고리 또는 언론사 명의 heading이 제공되어야 함.
('사회' 카테고리를 선택하였으면, 기사 목록 앞에 '사회'라는 heading을, '한국일보'라는 언론사를 선택하였으면 '한국일보'라는 heading을 제공해야 함)
alt

사회 기사 꼭지 목록

,

한국경제 기사 꼭지 목록

"

모바일 환경에서 두 단계 이상의 메뉴를 선형화 했을 때, 계층 관계를 알 수 없고, 탭 형태의 콘텐츠에서 각 탭에 해당하는 콘텐츠가 무엇인지 알 수 없는 경우

오류 예시
모바일 환경에서 콘텐츠를 선형화 했을 때, 상위메뉴와 하위메뉴가 동일한 레벨로 존재하여 상위메뉴와 하위메뉴의 구분이 어려운 경우,
해당 콘텐츠에 대해 선택 된 탭, 메뉴를 알 수 없는 경우
참고 이미지
해결 방법
하위 메뉴나 콘텐츠의 시작 지점에 상위 메뉴에 대한 heading이 제공되거나,
상위 메뉴 바로 다음에 하위 메뉴나 콘텐츠가 오도록 하여 명확한 계층관계가 되도록 마크업 되어야 함

모바일 환경에서 숨김 텍스트가 논리적인 순서에 맞지 않게 제공되었을 경우

오류 예시
스타일이 제거 된 핫토픽 키워드 영역 콘텐츠를 선형화했을 때 6~10위의 콘텐츠가 중복 제공되어 비 논리적으로 구성되었으며, 사용자가 이를 오류로 인지할 수도 있음.
참고 이미지
해결 방법
스타일이 제거 된 선형화 콘텐츠에서 비 논리적으로 구성되는 콘텐츠가 없도록 해야 함

바른 예시

두 단계 이상의 메뉴를 선형화 시 계층 관계가 뚜렷함.

참고 이미지

아이디/비밀번호 입력창에서 콘텐츠가 논리적인 순서 (아이디 -> 비밀번호 -> 로그인 상태 유지 -> 로그인 버튼)로 배치되어 있음.

참고 이미지

주의 사항

-

평가 방법

웹 콘텐츠를 선형화하여 확인

평가 도구
Web Developer
평가 방법
CSS(CSS 오류없음) > Disable Styles(스타일 사용안함) > All Styles(모든 스타일) 메뉴를 선택하여 선형화된 웹 페이지 확인
참고 이미지

모바일 환경에서 웹 콘텐츠의 선형화 확인

평가 도구
User Agent Switcher(파이어폭스 부가기능), N-WAX
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법