웹접근성8

콘텐츠 선형구조

개념

웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어

• CSS 제거 시, 콘텐츠가 상식적인 순서로 제공되고 있는가에 대한 개념

가성 커서 방식

• 좌에서 우로, 위에서 아래로 향하는것이 좋다.
• 논리적인 순서로 css를 제거해야 하며, css를 제거하기 전의 초점 이동과 논리적 순서가 일치해야 한다.

주의사항

탭 메뉴에서 탭1 > 탭2 > 탭3으로 이동하여 모든 탭 내용을 확인할 수 있는 경우에도 보다 논리적으로 구성해야한다.

• 모든 탭을 확인하는 방법
  • 키보드로 접근할 떄
  • 마우스를 탭 메뉴에 올렸을 떄

2단계 깊이를 가진 메뉴에서 1차 메뉴와 2차 메뉴, 탭 메뉴와 탭 콘텐츠는 서로 다른 계층으로 표현되어야 한다.

• ex)ul>li>ul>li or ol>li>ol>li 구조

탭 메뉴와 탭 콘텐츠의 계층 구조는 경우에 따라 마크업 중첩이 아닌 '제목-내용'으로 표현이 가능하다.

로그인, 회원가입 등의 방법 안내는 로그인, 회원가입 이전에 정보를 제공할 것

• 메시지를 먼저 읽게 하기 위해 마크업 순서 상 로그인 폼보다 먼저 제공하더라도 웹 화면에서는 CSS를 활용하여 로그인 폼 아래 위치시켜야 한다.

표의 구성

데이터 간의 상관관계를 요약하여 제공하는 정보

• 제목과 요약을 제공한다.
• 제목셀과 내용셀을 짝지어 읽게 하거나 표에 대한 설명 정보를 미리 확인할 수 있도록 한다.

데이터 테이블

• 본래 데이터의 상관관계
• 표의 형식을 제거하고 남아있는 데이터를 나열했을 때 이해를 할 수 없음
• 제목셀과 내용셀로 구분하며, 표의 제목과 요약을 제공한다.

레이아웃용 테이블

• 디자인적인 배치를 위해 사용
• 표의 형식을 제거하고 남아있는 데이터를 나열했을 때 이해를 할 수 있음
• 제목셀,요약 등을 제공하지 않음

주의사항

원칙적으로 caption 요소와 summary 속성을 모두 사용해야 하며, 이중 하나 이상 적절히 제공한 경우 준수한 것으로 인정

caption 요소는 표의 제목을, summary 속성에는 표의 요약, 구조나 탐색 방법을 기술해 주어야 함

• summary와 caption을 같은 용도로 사용하지 않아야 함
• 복잡한 표일경우, 해당 표를 어떻게 탐색하면 편리한지 등을 담아야 함
• 행열 등의 정보는 오히려 중복된 정보를 제공하게 되니 주의해야 함

데이터 테이블은 자료들 간의 논리적인 관계를 나타내기 위한 경우로, 표의 형식을 제거하고 선형화 했을 때 이해할 수 없음

레이아웃용 테이블은 화면 배치를 위해 작성된 경우로, 표의 형식을 제거하고 선형화했을 때 이해 가능한 경우

레이아웃용 테이블에는 th, caption요소, summary 속성을 사용하지 않아야 함

레이블 제공

입력서식이나 편집창과 같은 폼의 요소에 대한 목적이나 용도(=꼬리표,라벨)

목적
• 운동장애가 있는 분들은 입력 폼으로 진입할 수 있도록 하며, 화면낭독기 사용자들에게는 입력서식의 이해를 용이하도록 함

주의사항

레이블로 연결할 텍스트가 있는 경우 title속성보다 label요소를 제공하는 것을 권장한다.

• 운동장애가 있는 사용자에게 사용성을 높여 줌
  • title을 제공하게 되면 폼요소의 선택범위가 제한적이므로 접근성이 떨어짐

id, for 속성을 사용하지 않고 label 요소로 레이블 텍스트와 서식 컨트롤을 한번에 묶는 암묵적인 방법을 사용한 경우도 인정하지만 권장하지 않음

오류정정

오류들에 대하여 정정할 수 있도록 오류의 내용을 알려주고 오류의 위치에서 수정할 수 있도록 하는것

• 문제 원인을 파악하기 위함

주의사항

오류가 있는 곳에만 오류 표시를 하지않고, 오류의 내용을 먼저 텍스트로 설명해주거나, 프로그램을 통해 오류ㅜ가 난 위치에 도달하도록 하여 오류의 내용을 설명해 주어야 함

• 경고창 등

핵심 요약

콘텐츠 선형구조

• 제목과 내용이 연속되어 있는 구조인 경우, 제목에 해당하는 내용임을 인식할 수 있도록 순서대로 구성, 구조: 제목+내용
• 반드시 제목과 내용 순이 아니라, 직관적으로 내용을 이해할 수 있는 형태로 구성되어 콘텐츠를 선형화했을때 이해가 용이하도록 제공

표의 구성

• 데이터 테이블과 레이아웃 테이블
  • 데이터 테이블: 제목, 요약과 함꼐 제목 셀, 내용 셀 구분
  • 레이아웃 테이블: 표의 제목, 요약 및 제목 셀과 내용 셍을 구분하지 않아 데이터가 들어있는 표가 아님을 알 수 있도록 제공
• 표의 형식을 제거하고 내용을 선형화 시켜 내용을 이해하는데 문제가 있으면 데이터 테이블, 없으면 레이아웃 테이블

레이블 제공

• 입력서식에는 반드시 레이블을 제공하여 입력 창에 대한 설명을 제공
  • 레이블과 입력서식으 1:1로 대응하는 경우: label for 값과 input의 id 값을 연결
  • 레이블로 연결할 입력서식이 여러 개인 경우: title 속성 값으로 입력서식 요소에 대한 용도나 목적을 제공

오류정정

• 오류를 정정할 수 있도록 오류 내용을 알려주고, 이를 정정할 수 있도록 오류위치로 이동