Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
565 lines (385 sloc) 19.6 KB

레진 웹 접근성 가이드라인

모두를 위한 설계. 레진 웹 접근성 가이드라인.

  1. 의미를 전달하고 있는 이미지에 대체 텍스트를 제공한다.
  2. 전경 콘텐츠와 배경은 4.5:1 이상의 명도 대비를 유지한다.
  3. 화면을 400%까지 확대할 수 있다.
  4. 키보드만으로 조작할 수 있다.
  5. 사용할 수 있는 충분한 시간을 제공한다.
  6. 발작을 유발하는 콘텐츠를 제공하지 않는다.
  7. 반복되는 콘텐츠 블록을 건너뛸 수 있다.
  8. 모든 문서의 제목은 고유하고 식별할 수 있다.
  9. 링크와 버튼 텍스트는 콘텐츠의 목적을 알 수 있다.
  10. 섹션에는 의미 있는 마크업과 헤딩이 있다.
  11. 문서의 휴먼 랭귀지 속성을 제공한다.
  12. 문맥 변경은 예측할 수 있다.
  13. 폼 콘트롤 요소에 설명을 제공한다.
  14. 실수를 예방하고 정정하는 것을 돕는다.
  15. HTML 문법을 준수한다.

보편적인 웹 서비스를 제공함으로써 "모두를 즐겁게 하라"는 우리의 모토를 실현하고자 합니다. 레진엔터테인먼트에서 제공하는 모든 웹 서비스는 '레진 웹 접근성 가이드라인'을 준수해야 합니다. 데스크톱, 태블릿, 모바일, 하이브리드 앱에 이르기까지 웹 기술을 통해 구현하는 모든 서비스가 이 가이드라인의 적용 대상입니다.

이 가이드라인은 WCAG 2.1이 근간이며 가이드라인에서 설명하지 않거나 애매한 주제는 WCAG 2.1의 수준 A 항목과 AA 항목의 지침 및 평가 방법을 따라야 합니다. 레진 웹 접근성 가이드라인은 레진 고유의 콘텐츠에 대응하는 WCAG 2.1 가이드라인에 대한 이해를 돕고 손쉽게 평가할 수 있도록 소개한 것으로써 고객에게 웹 서비스를 제공하기 전 준수해야 할 최소한의 요구사항입니다.

이 가이드라인은 웹 기술(HTML, CSS, JavaScript)에 대한 사전 지식을 요구합니다.


1. 의미를 전달하고 있는 이미지에 대체 텍스트를 제공한다. #

  • 대체 텍스트는 이미지의 시각적 의도와 동등한 내용을 전달한다.
  • 대체 텍스트는 중복으로 제공하지 않는다.
<!-- X -->
<img src="lezhin.png">
<img src="lezhin.png" alt>
<img src="lezhin.png" alt="">
<img src="lezhin.png" title="레진엔터테인먼트">
<img src="lezhin.png" alt="레진엔터테인먼트" title="레진엔터테인먼트">

<!-- O -->
<img src="lezhin.png" alt="레진엔터테인먼트">

<!-- X -->
<a href="/">
    <img src="lezhin.png" alt="레진엔터테인먼트"> 레진엔터테인먼트
</a>

<!-- O -->
<a href="/">
    <img src="lezhin.png" alt> 레진엔터테인먼트
</a>

<!-- X -->
<a href="/" style="background:url(lezhin.png) no-repeat"></a>

<!-- O -->
<a href="/" style="background:url(lezhin.png) no-repeat">레진엔터테인먼트</a>

기대 효과

  • 전맹 사용자에게 음성 해설을 제공할 수 있다.

관련 표준

평가 도구


2. 전경 콘텐츠와 배경은 4.5:1 이상의 명도 대비를 유지한다. #

  • 전경 콘텐츠는 정보를 전달하고 있는 '문자, 아이콘, 콘트롤(a, button, input, select, textarea)'의 선과 면을 의미한다.
  • 문자 크기가 bold 19px 이상 또는 normal 24px 이상인 경우 3:1 이상의 명도 대비를 유지한다.
  • 아이콘, 콘트롤 등 시각 정보가 3px 이상 두꺼운 경우 3:1 이상의 명도 대비를 유지한다.
<!-- X -->
<body style="background:#fff">
    <p style="color:#777">레진엔터테인먼트</p>
</body>

<!-- O -->
<body style="background:#fff">
    <p style="color:#767676">레진엔터테인먼트</p>
</body>

<!-- X -->
<body style="background:#fff">
    <input style="border:1px solid #777">
</body>

<!-- O -->
<body style="background:#fff">
    <input style="border:1px solid #767676">
</body>

기대 효과

  • 저시력 사용자가 내용을 빠르게 인지할 수 있다.

관련 표준

평가 도구


3. 화면을 400%까지 확대할 수 있다. #

  • 너비 1,280 픽셀 해상도 모니터에서 400%까지 확대할 수 있다. 모바일 단말에서는 테스트하지 않는다.
  • 화면을 400% 확대한 상태에서 내용과 기능에 손실이 없어야 하고, 2차원 스크롤이 발생하지 않아야 한다.
<!-- X -->
http://www.president.go.kr/

<!-- O -->
https://www.whitehouse.gov/

기대 효과

  • 저시력 사용자가 내용을 빠르게 인지할 수 있다.
  • 하나의 소스 만으로 모든 해상도의 출력 장치에 대응 가능하다.

관련 표준


4. 키보드만으로 조작할 수 있다. #

  • 구현된 키보드 접근 순서는 논리적으로 설명할 수 있어야 한다.
  • 초점을 받은 요소는 시각적 단서를 제공해야 한다.
<!-- X -->
a:hover{ color: #000; }

<!-- O -->
a:hover,
a:focus{ color: #000; }

<!-- X -->
$(document).on("mouseover", ".gnb a", function() { ... });

<!-- O -->
$(document).on("mouseover focus", ".gnb a", function() { ... });

기대 효과

  • 전맹 또는 상지 장애가 있는 사용자와 키보드를 선호하는 사용자의 탐색과 조작을 돕는다.

관련 표준


5. 사용할 수 있는 충분한 시간을 제공한다. #

  • 시간 제한이 있는 정보는 시간 제한을 끄거나, 또는 최소 20초 이상 10회까지 연장할 수 있다.
  • 자동으로 갱신되는 정보에는 '정지, 이전, 다음' 기능을 제공한다.
<!-- X -->
10초 후 다음 페이지로 넘어갑니다. [다음 페이지로 즉시 이동]

<!-- O -->
20초 후 다음 페이지로 넘어갑니다. [취소] [다음 페이지로 즉시 이동]
20초 후 다음 페이지로 넘어갑니다. [20초 연장] [다음 페이지로 즉시 이동]

<!-- X -->
콘텐츠가 자동으로 슬라이드 되고 있는 상황에서 정지하거나 이전, 다음 콘텐츠를 탐색할 수 없다.

<!-- O -->
콘텐츠가 자동으로 슬라이드 되고 있지만 정지, 이전, 다음 기능을 제공하고 있다.

기대 효과

  • 학습장애 또는 난독증세가 있는 사람이 내용을 이해할 수 있다.

관련 표준


6. 발작을 유발하는 콘텐츠를 제공하지 않는다. #

  • 1초에 3~50회 사이의 번쩍이는 콘텐츠는 광과민성 발작을 유발할 수 있다.
  • 광과민성 발작은 소아 또는 간질 경험이 있는 사람에게 더 위험하다.
포켓몬 발작 사고 영상 - https://www.youtube.com/watch?v=gwoQRKCEHgY // 소아 또는 간질 경험이 있는 사람에게 발작 위험.

기대 효과

  • 소아 또는 간질 경험이 있는 사람의 발작을 예방할 수 있다.

관련 표준


7. 반복되는 콘텐츠 블록을 건너뛸 수 있다. #

  • 일반적으로 글로벌 탐색 바와 로컬 탐색 바는 반복되는 콘텐츠 블록이다.
  • 반복되는 콘텐츠 블록이 있는 경우 페이지 시작 위치에 '본문으로 건너뛰기' 링크를 제공한다.
<!-- X -->
<body>
    <h1>레진엔터테인먼트</h1>
    <nav>...</nav>
    <main>...</main>

<!-- O -->
<body>
    <a href="#main">본문으로 건너뛰기</a>
    <h1>레진엔터테인먼트</h1>
    <nav>...</nav>
    <main id="main">...</main>

기대 효과

  • 전맹 또는 상지 장애가 있는 사용자와 키보드를 선호하는 사용자의 탐색과 조작을 돕는다.

관련 표준


8. 모든 문서의 제목은 고유하고 식별할 수 있다. #

  • 제목 콘텐츠를 문서마다 다르게 설명함으로써 현재 문서의 용도를 식별할 수 있다.
<!-- X -->
<head>
    <title>레진코믹스<title>

<!-- O -->
<head>
    <title>준법시민(99회) - 레바툰 - 레진코믹스<title>

기대 효과

  • 전맹 사용자가 링크 이동 결과를 음성으로 확인할 수 있다.
  • 문서의 용도를 빠르게 파악할 수 있다.
  • 검색엔진이 올바른 페이지를 수집하도록 돕는다.
  • 유저 에이전트 탭의 식별 가능성이 높아진다.

관련 표준


9. 링크와 버튼 텍스트는 콘텐츠의 목적을 알 수 있다. #

  • 주변 콘텐츠와 분리하여 독립적으로 접근해도 링크 또는 버튼의 목적을 알 수 있어야 한다.
  • 링크 또는 버튼에 독립적으로 접근하여 이해하기 어려운 경우 동일한 단락, 목록, 셀, 연결된 헤더셀(p, li, td, th)에 링크 또는 버튼의 목적을 설명해야 한다.
<!-- X -->
<a href="#" download>설치하기</a>
<button type="button">삭제하기</button>

<!-- O -->
<a href="#" download>레진코믹스 안드로이드 애플리케이션 설치하기</a>
<p>레진코믹스 안드로이드 애플리케이션 <a href="#" download>설치하기</a></p>
<li>레진코믹스 안드로이드 애플리케이션 <a href="#" download>설치하기</a></li>
<td>레진코믹스 안드로이드 애플리케이션 <a href="#" download>설치하기</a></td>
<tr>
    <th scope="row">레진코믹스 안드로이드 애플리케이션</th>
    <td><a href="#" download>설치하기</a></td>
</tr>

<!-- O -->
<button type="button">구매내역 삭제하기</button>
<p>구매내역 <button type="button">삭제하기</button></p>
<li>구매내역 <button type="button">삭제하기</button></li>
<td>구매내역 <button type="button">삭제하기</button></td>
<tr>
    <th scope="row">구매내역</th>
    <td><button type="button">삭제하기</button></td>
</tr>

기대 효과

  • 전맹 사용자가 링크 또는 버튼에 독립적으로 또는 순차적으로 접근하는 경우 링크 또는 버튼의 목적을 음성으로 전달할 수 있다.

관련 표준

평가 도구


10. 섹션에는 의미 있는 마크업과 헤딩이 있다. #

  • 섹션 콘텐츠는 의미에 알맞은 article, section, nav, aside 요소로 마크업한다.
  • 섹션 콘텐츠에는 문서의 개요 체계에 알맞은 헤딩(h1~h6)을 제공한다.
  • 명시적 헤딩 기법을 사용한다. 명시적 헤딩 기법은 하나의 문서에 h1 요소를 한 번 사용한다.
<!-- X -->
<div class="article">...</div>
<div class="section">...</div>
<div class="nav">...</div>
<div class="aside">...</div>

<!-- O -->
<article>
    <h2>...</h2>
    ...
</article>
<section>
    <h2>...</h2>
    ...
</section>
<nav>
    <h2>...</h2>
    ...
</nav>
<aside>
    <h2>...</h2>
    ...
</aside>

기대 효과

  • 보조기기 사용자가 원하는 탐색 지점으로 빠르게 건너 뛸 수 있다.
  • 검색엔진이 올바를 페이지를 수집하도록 돕는다.
  • 유저 에이전트 확장 기능 사용자에게 문서 개요를 전달할 수 있다.

관련 표준

평가 도구


11. 문서의 휴먼 랭귀지 속성을 제공한다. #

  • html 요소에 lang 속성을 제공한다.
  • 한글, 영문, 일문, 중문에는 이를 식별하기 위한 ISO-639-1 코드값 ko, en, ja, zh가 있다.
<!-- X -->
<html>

<!-- O -->
<html lang="ko">

기대 효과

  • 보조기기와 검색엔진이 문서의 휴먼 랭귀지를 식별할 수 있다.

관련 표준

평가 도구


12. 문맥 변경은 예측할 수 있다. #

  • 사용자가 실행하기 전까지는 문서를 갱신(이동, 추가, 삭제, 재배치)하거나, 팝업(새 창, 레이어)을 띄우거나, 초점을 다른 곳으로 옮기지 않는다.
  • 사용자가 초점을 넣거나 마우스를 올리는 것은 기능을 실행하기 위한 의도로 보지 않기 때문에 문맥을 변경하면 안 된다.
  • '대한민국' 선택의 결과로 대한민국의 '시/군/구'를 선택하는 항목이 등장했다면 이것은 문맥의 변화가 아니다.
<!-- X -->
초점을 넣었을 뿐인데 자동으로 페이지 갱신 또는 이동.
페이지 로드 시 자동 팝업.
초점 자동 이동.

<!-- O -->
클릭 또는 리턴(엔터) 키를 통해 페이지 갱신 또는 이동.
클릭 또는 리턴(엔터) 키를 통해 팝업 생성.
초점을 자동으로 옮기지 않음.

기대 효과

  • 보조 기기 사용자가 혼란에 빠지는 것을 예방할 수 있다.

관련 표준


13. 폼 콘트롤 요소에 설명을 제공한다. #

  • 모든 input, textarea, select 요소에는 콘트롤을 설명하는 label 요소를 맵핑하거나 또는 title 속성을 제공한다.
<!-- X -->
<form>
    <input type="search">
    <button>검색</button>
</form>

<!-- O -->
<form>
    <label for="search">검색</label>
    <input id="search" type="search">
    <button>검색</button>
</form>

<!-- O -->
<form>
    <input type="search" title="검색">
    <button>검색</button>
</form>

기대 효과

  • 보조기기가 폼 콘트롤에 독립적으로 접근했을 때 콘트롤에 대한 설명을 제공할 수 있다.

관련 표준

평가 도구


14. 실수를 예방하고 정정하는 것을 돕는다. #

  • 입력 오류를 자동으로 감지할 수 있는 경우에만 이 지침을 적용한다. 예를 들면 이름을 잘못 입력하는 경우 정정 의견을 제시할 수 없다.
  • 오류 항목이 무엇인지 식별할 수 있도록 문자로 알리고 정정 의견을 제시한다. 예를 들면 "생년월일 양식에 오류가 있습니다. 입력 형식은 yyyy-mm-dd 입니다."
  • 정정 의견은 보안을 유지하는 수준에서 제시한다. 예를 들면 "아이디 또는 비밀번호 입력 오류."
  • 입력 내용을 전송하기 전 검토 후 교정할 수 있다. 또는 제출한 내용을 되돌릴 수 있다.
<!-- X -->
오류 입력 양식에 붉은 색 보더 처리. // 시각에 의존하고 있다. 문자로 알려야 한다.
"입력 양식에 오류가 있습니다." // 오류 식별 불가.
"로그인 오류. 비밀번호는 특수문자, 숫자, 알파벳을 하나 이상 포함해야 합니다." // 정정 의견이 보안을 해치고 있음.
여러 단계(여러 페이지)에 걸쳐 작성한 내용 중 이전 단계의 내용을 검토할 수 없고 제출 후 수정할 수 없음. // 제출 전 또는 제출 수 수정할 수 있어야 한다.

<!-- O -->
"생년월일 양식에 오류가 있습니다. 입력 형식은 yyyy-mm-dd 입니다." // 오류 식별 가능. 정정 의견 제시.
"아이디 또는 비밀번호 입력 오류. 5회 이상 오류 발생 시 계정잠금 상태로 전환합니다." // 오류 식별 가능. 정정 의견 제시. 보안을 해치지 않음.
여러 단계(여러 페이지)에 걸쳐 작성한 내용 중 이전 단계의 내용을 검토 후 수정할 수 있음. 또는 이전 단계의 내용을 수정할 수 없지만 제출 후 수정할 수 있음.

기대 효과

  • 사용자가 실수하지 않도록 예방하고 실수를 교정할 수 있다.

관련 표준


15. HTML 문법을 준수한다. #

  • 시작 태그에서 닫는(self-closing) 요소를 제외하고 시작 태그, 종료 태그, 따옴표를 생략하지 않는다.
  • 명세에 따라 중첩한다.
  • 속성을 중복 선언하지 않는다.
  • 모든 id 속성의 값은 하나의 문서 안에서 중복 없이 유일하다.
<!-- X -->
<div><span>...</div> // span 종료 태그 생략 오류.
<span><a><div>...</div></a></span> // span 요소가 div를 감싼 것은 오류.
<div class="aaa" class="bbb">...</div> // 속성은 한 번만 선언해야 한다.
<div id="xyz">...</div><div id="xyz">...</div> // xyz 값은 페이지에서 유일해야 한다.

<!-- O -->
<div><span>...</span></div>
<div><a><div>...</div></a></div>
<div class="aaa bbb">...</div>
<div id="abc">...</div><div id="xyz">...</div>

기대 효과

  • 보조기기의 웹 문서 해석 오류를 예방할 수 있다.

관련 표준

평가 도구


관련 표준


License

Under MIT License. Copyright © Lezhin.