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