Accessibility 본문

3.3.1 콘텐츠의 선형화

콘텐츠는 논리적인 순서로 제공해야 한다.

필요성

화면낭독 프로그램과 같은 보조 기기는 전체 콘텐츠를 보통 소스 코드 순서대로 풀어서 접근하게 된다. 이 때 시각적으로 보였던 순서와 달리 논리적인 순서가 흐트러질 경우, 보조 기기 사용자들은 내용을 이해할 수 없게 된다. 또한 CSS 로딩이 되지 않았을 경우에도 서비스를 가독하는데 도움을 줄 수 있다.

대상

전맹

적용기술

콘텐츠 및 마크업이 논리적인 순서로 구성해야 한다.

성능 이슈로 "제목" 다음 "더보기" 가 오는 경우가 있다. 다만 "제목 > 내용 > 더보기" 로 권장한다.

주의사항"더보기"의 경우 명시적으로 어떠한 더보기 인지 제공해야 함

검사방법 및 QA 지표 산정방법

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
수동 검사방법

콘텐츠가 논리적인 구조를 가지고 있는지 체크

검사가 애매모호한 경우 키보드 초점이 논리적으로 이동되는 지 체크

예) 로그인 폼에서 id 텍스트 필드 다음 바로 로그인 버튼이 노출되면 오류수로 체크

오류수(건)

콘텐츠가 논리적인 구조를 가지고 있지 않은 콘텐츠 (영역으로 체크)

평가점수

100 - (수동 오류수 * 10)점

사례

오류사례

더보기 버튼이 브라우저 화면에 표시되는 컨텐츠 순서대로 마크업 됨

컨텐츠의 선형화 오류사례이미지
개선방법

더보기 버튼은 의미상 공지 내용이 다 나온 후에 나와야 함

우수사례

컨텐츠를 선형화하여 순서대로 나열하였을 경우에도 논리적인 순서로 이해 할 수 있다.

컨텐츠의 선형화 우수사례이미지