이해의 용이성 (2)
- 이해의 용이성에 속한 검사항목 중 콘텐츠 선형화를 이해하고 콘텐츠를 제공할 수 있습니다.
- 표의 구성 항목을 이해하고 콘텐츠를 제공할 수 있습니다.
- 레이블 제공 항목을 이해하고 콘텐츠를 제공할 수 있습니다.
- 오류 정정 항목을 이해하고 콘텐츠를 제공할 수 있습니다.
콘텐츠 선형화
가. 콘텐츠 선형구조의 이해
(1) 콘텐츠 선형구조의 개념
웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어
나. 콘텐츠 선형구조의 필요성
(1) 콘텐츠 선형구조의 개념
- 논리적인 순서로 CSS 제거
- CSS를 제거하기 전의 초점 이동과 논리적 순서의 일치
다. 콘텐츠 선형구조의 검사항목 해설
라. 콘텐츠 선형구조 제공방법
(1) 제공방법
기준 : 콘텐츠 순서가 논리적으로 선형화되어 제공시 인정
(2) 오류유형
- (가) 계층구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용하여 표현하지 않은 경우
- (나) '제목-내용' 으로 구성된 콘텐츠 목록의 배치가 분리되어 내용을 직관적 이해할 수 없는 경우
(3) 주의사항
1. 탭 메뉴에서 탭1→탭2→탭3으로 이동하여 모든 탭 내용을 확인할 수 있는 경우에도 보다 논리적으로 구성
모든 탭을 확인하는 방법
- 키보드로 접근할 때
- 마우스를 탭 메뉴에 올렸을 때
2. 2단계의 깊이를 가진 메뉴에서 1차 메뉴와 2차 메뉴, 탭 메뉴와 탭 콘텐츠는 서로 다른 계층으로 표현되어야 함
ex) ul > li > ul > li 또는 ol > li > ol > li 구조
3. 탭 메뉴와 탭 콘텐츠의 계층 구조는 경우에 따라 마크업 중첩이 아닌 '제목-내용'으로 표현이 가능함
- hx-ul, hx-div, hx-p, dt-dd 형식으로 마크업 했다면 계층구조로 인정함
- 제목 영역 : <h1~6>, 정의형 목록의 <dt>
- 내용 영역
- <ul>, ><div>, ><p>
- 정의형 목록에서의 ><dd>로 구성한 경우
4. 로그인, 회원가입 등의 방법 안내는 로그인, 회원가입 이전에 정보를 제공할 것
메시지를 먼저 읽게 하기 위해 마크업 순서 상 로그인 폼 보다 먼저 제공하더라도 웹 화면에서는 CSS를 활용하여 로그인 폼 아래 위치시켜야 함
5. 선형화 된 페이지에서 서브메뉴가 우측에 위치하는 경우 혼란이 없는 경우는 인정
- 원칙 : 좌 → 우
- CSS를 활용하여 서브메뉴와 같은 위치를 변경할 수 있도록 인정
표의 구성
가. 표의 구성의 이해
(1) 표의 구성의 개념
데이터 간의 상관관계를 요약하여 제공하는 정보
나. 표의 구성의 필요성
(1) 표의 구성의 개념
검사항목 20(표의 구성) : 제목셀과 내용셀을 짝지어 읽게 하거나 표에 대한 설명 정보를 미리 확인할 수 있도록 함
다. 표의 구성의 검사항목 해설
데이터 테이블
- 본래 데이터의 상관관계
- 표의 형식을 제거하고 남아있는 데이터를 나열했을 때 이해를 할 수 없음
레이아웃용 테이블
- 디자인적인 배치를 위해 사용
- 표의 형식을 제거하고 남아있는 데이터를 나열했을 때 이해를 할 수 있음
라. 표의 구성 제공방법
(1) 제공방법
기준 : 표를 이해할 수 있도록 정보를 제공한 경우
(2) 오류 유형
(가) <caption> 요소, summary 속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우
<caption> 요소, summary 속성을 제공하지 않은 경우
<caption> 요소, summary 속성의 용도가 부적절한 경우
<caption> 요소, summary 속성의 설명이 부적절한 경우
(나) 데이터 테이블에 제목 셀과 내용 셀을 <th> 와 <td> 요소로 구분하지 않은 경우
(다) 복잡한 표 제공시, id, headers 또는 scope로 제공하지 않은 경우
(3) 주의사항
1. 원칙적으로 >caption>요소와 summary 속성을 모두 사용해야 하며, 이 중 하나이상 적절히 제공한 경우 준수한 것으로 인정
>caption> 요소는 표의 제목을, summary 속성에는 표의 요약, 구조나 탐색 방법을 기술해 주어야 함
- summary와 caption을 같은 용도로 사용하지 않아야 함
- 복잡한 표일 경우, 해당 표를 어떻게 탐색하면 편리한지 등을 담아야 함
- 행열 등의 정보는 오히려 중복된 정보를 제공하게 되니 주의해야 함
데이터 테이블은 자료들 간의 논리적인 관계를 나타내기 위한 경우로, 표의 형식을 제거하고 선형화 했을 때 이해할 수 없음
레이아웃용 테이블은 화면 배치를 위해 작성된 경우로, 표의 형식을 제거하고 선형화했을 때 이해 가능한 경우
레이아웃용 테이블에는 <th>, <caption> 요소, summary 속성을 사용하지 않아야 함
레이블 제공
가. 레이블 제공의 이해
(1) 레이블의 개념
입력서식이나 편집창과 같은 폼의 요소에 대한 목적이나 용도 ( = 꼬리표, 라벨)
나. 레이블 제공의 필요성
(1) 레이블 제공의 목적
검사항목 21(레이블 제공) : 운동장애가 있는 분들은 입력 폼으로 바로 진입할 수 있도록 하며, 화면낭독기 사용자들에게는 입력서식의 이해를 용이하도록 함
다. 레이블 제공의 검사항목 해설
라. 레이블 제공의 제공방법
(1) 제공방법
기준 : 입력 서식에 대응하는 레이블을 제공한 경우
(2) 오류 유형
(가) <input>, <textarea>, <select> 요소에 1:1 대응하는 <label>요소 또는 title 속성을 제공하지 않은 경우
(나) <input>의 id와 <label>의 for가 다르거나, 페이지 안에 같은 id가 있는 경우
<input>의 id와 페이지 안에 같은 id가 있는 경우
<input>의 id와 <label>의 for가 다른 경우
(다) <select> 요소의 첫 번째 <option>이 레이블 역할을 대신하는 경우
(2) 주의사항
1. 레이블로 연결할 텍스트가 있는 경우 title 속성보다 <label>요소를 제공하는 것을 권장함
- 운동장애가 있는 사용자에게 사용성을 높여 줌 → title을 제공하게 되면 폼요소의 선택범위가 제한적이므로 접근성이 떨어짐
2. id, for 속성을 사용하지 않고<label>요소로 레이블 텍스트와 서식 컨트롤을 한번에 묶는 암묵적인 방법을 사용한 경우도 인정하지만 권장하지 않음
- 암묵적 방법 : <label><input type="checkbox">암묵적</label>
- 명시적 방법 : <label for="see">명시적</label><input type="checkbox" id="see">
오류 정정
가. 오류 정정의 이해
(1)오류 정정의 개념
오류들에 대하여 정정할 수 있도록 내용을 알려주고,
오류의 위치에서 수정할 수 있도록 하는 것
나. 오류 정정의 필요성
(1) 오류 정정의 목적
검사항목 22(오류 정정) → 문제 원인을 파악하기 위함
다. 레이블 제공의 검사항목 해설
"오류 입력 항목에 정정 방법 제공,
오류 항목 초점이 자동으로 이동"
라. 오류 정정의 제공방법
(1) 제공방법
기준 : 입력 오류를 정정할 수 있는 방법을 제공한 경우
(2) 오류 유형
(가) 입력 서식을 잘못 작성한 경우 해당 서식 필드로 초점을 이동할 수 있는 수단을 제공하지 않거나 해당 서식의 전송버튼을 눌렀을 때, 입력 내용이 모두 사라지는 경우
오류 정정할 수 있는 방법을 제공하지 않은 경우
서식의 전송버튼을 눌렀을 때, 입력 내용이 모두 사라지는 경우
(나) 오류 발생 시, 정정할 수 있는 수단을 제공하지 않는 경우
(다) 입력 정정방식 또는 내용을 잘못 제공한 경우
입력 정정방식을 잘못 제공한 경우
정정방식의 내용을 잘못 제공한 경우
(라) 입력 정정방식 또는 내용을 잘못 제공한 경우
(3) 주의사항
오류가 있는 곳에만 오류 표시를 하지 않고, 오류의 내용을 먼저 텍스트로 설명해주거나, 프로그램을 통해 오류가 난 위치에 도달하도록 하여 오류의 내용을 설명해 주어야 함 → 경고창
학습 정리
콘텐츠 선형구조
- 제목과 내용이 연속으로 있는 구조인 경우, 제목에 해당하는 내용임을 인식할 수 있도록 순서대로 구성
- 구조 : 제목 + 내용
- 반드시 제목과 내용 순이 아니라, 직관적으로 내용을 이해할 수 있는 형태로 구성되어 콘텐츠를 선형화하였을 때 이해가 용이하도록 제공
표의 구성
- 데이터 테이블과 레이아웃용 테이블
- 데이터 테이블 : 제목, 요약과 함께 제목 셀, 내용 셀을 구분
- 레이아웃용 테이블 : 표의 제목, 요약 및 제목 셀과 내용 셀을 구분하지 않아 데이터가 들어있는 표가 아님을 알 수 있도록 제공
- 표의 형식을 제거하고 내용을 선형화 시켜 내용을 이해하는데 문제가 있으면 데이터 테이블, 없으면 레이아웃용 테이블
레이블 제공
- 입력 서식에는 반드시 레이블을 제공하여 입력 창에 대한 설명을 제공
- 레이블과 입력서식이 1:1로 대응하는 경우 : label for 값과 input의 id 값을 연결
- 레이블로 연결할 입력서식이 여러 개인 경우 : title 속성 값으로 입력서식 요소에 대한 용도나 목적을 제공
오류 정정
- 오류를 정정할 수 있도록 오류 내용을 알려주고, 이를 정정할 수 있도록 오류 위치로 이동
HyunZzang의 프로그래밍 공간 / 함께 공부해요!!
도움이 되셨다면 "좋아요❤️" 또는 "구독👍🏻" 부탁드립니다 :)
