웹 접근성

@richmedia

웹 접근성이란?

웹 접근성은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는것을 의미한다. Web 접근성(정보통신접근성)은 「지능정보화기본법」에 따라 웹 접근성 준수는 법적의무사항이다

---

웹 접근성 지침(KS C OT0003:2022)

한국형 웹 콘텐츠 접근성 지침 2.2에서는  원칙 4개, 지침 14개, 검사항목 33개을 두고 있다. 웹접근성을 통과하기 위한 지침 4가지(인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 견고성(Robust))을 두고 있다.

인식의 용이성(Perceivable)

시각, 청각, 인지, 언어 등의 다양한 장애를 가진 사용자들이 콘텐츠를 인식하는 데 어려움이 없도록 하는 방법을 고안해야 한다. 대표적으로 대체 텍스트, 명료성, 색 대비, 음성 인식 기능 등을 고려한 콘텐츠 제작 방법 등이 있다.

• (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
• (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
• (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
• (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
• (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
• (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
• (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

Unsplash Hybrid Storytellers 사진

이미지 대체 텍스트 코드 "a right hand removing a slice from a whole pizza"

<img alt="a right hand removing a slice from a whole pizza" src="https://unsplash.com/photos/XYyUxXw_oQw"/>

이미지 대체 텍스트 출력

@접근성개발실. 색맹환자들이 구분하기 어려운 콘텐츠 색상

@리메인. 명대도비

---

운용의 용이성(Operable)

마우스를 사용할 수 없거나 키보드만으로 콘텐츠를 사용해야 하는 사용자들이 원활하게 콘텐츠를 이용할 수 있도록 하는 방법을 말한다. 키보드 접근성, 포커스, 스킵 링크 등을 고려한 제작을 요구한다. 이때 키보드에서 tab을 이용하여 포커스를 이동하는데 순서는 좌에서 우로, 위에서 아래로 진행된다.

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
• (누르기 동작 지원) 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
• (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
• (조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
• (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
• (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
• (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
• (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
• (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
• (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

Web develop - Keyboard navigation

---

이해의 용이성(Understandable)

콘텐츠를 이해하기 어려운 사용자들이 콘텐츠를 이해하는 데 어려움이 없도록 하는 방법. 예를들어 제목, 목차, 단락, 문장 등을 명확하게 구분하여 작성하고, 용어 설명, 축약어 등을 이해하기 쉽도록 작성하는 방법을 제시한다.

• (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
• (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
• (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
• (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
• (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
• (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

@mesign.tistory  예시: HTML 문서 상에서 A-B 순이었던 logo(A)와 sns(B)가 CSS 적용 후 B-A 순으로 보이는 것을 알 수 있다. css로 바꿔 나타낼 수 있지만 html은 그대로 있다.(콘텐츠의 선형화)

 

@널리. 레이블이 시각적으로 노출되어 있지 않은 경우 1:1로 매칭하거나 입력 서식에 title을 제공한다.

소스 코드

<input type=”text” placeholder=”아이디” />

해결 방안

<label for=”user_id”>아이디</label>
<input type=”text” id=”user_id” />
또는
<input type=”text” id=”user_id” title=”아이디” />

---

견고성(Robust)

웹 콘텐츠가 다양한 사용자 에이전트, 브라우저, 보조 기술 등에서 제대로 작동하도록 하는 방법을 안내한다. 대표적으로 HTML, CSS, JavaScript 등의 표준 규격을 준수하고, WAI-ARIA 등의 보조 기술을 활용하여 콘텐츠를 제작하도록 요구한다.

• (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
• (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

오류 코드

<img src=“apple.jpg” alt=“” class=“img_box img_01”>

해결 방안

<img src=“apple.jpg” alt=“” class=“img_box” class=“img_01”>

 
위와 같은 지침들을 따르면 웹 콘텐츠를 다양한 사용자들이 더욱 쉽게 이용할 수 있으며, 인터넷 환경에서의 차별 없는 이용이 가능해진다. 웹 콘텐츠를 제작할 때 웹접근성 지침을 준수하여 모든 사용자들이 콘텐츠를 원활하게 이용할 수 있도록 노력해야 한다고 본다.

---

웹 접근성 지침 자료 pdf

한국형 웹 콘텐츠 접근성 지침 2.2-2

1.42MB

 

이 표준은 방송통신표준화법 관련 규정에 따라 방송통신표준심의회 심의를 거쳐 개정한 방송통신 표 준이다. 이에 따라 KS X OT0003:2015은 개정되어 이 표준(KS C OT0003:2022)으로 바뀌었다.

이 표준은 웹 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로, 본 표준이 적용되 는 범위는 PC, 터치스크린 기반 기기, 모바일 기기 등에서 실행되는 모든 웹 콘텐츠다. 이 표준은 제3자가 제공하는 서비스(third-party services)를 포함하여, 웹 콘텐츠 서비스 제공자가 제 공하는 모든 콘텐츠에 적용된다.

---

웹접근성을 평가하고 개선하는 데 사용되는 도구

• 스크린 리더기(Screen Reader)
  • 시각 장애인들은 화면을 볼 수 없기 때문에 스크린 리더기를 사용하여 음성 또는 점자로 웹 페이지를 읽어들인다. 스크린 리더기는 웹 페이지의 콘텐츠를 인식할 수 있도록 해주며, 사용자들이 콘텐츠를 이해하고 사용할 수 있도록 도와준다.
• 웹 접근성 검사 도구(Web Accessibility Evaluation Tool)
  • 웹 접근성 검사 도구는 웹 페이지의 접근성 문제를 자동으로 감지하고 보고해준다. 대표적인 검사 도구로는 WAVE(Web Accessibility Evaluation Tool)와 Lighthouse 등이 있다.
  • W3C 통합검사기(https://validator.w3.org/unicorn/)
  • WAVE Web Accessibility Evaluation Tool(https://wave.webaim.org/)
• 색 대비 검사 도구(Color Contrast Analyzer)
  • 색 대비 검사 도구는 텍스트와 배경 색상의 대비를 검사하여 접근성을 평가한다. 색 대비는 시각적으로 콘텐츠를 이해하는 데 매우 중요하므로 색 대비 검사 도구를 사용하여 최소 요구 사항을 충족시키는 색상 조합을 선택할 수 있다.
  • Colour Contrast Analyzer(Colour Contrast Analyzer)
  • Colour Contrast Check(Colour Contrast Check)
  • Contrast Analyser(Contrast Analyser)
  • Colour Contrast(Colour Contrast)
  • Contrast Ratio(Contrast Ratio)
• 웹 접근성 테스트(User Testing)
  • 웹 접근성 테스트는 사용자들이 웹 페이지를 사용하는 과정에서 발생하는 문제점을 발견하고 해결하는 것을 목표로 한다. 일반 사용자들을 대상으로 웹 페이지를 테스트하고, 발생한 문제점을 개선하여 접근성을 향상시킨다.

위와 같은 도구들을 사용하여 웹 접근성을 평가하고 개선함으로써 모든 사용자들이 웹 콘텐츠를 쉽게 이용할 수 있는 환경을 조성할 수 있다.

---

WAI-ARIA 

WAI-ARIA는 "Web Accessibility Initiative - Accessible Rich Internet Applications"의 약어로, 웹 콘텐츠의 접근성을 개선하기 위해 W3C에서 개발한 기술이다.
WAI-ARIA는 웹 콘텐츠의 구조와 의미를 설명하는 역할을 한다. 예를 들어, 웹 페이지에서 메뉴나 버튼 등 사용자 인터페이스 요소는 일반적으로 HTML 태그로 마크업하지만 스크린 리더 사용자는 이러한 요소를 이해하기 어렵다. 이런 경우 WAI-ARIA를 사용하여 이러한 요소의 역할, 상태, 속성 등을 더 명확하게 설명할 수 있다.
단, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없다
아래 코드에서 <nav> 요소는 이미 네비게이션 역할을 나타내는 요소로 정의되어 있으므로, 별도로 role="navigation" 속성을 사용할 필요가 없다. 마찬가지로, <button> 요소는 이미 버튼 역할을 나타내는 요소로 정의되어 있으므로, 별도로 role="button" 속성을 사용할 필요가 없다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WAI-ARIA 예시</title>
</head>
<body>
  <nav role="navigation">
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
  </nav>

  <button role="button" aria-expanded="false" aria-controls="content">더 보기</button>
  <div id="content" aria-hidden="true">
    <p>숨겨진 콘텐츠입니다. 이 버튼을 눌러 더 보기</p>
  </div>

  <form role="search">
    <label for="search-input">검색:</label>
    <input type="text" id="search-input" name="q" aria-label="검색어 입력" />
    <button type="submit">검색</button>
  </form>
</body>
</html>

즉, 위의 코드에서 nav, button 부분의 role을 삭제하고 작성해야 할 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WAI-ARIA 예시</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
  </nav>

  <button aria-expanded="false" aria-controls="content">더 보기</button>
  <div id="content" aria-hidden="true">
    <p>숨겨진 콘텐츠입니다. 이 버튼을 눌러 더 보기</p>
  </div>

  <form role="search">
    <label for="search-input">검색:</label>
    <input type="text" id="search-input" name="q" aria-label="검색어 입력" />
    <button type="submit">검색</button>
  </form>
</body>
</html>

---

참고하기 좋은 곳

리메인 - 웹접근성에 의한 명도대비

리메인

널리 - 기술의 혜택을 누릴 수 있는 웹접근성 지침 소개

NULI

네이버 접근성

네이버 접근성 페이지 : 대체 텍스트