접근성 (a11y)

확장 프로그램을 사용하면 사용자는 개인의 능력과 환경설정에 맞게 이상적인 탐색 환경을 만들 수 있습니다. 확장 프로그램은 시각 장애, 청력 상실, 기민성이 제한된 사람, 기타 장애가 있는 사용자가 확장 프로그램에 액세스할 수 있도록 하여 포용적인 사용자층을 장려하는 접근성 구성요소를 포함해야 합니다.

접근성 기능은 특별한 도움이 필요한 사용자뿐만 아니라 모든 사용자에게 도움이 됩니다. 시각 장애가 있거나 수동기민성이 낮거나 고급 사용자 모두에게 단축키가 도움이 됩니다. 자막과 스크립트는 청각장애인 사용자에게 필수적이지만 언어 학습자에게도 도움이 됩니다.

사용자는 다양한 방식으로 확장 프로그램과 상호작용할 수 있습니다. 일부 사용자는 표준 모니터, 키보드, 마우스를 사용하거나 화면 돋보기와 스크린 리더를 사용해야 할 수 있습니다. 사용자가 확장 프로그램에 액세스하는 데 어떤 도구를 사용할지 예측하는 것은 불가능하지만, 개발자가 가능한 한 확장 프로그램의 접근성을 높이기 위해 취할 수 있는 단계가 있습니다.

접근 가능한 UI 컨트롤 통합

사용자가 사용자 인터페이스 컨트롤에 액세스할 수 없는 경우 확장 프로그램을 사용할 수 없습니다. 액세스 가능한 UI를 만드는 가장 쉬운 방법은 표준 HTML 컨트롤을 사용하는 것입니다.

표준 컨트롤

가능하면 표준 HTML UI 컨트롤을 사용하세요. 표준 HTML 컨트롤은 키보드로 액세스할 수 있고 쉽게 확장되며 일반적으로 스크린 리더에서 이해할 수 있습니다.

버튼, 체크박스, 라디오, 텍스트, 선택/옵션, 링크의 스크린샷 및 코드

맞춤 컨트롤의 WAI-ARIA

웹 접근성 이니셔티브 - 액세스할 수 있는 리치 인터넷 애플리케이션(WAI-ARIA)은 표준 DOM 속성 집합을 통해 스크린 리더에서 UI 컨트롤에 액세스할 수 있도록 하기 위한 사양입니다. 이러한 속성은 스크린 리더에 웹페이지의 컨트롤 기능 및 현재 상태에 관한 정보를 제공합니다.

맞춤 컨트롤에 WAI-ARIA 지원을 추가하려면 Chrome에서 사용자 상호작용 중에 이벤트를 발생시키는 데 사용하는 속성을 포함하도록 확장 프로그램의 DOM 요소를 수정해야 합니다. 스크린 리더는 이러한 이벤트에 응답하고 컨트롤의 기능을 설명합니다. WAI-ARIA에 의해 지정된 DOM 속성은 역할, 상태, 속성으로 분류됩니다.

<div role="toolbar">

aria-activedescendant 속성은 툴바가 포커스를 받을 때 포커스를 받을 툴바의 하위 요소를 지정합니다. tabindex="0" 코드는 툴바가 문서 순서대로 포커스를 수신하도록 지정합니다.

아래의 툴바 예시의 전체 사양을 고려해 보세요.

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

WAI-ARIA 역할, 상태, 속성이 컨트롤의 DOM에 추가되면 Google Chrome에서 화면 리더에 적절한 이벤트를 발생시킵니다. WAI-ARIA 지원은 아직 진행 중이기 때문에 Google Chrome에서 모든 WAI-ARIA 속성에 관한 이벤트를 발생시키지 않을 수 있으며 스크린 리더에서 발생하는 모든 이벤트를 인식하지 못할 수도 있습니다.

WAI-ARIA 컨트롤을 맞춤 컨트롤에 추가하는 방법에 관한 빠른 가이드는 WWW2010에서 데이브 라게트의 프레젠테이션을 참고하세요.

맞춤 컨트롤에 포커스

키보드 포커스는 마우스 없이 웹을 탐색하는 사용자에게 필수적입니다. 버튼, 목록 상자, 메뉴 바와 같은 작업 및 탐색 컨트롤이 키보드 포커스를 받을 수 있는지 확인합니다.

기본적으로 HTML DOM에서 키보드 포커스를 받을 수 있는 요소는 앵커, 버튼, 양식 컨트롤뿐입니다. 그러나 HTML 속성 tabIndex를 0로 설정하면 DOM 요소가 기본 탭 시퀀스에 배치되어 키보드 포커스를 받을 수 있습니다.

element.tabIndex = 0

element.focus();

tabIndex = -1를 설정하면 탭 시퀀스에서 요소가 삭제되지만 요소가 프로그래매틱 방식으로 키보드 포커스를 받을 수는 있습니다.

키보드 액세스 지원

확장 프로그램은 키보드만으로 사용할 수 있어야 하므로 마우스를 사용할 수 없는 사용자와 마우스를 사용하지 않는 고급 사용자도 확장 프로그램에 액세스할 수 있습니다.

사용자가 마우스를 사용하지 않고도 확장 프로그램의 여러 부분 간에 이동할 수 있는지 확인합니다. 키보드에서 팝업을 사용하여 탐색할 수 있는지 확인합니다. Chrome 단축키를 사용하여 확장 프로그램을 탐색할 수 있는지 확인합니다.

인터페이스의 어느 부분에 키보드 포커스가 있는지 쉽게 확인할 수 있어야 합니다. 일반적으로 포커스 윤곽선은 인터페이스 주위를 이동하지만 CSS가 너무 많이 사용되면 윤곽선이 억제되거나 대비가 줄어들 수 있습니다.

검색 버튼의 포커스 윤곽선

일련의 링크 중 하나에 대한 포커스 개요

단축키

가장 일반적인 키보드 탐색 전략은 Tab 키를 사용하여 확장 프로그램의 인터페이스를 통해 포커스를 회전하는 것이지만, 항상 가장 쉽거나 가장 효율적인 옵션은 아닙니다.

간단한 JavaScript 키보드 핸들러는 다음과 같습니다. 현재 활성화된 툴바 버튼을 반영하도록 사용자 입력에 응답하여 WAI-ARIA 속성 aria-activedescendant가 어떻게 업데이트되는지 확인하세요.

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

확장 프로그램은 중요한 확장 프로그램 UI 요소에 대한 명시적 단축키를 만들 수 있습니다. 이러한 단축키를 구현하려면 키보드 이벤트 리스너를 컨트롤에 연결합니다. 사용자가 사용 가능한 단축키를 알 수 있도록 옵션 페이지에 제공합니다.

접근 가능한 콘텐츠 제공

접근성 있는 콘텐츠를 제공하는 것은 모든 사용자에게 중요합니다. 다음 가이드라인의 대부분은 모든 웹 콘텐츠에 적용되는 권장사항을 반영하므로 익숙하게 느껴질 수 있습니다.

텍스트

글꼴 선택과 텍스트 크기는 확장 프로그램 콘텐츠의 가독성에 영향을 미칩니다. 시력 문제가 있는 사용자는 확장 프로그램 텍스트 크기를 늘려야 할 수 있습니다. 단축키를 사용하는 경우 Chrome에 내장된 확대/축소 단축키를 방해하지 않아야 합니다.

확장 프로그램 UI의 유연성을 나타내는 지표로 200% 테스트를 적용합니다. 텍스트 크기 또는 페이지 확대/축소를 200% 늘리면 여전히 사용할 수 있나요?

텍스트를 이미지에 베이킹하지 마세요. 사용자는 크기를 수정할 수 없으며 스크린 리더는 이미지를 해석할 수 없습니다. 대신 Google Font API에 있는 글꼴과 같이 스타일이 지정된 웹 글꼴을 선택하세요. 웹 글꼴은 다양한 크기로 조정할 수 있으며 화면 리더를 사용하는 사용자가 액세스할 수 있습니다.

색상

확장 프로그램의 배경 색상과 텍스트 색상 간에 충분한 대비가 있어야 합니다. 대비 검사 도구를 사용하여 배경과 전경 색상이 적절한 대비를 제공하는지 테스트합니다.

대비를 평가할 때는 그래픽을 사용하여 정보를 전달하는 확장 프로그램의 모든 부분이 명확하게 표시되는지 확인합니다. 특정 이미지의 경우 Coblis - Color Blindness Simulator와 같은 도구를 사용하여 다양한 형태의 색각 이상에서 이미지가 어떻게 표시되는지 확인할 수 있습니다.

대비를 개선하기 위해 다양한 색상 테마를 제공하거나 사용자에게 색 구성표를 맞춤설정할 수 있는 기능을 제공해 보세요.

소리

확장 프로그램에서 사운드나 동영상을 사용하여 정보를 전달하는 경우 자막이나 스크립트를 사용할 수 있어야 합니다. 자막에 관한 자세한 내용은 설명 및 자막이 제공된 미디어 프로그램 가이드라인을 참고하세요.

이미지

이미지에 정보를 제공하는 대체 텍스트를 제공합니다.

<img src="img.jpg" alt="The logo for the extension">

대체 텍스트는 이미지의 콘텐츠를 문자 그대로 설명하는 대신 이미지의 목적을 명시하는 데 사용합니다. 스페이서 이미지 또는 순전히 장식용 이미지는 빈 "" 대체 텍스트를 사용하거나 HTML에서 완전히 삭제하고 CSS에 배치해야 합니다.

확장 프로그램에서 이미지에 텍스트를 사용해야 하는 경우 이미지 텍스트를 대체 텍스트에 포함합니다. 적절한 대체 텍스트에 관한 WebAIM 도움말을 참고하세요.

자세히 알아보기

A11ycasts 채널을 확인하고 Chromium 접근성 기술 문서를 읽어 Chrome의 접근성에 관해 자세히 알아보세요.