이해의 용이성2

이해의 용이성2

콘텐츠 선형구조

• 웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어로, 먼저 논리적인 순서에 맞게 개발해야 하고, 여기에 css를 적용한다.
• CSS
가 제거된 상태에서 콘텐츠가 상식적인 순서로 제공되었는지에 대한 개념.
• 콘텐츠 선형구조 초점의 이동순서 -가상 커서 방식 : 좌-->우, 우-->아래 순으로 논리적인 순서로 이동 되어야 한다.

제공 방법

• 계층 구조가 명백하게 필요한 콘텐츠에서는 ul과 li, ol과 li를 활용하여 콘텐츠를 마크업하여 제공한다.
• h1~h6 요소를 이용하여 제목을 제공하는 것이 명확한 방법이다.
• 로그인 회원가입 방법, 로그인 회원가입 이전에 정보를 제공할 것. - 메세지를 먼저 읽게 하기 위해 마크업 순서 상 로그인 폼보다 먼저 제공하더라도 웹 화면에서는 CSS를 활용하여 로그인 폼 아래 위치시켜야 한다.

표의 구성

• 데이터간의 상관관계를 요약하여 제공하는 정보로서 행과 열이 얽힌 표에 담긴 정보를 음성으로 듣고 이해할 수있도록 제목셀과 내용셀로 구분하여 서로 짝지어 읽을 수 있도록 한다.
• 제목과 요약을 제공하여 표의 내용을 쉽게 이해할 수 있도록 한다.

데이터 테이블

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

레이아웃용 테이블

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

제공 방법

• 표를 이해할 수 있도록 정보를 제공한 경우 준수한것으로 인정한다.
• 원칙적으로 caption요소, summary속성을 모두 사용해야 하며, 이중 하나이상 적절히 제공한 경우 준수한 것으로 인정한다.
• caption요소는 표의 제목을 summary속성에는 표의 요약, 구조나 탬색 방법을 기술해 주어야 한다.

주의사항

• 데이터 테이블에 제목 셀과 내용 셀을 th와td요소로 구분한다.
• 복잡한 표 제공시 id, headers또는 scope로 제공한다.
  1. summary와 caption을 같은 용도로 사용하지 않아야 한다.
  2. 복잡한 표일 경우, 해당 표를 어떻게 탐색하면 편리한지 등을 담아야 한다.
  3. 행열 등의 정보는 오리혀 준복된 정보를 제공하게 되니 주의해야 한다.
• 데이터 테이블은 자료들 간의 논리적인 관계를 나타내기 위한 경우로, 표의 형식을 제거하고 선형화 했을 때 이해할 수 없다.
• 레이아웃용 테이블은 화면 배치를 위해 작성된 경우로, 표의 형식을 제거하고 선형화했을 때 이해 가능한 경우이다.
• 레이아웃용 테이블에는 th, caption요소, summary속성을 사용하지 않아야 한다.

레이블 제공

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

운동장애가 있는 분들이 레이블을 클릭하면 입력 폼으로 바로 진입 할 수 있도록 지원해주며 화면 낭독기의 사용자들에게는 입력창에 접근하는 순간 어떤 용도의 입력창인지를 알수 있도록하여 입력 서식의 이해를 용이하도록 한다.

제공방법

• 레이블 제공 가장좋은 방법 label의 for와 폼 요소의 id를 연결해 주는 방법
• 모든 콘텐츠가 id와 for만으로 연결 할 수 없는 경우도 있다.
• 전화번호 입력서식- title속성을 활용한다.
• input, textarea,select요소에 1:1대응하는 label요소 또는 title속성을 제공한다.
• inout의 id와 label의 for가 같아야 한다.

주의사항

• 레이블로 연결할 텍스트가 있는 경우 title속성보다 lavel요소를 제공하는 것을 권장한다.
• 운동장애가 있는 사용자에게 사용성을 높여준다.(하지만 title을 제공하게 되면 폼요소의 선택범위가 제한적이므로 접근성이 떨어진다.)
• id,for속성을 사용하지 않고 label요소로 레이블 텍스트와 서식 컨트롤을 한번에 묶는 암묵적인 방법을 사용한 경우도 인정하지만 권장하지 않는다.
  1. 암묵적 방법
     <label><nput type="checkbox">암묵적</label></li>
  2. 명시적 방법 <label for="see">명시적</label><input type="cgecjbix" id="see">