알씨타운
[웹 접근성 가이드] 3. 이해의 용이성 : 가독성과 예측가능성 본문
안녕하세요! 알씨타운입니다.
오늘은 웹 접근성 지침 중 3번째 원칙,
이해의 용이성에 대해 설명하겠습니다!
이해의 용이성은 콘텐츠는 장애 유무에 상관없이
이해 될 수 있도록 만들어야 하는 것인데요.
[ 이해의 용이성 ]
3.1 가독성
3.2 예측 가능성
3.3 콘텐츠의 논리성
3.4 입력 도움
3.1 가독성
1. 기본 언어를 표시
스크린 리더(화면 낭독 프로그램)가 자동 언어 전환을 지원하는 경우,
웹 페이지에서 주로 사용되는 언어를 명시해야
스크린 리더에서 선언된 언어로 전환해 읽어줍니다.
즉, 마크업 할 때 주로 사용하는 언어를 명시하도록 해야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head>
<html lang="en">
이런식으로 상단 html에 lang 속성을 이용해서
"ISO639-1"에서 지정한 두 글자로 된
언어 코드를 입력합니다.
기본적으로 많이 쓰이는 언어 코드를 살펴보면
영어는 en
한국어는 ko
중국어는 zh
일본어는 ja
입니다!
그외 다른 나라의 언어코드를 더 알고 싶다면
아래 사이트에서 확인해 보실 수 있습니다.
ISO 639-2 Language Code List - Codes for the representation of names of languages (Library of Congress)
HOME - ISO 639-1 Registration Authority Home - ISO 639-3 Registration Authority Home ISO 639 Joint Advisory Committee Home - ISO 639-5 Registration Authority Home Codes for the Representation of Names of Languages Codes arranged alphabetically by alpha-3/ISO 639-2 Code Note: ISO 639-2 is t...
www.loc.gov
3.2 예측 가능성
1. 사용자 요구에 따른 실행
비장애인들은 웹 사이트에서 생성되는
팝업창, 새 창으로 열리는 페이지를 인식하는데 어려움이 덜하지만,
시각 장애인 또는 지체 장애들은
자신이 요구하지도 않았는데 갑작스럽게 새 창, 팝업창이 뜨게 되면
당황스러울 수 있습니다.
그럼 어떻게 사용자의 요구에 맞게 페이지가 실행될 수 있게 만들 수 있을까요??
1) 페이지 새 창으로 열릴 때
스크린 리더 사용자가 새 창 열림을 인지할 수 있도록
반드시 tilte="새 창", target="_blank" 를 입력해주어 나타내야 합니다.
그리고 title, target 입력 후 더 나아가
스크린 리더기에서 새 창이라고 읽어 주게 끔 하기 위해선 IR기법을 활용하면 됩니다.
ex) class="blind" 사용!
<a href=“…” title=“새 창” target=“_blank”> 개인정보 처리방침 <span class=“blind”>새 창</span> </a>
간혹 새창을 띄울 때 window.open으로 여는 경우가 있는데
이 방법은 새 창이 뜬다는 것을 인지할 수 없기 때문에 되도록 사용을 피하는 것이 좋습니다!
2) 페이지 로드 시, 팝업창 생성 될 때
페이지 로드 시, 자동으로 팝업 창이 생성 되면
인지 능력이 부족한 사용자의 경우 페이지 사용에 있어 혼란을 야기 시킬 수 있습니다.
사실, 레이어 팝업은 웹 접근성에 위배되는 행위입니다.
최대한 접근성을 준수하기 위해선 메인 화면을 가리지 않고 상단에 띄우는 방법이 있습니다.
웹 접근성 준수 사례
만약 화면을 가린 채 띄워야 하는 팝업창이라면
마크업할 때 팝업관련 코드를 최상단에 위치 시키도록 합니다!!
* 팝업창을 띄울 때 참고하기!!
사이트의 쿠키 문제로 인해 "오늘 하루 그만 보기"버튼을 넣는 경우가 있는데,
이때 반드시 "닫기"버튼을 따로 하나 더 제작해 배치해야 접근성에 위배되지 않습니다!!!
2) select에 onchange 이벤트 적용했을 때
<select>에 onchange가 적용된 경우,
이 때 키보드로 접근하게 되면 바로 페이지가 select 목록 페이지로 이동 되기 때문에
콘텐츠에 키보드 접근이 불가능하므로
따로 버튼을 제공해 기능을 실행 시키는 것이 좋습니다.
오늘 포스팅 내용 어떠셨나요?
다음 포스팅은 오늘 정리한 내용에 이어서
웹접근성 지침, 이해의 용이성에 대해 더 알아보도록해요!
'RCTOWN 이야기 > 프로 기획자 이야기' 카테고리의 다른 글
| [웹 접근성 가이드] 3. 이해의 용이성 : 입력도움 (0) | 2021.11.26 |
|---|---|
| [웹 접근성 가이드] 3. 이해의 용이성 : 콘텐츠의 논리성 (0) | 2021.11.25 |
| [웹 접근성 가이드] 2. 운용의 용이성 : 쉬운 네비게이션 (0) | 2021.11.22 |
| [웹 접근성 가이드] 2. 운용의 용이성 : 충분한 시간 제공/ 광과민성 발작예방 (0) | 2021.11.20 |
| [웹 접근성 가이드] 2. 운용의 용이성 : 입력장치 접근성 (0) | 2021.11.18 |
