IT이야기/Web Accessibility (웹접근성)

웹접근성 가이드 : 이해의 용이성

FelixShin 2017. 11. 28. 07:30
반응형


0. 시작하는 글

- 외국어 사이트는 언어를 바꿀 때 마다 언어를 지정해 줘야 함(웹접근성 오류)


1. 기본언어 표시

검사항목 17. 주요 사용하는 언어를 명시해야 한다는 의미

1) 기본개념

- 기본언어 명시하면 화면낭독기, 음성지원 프로그램이 정확히 작동

- 중간에 lang속성 통해 언어를 바꿔주면 더 좋은 사이트가 됨

  -> html lang속성 사용하여 제공하면 준수한 것으로 인정


2) 오류유형

- <html> lang속성을 명시하지 않거나 잘못 명시한 경우

  -> <html lang="ko">

 # 인코딩 셋은 EUC-KR이나 UTF-8과 같은 화면에서 보여주기 위한 문자세트인 반면

   기본언어는 들려주기 위한 언어 명시임 


 -> <html lang="ko" xml:lang="ko"> 처럼 <html> 태그 내에 둘다 쓰는 경우는 호환성을 높여주기 위함

- lang속성 값에는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 함

- 페이지 중간에 언어가 바뀔 때 변경된 언어를 lang속성으로 명시해주는 것을 권장

ex)

<p>중국어로는 <span lang="zh"> 你好 </span> </p>

<p>독일어로는 <span lang="de"> ~~~ </span> </p>


# 기본언어 표시에 주의하자

- 스크린리더에서 기본언어가 없다면 혼란을 일으킴 

ex) 언어표시가 명확해야 함. 기본언어가 한국어면 ! 를 느낌표라고 읽지만, 영어라면 Question mark라고 읽음


3) 평가 포인트

- 주로 사용하는 언어를 명시

- lang속성 값은 ISO 639-1에서 지정한 언어코드로는 한국어는 ko, 영어는 en, 중국어는 zh 등으로 표현됨


2. 사용자 요구에 따른 실행

검사항목 18. 사용자가 의도하지 않은 기능은 시도되지 않아야 한다

1) 기본개념

- 사용자가 의도 되지 않은 기능은 실행되지 않아야 함

- 필요성 : 사용자가 의도하지 않은 새창이나 초점 변화를 일으키지 않게 하고, 발생시 사전에 사용자에게 알려줌


2) 주의사항 분석

 : 새창을 열때 알리는 방법 <a target="_blank">임

 :  onfocus="this.blur()"를 사용하면 키보드 접근불가, 초점의 시각적 구분불가, 의도치 않음 초점 변화

- 사용자가 의도하지 않은 기능이 자동 실행되지 않도록 제공한 경우 준수한 것으로 인정


3) 평가포인트

- 사용자가 의도하지 않는 기능은 실행되지 않아야 함

- 변화 발생시 사전 공지 또는 사용자가 선택할 수 있도록 함

- 검사내용 : 초점에 따른 변화나 입력에 따른 변화 확인 / 새창 및 팝업이 경고 없이 열리는지 확인

- window.open()을 통해 새창 띄울시 미리 알려줘야 함, title, alt 등에 새창이라고 명시하면 준수된걸로 인정


3. 콘텐츠 선형화

검사항목 19. 콘텐츠는 논리적인 순서로 제공되어야 한다

1) 기본개념

- 컨텐츠 순서가 논리적으로 선형화되어 제공된 경우 준수 : 좌->우, 위->아래 순서

- CSS제거시 콘텐츠가 상식적인 순서로 제공되는가 확인

- 검사항목9 논리적 초점이동과 연관있음

- 대메뉴1(소메뉴들), 대메뉴2(소메뉴들) : 대메뉴 - 소메뉴 다 왔다갔다 하는식으로 가이드되었지만, 대메뉴가면서 하위메뉴가 있다고 표시하는 형식으로 되어야 함 

-CSS를 활용하여 서브메뉴 변경

- 반드시 제목과 내용 순이 아니라, 직관적으로 내용을 이해할 수 있는 형태로 구성되어 콘텐츠를 선형화하였을 때 이해가 용이하도록 제공함


2) 오류유형

- 계층구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용해 표현하지 않은 경우

- 제목 - 내용으로 구성된 콘텐츠 목록 배치가 분리되어 내용을 직관적으로 이해 할 수 없는 경우


3) 평가포인트

- 검사 내용 

 : CSS를 제거해서 좌->우, 상->하 등 논리적 순서를 확인

 : 2단 이상일 경우: 상위, 하위 관계 확인 ( 상위끼리 이동 후 하위메뉴가 있으면 확장할 수 있다는 식으로 알려주고, 선택시 하위메뉴로 가야 함)

 : 제목과 내용 연속된 경우 구조의 콘텐츠가 제목과 내용이 연관관계를 이해할 수 있는지 확인


# CSS제거 후 확인화면

# 탭 게시판도 CSS제거 후 사용 가능 - 제목 - 내용 - 제목 - 내용 순으로 가야 함...



4. 표의 구성

검사항목 20. 표는 이해하기 쉽게 구성되어야 한다

1) 기본개념

- 제목셀과 내용셀을 짝지어 읽히게 해야 함

- 표는 데이터 테이블과 레이아웃용 테이블로 구분

- 데이터테이블 : 본래데이터의 상관관계를 고려해야함 -> 제목셀과 내용셀로 구분하며, 표의 제목과 요약을 제공

- 레이아웃용 테이블 : 디자인 배치를 위해 사용 -> 제목셀, 제목, 요약 등을 제공하지 않음


2) 오류 유형

: <caption> , <summary> 

# 국내 표 많이 사용 -> 접근성에 좋지 않으니 -> 표를 잘 기획해야 함

- 표는 표로서 가치만 있을 때 사용, 표안에 표 상비 ,제목을 셀 제목화하는데 주의 하자


3) 평가포인트

- 표는 이해하기 쉽게 구성해야 함

- 제목 또는 요약정보를 <caption>요소와 summary 속성으로 제공하였는지 확인

- 복잡한 표는 headers속성으로 <td>에서 <th>의 id를 참조 또는 scope속성으로 <th>요소에 <td>요소의 범위를 지정하여 제공했는지 확인

- 배치용 테이블에 <caption>요소, summary 속성, <th>요소를 이용하지는 않았는지 확인


5. 레이블 제공

검사항목 21. 입력서식에 대응하는 레이블을 제공해야 한다

1) 기본내용

- 입력서식에는 반드시 레이블을 제공하여 입력창에 대한 설명을 제공

- 레이블과 입력서식이 1:1로 대응하는 경우

 : label의 for값과 input의 id 값을 연결

ex) <label for="userId">아이디</label><input type="text" id=userId"/>

cf) 모든 콘텐츠가 id와 for만으로 연결할 수 없는 경우도 있음


- 레이블로 연결할 입력서식이 여러개인 경우

 : title속성 값으로 입력서식 요소에 대한 용도나 목적을 제공


2) 오류 유형

a)input, textarea select 태그 요소에 1:1로 대응하는 label요소 또는 title속성을 제공하지 않은 경우

b) dropdown box에서 <select>요소의 첫번째 <option>이 레이블 역할을 대신하는 경우

<select> -> <select title="원하는 색 고르기"> option전 명시함


3) 주의 사항

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

 : id, for속성을 사용하여 label요소와 텍스트를 묶음

 -> 암묵적 방법 : <label><input type="checkbox">암묵적</label>

 -> 명시적 방법 : <label for="see">명시적</label><input type="checkbox" id="see">


4) 평가포인트

- 입력서식에 대응하는 레이블 제공한 경우 준수한 것으로 인정

- 대표적인 오류유형에는

: <input>, <textarea>, <select>요소에 1:1 대응하는 <label>요소 혹은 title속성이 제공되지 않는 경우

: <input>의 id와 <label>의 for가 다르거나 페이지 안에 같은 id가 있는 경우

: <select> 요소의 첫번째 <option>이 레이블 역할을 대신하는 경우

- 검사내용

 : 각 입력서식에 <label>요소나 title이용해 레이블 제공했는지 확인

 : <label>요소의 for="값" 과 <input> 등 입력서식의 id="값"이 적절히 짝지어졌는지 확인

- OpenWAX에서 21레이블 제공으로 확인 가능


6. 오류정정

검사항목 22. 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

1) 기본개념 : 오류를 정정할 수 있도록 내용을 알려주고, 이를 정정할 수 있도록 오류 위치로 이동


2) 오류 유형

 a) 입력시 오류가 있을 때 입력 내용이 모두 사라지면 않됨

b) 오류 발생시 정정할 수 있는 수단을 제공해야 함

c) 입력 정정방식 또는 내용을 맞게 제공해야 함 - 입력 정정방식시 팝업창을 띄우는게 나음(어떠한 요소를 바꾸는것보다)


3) 평가포인트

- 검사내용 

: 입력값 잘못 기재시, 오류내용과 수정방법을 제공하였는지 확인하고 다시 입력할 수 있도록 오류입력 서식 포커스로 이동하는지 확인

: 오류 내용 확인 후 기재하였던 입력 내용이 삭제되는지 확인 -> 기재된 입력내용이 삭제 안되야 함


Ref)

한국정보화진흥원 온라인 교육




웹/모바일 접근성 관련 궁금 한 것들은 물어봐 주세요 ^^

공감 혹은 댓글은 

글쓴이에게 큰 도움이 됩니다~