웹 접근성 준수 요구 사항

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

ETC./인증 심사 2020. 4. 28. 17:47

웹접근성이란?
웹 접근성(web accessibility)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.
참고 > http://www.wa.or.kr/m1/sub1.asp

웹 접근성 준수 고려사항

시각
실명, 색각 이상,다양한 형태의 저시력을 포함한 시각 장애
이동성
파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태
청각
영상, 음성 콘텐츠에 자막,원고, 수화등의 대체수단 부제로인한 인식이 불가능한 상태
인지
문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)

적절한 대체 텍스트
이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 단, 무의미한 이미지( 구분선, 글머리 기호 등 )의 경우 alt="" 으로 비워둔다.
또한 대체 텍스트는 간단명료하게 제공해야 한다.
```
<img src="logo.jpg" alt="메인 로고" /> 
<img src="logo.jpg" alt="Hailey" /> 
```
색에 무관한 콘텐츠 인식
콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자, 흑백 디스플레 이 사용자, 흑백 인쇄물을 보는 사용자 및 경조(硬調) 모드 사용자가 인식할 수 있도록 제공해야 한다.
텍스트 콘텐츠의 명도대비
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상 이어야 한다.
* 명도대비 3 대 1 까지 허용하는 경우
1 ) 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt이상 또는 14 pt 이상의 굵은 폰트를 사용하는 경우
2 ) 화면 확대가 가능하도록 구현한 텍스트 콘텐츠 (텍스트 및 텍스트 이미지)
입력장치 접근성
4-1. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
4-2. 초점 이동
키보드에 의한 초점 이동은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
focus, active 스타일 이용
4-3. 건너뛰기 링크
반복 영역의 순차적인 내비게이션을 생략하고 웹 페이지의 핵심 영역으로 이동할 수 있는 수단(버튼, 텍스트 링크 등)을 의미한다.

네이버 사이트의 바로가기 링크 샘플. 브라우저의 개발자도구를 이용하여 확인해보면 스타일을 이용하여 화면에서는 보이지 않게 숨겨두었음.
```

<div id="u_skip" style="position: absolute; top: -30px;">
  <a href="#newsstand"><span>뉴스스탠드 바로가기</span></a>
  <a href="#themecast"><span>주제별캐스트 바로가기</span></a>
  <a href="#timesquare"><span>타임스퀘어 바로가기</span></a>
  <a href="#shopcast"><span>쇼핑캐스트 바로가기</span></a>
  <a href="#account"><span>로그인 바로가기</span></a>
</div>
```
제목 제공
페이지의, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
5-1. 웹 페이지의 타이틀 지정
최대 3depth 메뉴 까지 콜론(:), 수직선(|) 등의 구분자를 이용하여 표시하는 것을 권장한다.
```
<html>
<head>
  <title>웹 접근성 준수 요구 사항 : 게시판 : Hailey Blog</title>
  ...
</head>
```
5-2. 프레임 제목
프레임 안의 컨텐츠는 보조 기술로 확인이 불가하여 따로 명시한다.
```
<iframe id="banner_frame" name="banner_frame" src="https://hailey0.tistory.com" title="광고" width="750" height="135" scrolling="no" frameborder="0"></iframe>
```
기본 언어 표시
웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조 기술로 전달한다.
다국어를 지원하는 화면 낭독 프로 그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 전달하여 정확한 발음으로 읽어주도록 제어하기도 한다. 따라서 웹 페이지의 기본 언어는 정확히 정의해야 한다.

표의 구성
표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.

<table>
  <caption>
    <strong>게시판 상세보기</strong>
    <p>관련자료 게시판 상세보기로 제목, 작성자, 내용으로 구성되어 있습니다.</p>
  </caption>
  <colgroup>
    <col style="width:30%">
    <col style="width:70%">
  </colgroup>
  <thead>
    <tr>
      <td colspan="2">웹 접근성 준수 요구 사항</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>작성자</th>
      <td>Hailey</td>
    </tr>
    <tr>
      <td colspan="2">웹접근성이란?</td>
    </tr>
  </tbody>
</table>

레이블 제공
사용자 입력의 근처에 사용법을 알려주는 레이블을 보조 기술이 알 수 있도록 해당 컨트롤과 대응하여 제공해야 한다. 레이블과 사용자 입력 간의 관계를 보조 기술이 인식할 수 있도록 대응시키지 않고 단순히 텍스트로만 제공할 경우, 보조 기술은 해당 사용자 입력에 대한 레이블을 인식할 수 없다.
label 태그로 연결, title 속성 지정, 테이블의 th td 등으로 명시할 수 있다.
```
<label for="usernm">이름</label>
<input type="text" name="username" id="usernm" />
```

'ETC. > 인증 심사' 카테고리의 다른 글

RSA 암호화 적용하기 (1)	2021.06.21
lucy-xss-servlet-filter 로 크로스사이트 스크립팅 공격 예방하기 (2)	2020.08.05
사이트 개인정보 보호조치 요구 사항 (0)	2020.04.28
[보안취약점] 게시판 5분 이내 작성 게시글 수 체크 (0)	2020.04.28

DESC

Hailey's Record Hailey's Record

추천 확장 프로그램

'ETC. > 인증 심사' 카테고리의 다른 글

티스토리툴바