해당 게시글은 리베하얀 웹접근성 기초 의 내용을 정리한 것입니다 :)

웹접근성 심사항목

1. 대체텍스트 제공 (alt="")

image

시각장애인은 이미지 안의 텍스트를 볼 수 없기 때문에 alt="" 속성 안에 따로 텍스트를 입력해준다. 이 때 이미지의 텍스트를 그대로 전달하기보다, 내용의 주요 타이틀도 신경써서 함께 입력해주면 좋다.

• <img src="images.png" alt="일시:2022.3.31, 장소:양재미술관">

이미지의 설명이 본문안에 들어 있다면 대체 컨텐츠로 제공한 것으로 인정된다. 예를들어 복지회관 지도 이미지의 경우, alt 속성 안에는 "복지회관 찾아오시는 길입니다. 하단에 자세한 내용이 있습니다." 정도로 적어주자.

또한 의미없는 이미지를 사용할 경우 alt를 빈 값으로 꼭 넣어주어야 한다. 그냥 속성을 빼버리면 화면낭독기가 '그래픽 링크'라고 읽게되어 이게 어떤 의미의 이미지인지 유추할 수 없어 불편이 생긴다. 의미없는 이미지는 background-image 로 넣는 것도 한 방법이다.

• <img src="dot.png" alt="">

background-image

설명이 필요한 배경이미지일 경우, 태그 내부에 <span> 등의 요소를 추가하고 텍스트를 넣어 IR기법으로 처리해준다.

input

버튼을 이미지로 만드는 경우, alt 속성을 이용하여 어떤 버튼인지 꼭 알려주도록 하자. 부가 설명을 위한 title 속성은 화면낭독기로 읽히지 않으니 주의!

• <input tupe="image" src="images.png" alt="검색">

2. 자막제공

영상, 음성 컨텐츠에 청각장애인을 위한 자막 / 원고 / 수화 중 하나 이상의 수단을 제공하면 웹접근성을 준수한 것으로 간주된다. 사용자에게 동영상 등록을 받는 란이 있다면, 동영상에 나오는 내용을 모두 작성하는 '동영상 원고'란을 구현하여 제공해야 한다. 음성 컨텐츠의 경우 원고 내용이 동일해야 바람직하다.

권장사항

• 모바일 기기에서 대체 수단(이미지, 텍스트, 대체파일) 등을 이용할 수 있도록 제공
• 원고를 제공할 경우 모바일 기기에서 화면과 원고를 동시에 볼 수 있도록 제공
• 모바일 기기는 화면의 크기가 각각 다르므로 원고 제공보다는 영상 자체에 자막 제공을 권장

3. 색에 무관한 컨텐츠 인식 제공

색을 구별하지 못하는 시각장애인의 경우, 도표 및 그래프 등에서 색상만으로 내용을 분별하도록 제공된 컨텐츠는 내용 인식이 어렵다. 때문에 각 그래프 파트마다 텍스트를 제공하거나, 하단에 표를 추가하여 넣어주면 된다.

또한 색으로만 현재 상태를 표현하는 안내버튼의 경우에는 명암(7:1) 및 빗금과 같은 패턴을 잘 활용하여 직관적으로 인식할 수 있도록 한다. 스스로 선택해야하는 버튼은 괜찮다.

4. 명확한 지시사항의 제공

• 아래 버튼을 누르세요 X
• 갈색 아이콘을 클릭하세요 X
• 둥근 버튼을 클릭하세요 X
• 버튼명을 Go / 홈페이지 바로가기 / 패키지 설치하기 등 직관적 이름으로 명시하기

5. 텍스트 컨텐츠의 명도대비

색맹을 위한 텍스트색과 배경색의 명도대비 기준은 두 가지가 있다. 첫번째는 폰트 사이즈가 18px 이상이거나, 굵은 14px 이상이라면 3:1의 명도대비를 만족시켜야 하고, 그 외에는 4.5:1의 명도대비를 만족시켜야 한다.

6. 자동재생 금지

시각장애인을 위해 자동으로 화면을 읽어주는 화면낭독기는 일반적으로 화면이 로딩되자마자 사이트를 읽어준다. 그렇기 때문에 자동재생되는 영상이나 음성파일이 있다면 화면낭독기의 음성이 묻히게 된다. hover시 나오는 배경음이나 안내메세지 같은 경우는 3초를 넘기면 안된다.

• 3초 미만의 배경음은 예외
• 3초 이상이더라도, ESC를 누르면 배경음이 멈추는 것과 같이 제어 수단이 페이지의 첫 부분에 제공되면 괜찮다.

7. 컨텐츠간의 구분

테두리, 구분선, 배경색 등을 이용하여 컨텐츠 사이의 시각적인 영역을 구분해주도록 한다. 줄 간격 및 글자 간격도 시각적인 구분에 문제가 없어야 한다.

8. 키보드 사용 보장

키보드만 사용하는 지체장애인 또는 시각장애인은 마우스를 사용할 수 없기 때문에 키보드로 웹사이트를 잘 컨트롤할 수 있도록 사용성을 보장해야 한다.

onclick

웹사이트상에서 tab키를 눌러 요소 사이를 순서대로 이동할 수 있는 것을 볼 수 있을 것이다. 이 때, onclick 속성을 넣은 태그는 어떤 것이든 마우스로 클릭이 가능하지만, 키보드로는 접근이 붏가하여 오류가 난다. 때문에 클릭이 필요한 요소는 a링크 안에 해당 요소를 넣어 onclick을 주거나 button 태그를 사용하자.

overflow:auto;

이용약관과 같이 스크롤되는 컨텐츠를 overflow:auto;로 표현하는 경우 키보드로 접근이 불가하다.(방향키로 제어 불가) 이 때, tabindex="0"으로 제어를 시킬 수 있다. 이것을 넣게 되면 마크업 순서대로 tab을 이동할 수 있고, 자동으로 초점이 들어가게 되어 내부 내용을 컨트롤할 수 있다.

9. 누르기 동작 지원

• 다중 누르기(양손터치: 확대,축소)의 대체방법 지원
• 슬라이드, 드래그앤드롭 등 복잡한 동작을 단순 누르기로 지원
• 모바일을 블루투스 키보드로 제어할 수 있는 기능 지원

10. 초점의 이동

• 초점의 이동 순서를 논리적이고 일관성 있게 해야 한다.
  • 아이디 > 로그인 > 비밀번호 (X)
  • 아이디 > 비밀번호 > 로그인 (O)

• 불필요한 초점은 제외하고, 클릭할 수 있는 요소에만 초점이 이동되도록 해야 한다.
  ( CSS에서 outline:none 을 주게 되면 초점이 사라지게 된다. )

슬라이드 구현 순서

1. 이전/다음버튼
2. pagination, 시작/정지 같은 제어버튼 (슬라이드를 모두 넘기지 않고 제어버튼으로 이동)
3. 슬라이드 배너

주의사항

• 초점은 순방향(Tab)과 역방향(Shift+Tab) 모두 이동될 수 있어야 한다.
• 팝업 및 모달창에 가장 먼저 초점이 접근해야 한다.
• 초기초점이 해당 사이트의 주목적에 부합하는 영역으로 이동하는 경우 인정
  (검색 사이트의 검색창, 로그인 페이지의 아이디 입력창 등)

11. 조작 가능 (모바일)

• 컨트롤의 크기는 대각선으로 6.0mm 이상 제공해야 한다.
• 링크, 사용자입력, 컨트롤러 버튼 등의 테두리 안쪽 여백은 1px 이상으로

12. 정지기능 제공

슬라이드, 실시간 검색순위와 같이 시간에 따라 변화하는 컨텐츠에 정지, 이전, 다음 기능을 제공해야 한다.

13. 응답시간 조절

• 시간제한이 있는 컨텐츠를 제어할 수 있는 수단(일시정지,재생)을 제공해야 한다.
  - ex) "5초 후 메인페이지로 이동합니다." / 중지
• 제한시간을 연장하는 방법에 제한 시간을 주어야 한다.
  - ex) "자동 로그아웃 남은 시간" / 로그인연장
• 시간제한에 대한 연장방법은 10배 이상의 시간을 제공해야 한다.

14. 깜빡임과 번쩍임 사용 제한

1997년 12월쯤 일본 포켓몬스터 38화를 본 아이들이 광과민성 발작으로 입원 또는 사망에 이르는 사건으로 인해 생겨났다. 사전 경고없이 초당 3~50회 깜빡이는 컨텐츠는 사용에 제한이 된다.

• 깜빡임을 중단하는 수단을 제공했더라도 미리 경고하지 않은 경우는 감점
• 깜빡임이 3초 미만이면 인정

15. 반복영역 건너뛰기 (본문 바로가기)

사이트 입장 시 본래 목적인 컨텐츠로 도달하기까지 많은 소요시간이 걸릴 수 있기 때문에 본문 바로가기 를 통해 대메뉴, 네비게이션, 서브메뉴 등은 건너뛰고 원하는 컨텐츠로 바로 이동하도록 한다. '네이버'같이 많은 정보를 제공하는 사이트는 대메뉴 바로가기, 서브메뉴 바로가기 등 다양한 바로가기 링크를 제공하기도 하지만 일반 사이트는 1개만 제공하는 것이 좋다.

• 건너뛰기 링크를 제공할 것
  <div><a href="#contents">본문 바로가기</a></div>
• 건너뛰기 링크는 사이트 최상단에 제공

16. 제목 제공

• 페이지의 제목을 제공할 것 = title
  : 화면낭독기가 첫번째로 읽는 요소로 시각장애인이 사이트에 잘 도달했는지 알 수 있는 방법이다.
• 페이지 제목을 적절하게 제공할 것
• 프레임 요소에 제목을 제공할 것
  <iframe title="회원가입용" id="d" name="frame" src="url"></iframe>
• 개발의 용도로 빈 프레임을 넣는 경우에도 '빈 프레임','어떤 목적용 프레임' 등 title을 제공하자. 넣지 않을 시 오류사항에 해당된다.
• title에 특수문자를 2개이상 사용하지 말 것
• 컨텐츠 제목은 Heading 요소를 사용할 것

• display:none; 은 화면낭독기에서 읽히지 않으니 position 기법을 사용할 것 !
• table의 dt/dd는 센스리더에 읽히지 않으니 ul/li를 대체하여 쓰도록 하자..!

17. 적절한 링크 텍스트 제공

• 목적이나 용도를 알기 쉬운 링크 텍스트를 제공해야 한다.
  ex) '공지사항 더보기'

18. 기본언어의 표시 / 사용자 요구에 따른 실행

• 문서 타입에 맞는 기본언어 명시
  <html lang="ko">, <html lang="en">

사용자 요구에 따른 실행

사용자가 실행하지 않은 상황에서 예측하지 않은 새 창이 열리는 경우를 방지하기 위해 만들어졌다. 스크롤 선택지에서 해당 링크로 바로 이동하는 것이 아니라 '이동' 버튼을 따로 만들어 직접 실행하도록 해야 한다.

레이어 팝업(모달창)을 띄울 시 화면을 많이 가리게 된다. 최근에는 사이트 상단 또는 중앙에 배너를 띄운다던가 화면을 많이 가리지 않는 작은 배너를 구석에 띄우는 형식으로 제작된다. 기존 형태의 팝업을 띄운다면 꼭 '닫기' 버튼이 들어가 있어야 한다.

핸드폰 및 카드번호 입력 시, 4자리를 입력하면 다음 칸으로 자동으로 포커스되는 것을 '자동 초점 이동 기능(autofocus)'라고 한다. 이 때 수정이 필요하면 shift+tab 키를 사용여 이전 칸으로 돌아갈 수 있도록 구현해야 한다.

19. 컨텐츠의 선형화

• 컨텐츠의 순서를 논리적으로 제공하여 전후 맥락을 이해할 수 있도록 한다.
  h2 > ul > li
• 제목과 내용 사이에 관련없는 컨텐츠를 포함하고 있더라도 제목과 내용을 앵커 기능으로 연결했다면 인정

  <h2><a href="#article">제목</a></h2>
 		 --- 다른 내용 ---
  <div id="article">내용</div>

20. table의 구성

• 표의 제목(caption)과 요약정보(summary)를 제공할 것
  html5부터는 caption안에 제목, 요약, 구조 등의 정보를 한꺼번에 제공한다.

• 표의 제목과 요약을 적절하게 제공할 것

• 제목 셀(th)과 내용 셀(td)을 요소로 구분할 것

• 표 안에 중첩 표를 넣지 말 것

• 다단, 병합(rowspan/colspan) 등 복잡한 표 제공 시 꼭 headers, id 속성을 통해 제목/내용셀을 연결해야 한다.

  <thead>
      <tr>
          <th scope="col" rowspan="2">카드</th>
          ... 생략 ...
      </tr>
      <tr>
          <th id="a2">원금</th>
          ... 생략 ...
      </tr>
  </thead>
  <tbody>
      <tr>
          <td headers="a1 a2">10,000</td>
          ... 생략 ...
      </tr>
  </tbody>

21. label 제공

• <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 또는 title을 제공할 것
• label로 연결할 텍스트가 있는 경우 title 속성보다 label 요소를 사용할 것
  • input 요소의 텍스트와 form을 label로 연결하는 것

  <label for="userId">아이디</label><input type="text" id="userId" />
  <label for="userPwd">비밀번호</label><input type="password" id="userPwd" />

22. 오류 정정

• 입력 오류 발생 시, 오류 원인 및 내용을 적절한 설명 텍스트로 알려줄 것
• 정정할 수 있는 수단을 제공할 것
• 오류정보 확인 시, 해당 입력 서식으로 초점이 이동할 것
• 서식의 전송버튼을 눌렀을 때, 이제까지 입력한 모든 내용은 살아있어야 한다. (버튼 클릭 시 사라지면 안됨)

23. 마크업 오류 방지

• 태그의 열고 닫음 오류 / 태그의 중첩 오류
• 중복 선언된 속성 오류 (id)
  
  

24. 웹 애플리케이션 접근성 준수

• 웹 애플리케이션에 대체 컨텐츠를 제공할 것(이체 시스템의 activeX)
• 대체 컨텐츠를 핵심 기능을 동등하게 할 수 있도록 제공해야 한다.
• JavaScript 미지원 브라우저에서는 평가하지 않음

한국웹접근성인증평가원 심사기준