접근성 (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에 추가되면 Chrome은 스크린 리더에 적절한 이벤트를 발생시킵니다. WAI-ARIA 지원이 아직 진행 중이므로 Chrome에서 일부 WAI-ARIA 속성에 대해 이벤트를 발생시키지 않을 수 있으며 스크린 리더가 발생하는 모든 이벤트를 인식하지 못할 수 있습니다.

WAI-ARIA 컨트롤을 맞춤 컨트롤에 추가하는 방법을 알아보려면 Dave Raggett의 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의 접근성에 관해 자세히 알아보세요.