접근성 지원

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

특수 아동뿐만 아니라 누구나 접근성 기능의 이점을 누릴 수 있습니다. 시각장애인과 민첩성이 낮은 사용자, 파워 유저 모두 단축키가 유용합니다. 캡션과 스크립트는 청각장애인 사용자에게 필수적이지만 언어 학습자에게도 도움이 됩니다.

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

액세스 가능한 UI 컨트롤 통합

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

참고: 확장 프로그램에 맞춤 컨트롤이 필요한 경우 나중에 접근성 지원 추가로 돌아가는 것보다 처음부터 맞춤 컨트롤에 액세스할 수 있도록 하는 것이 훨씬 쉽습니다.

표준 컨트롤

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

맞춤 컨트롤의 WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications인 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="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</div>

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

접근 가능한 콘텐츠 제공

접근성이 우수한 콘텐츠를 제공하는 것은 모든 사용자에게 중요합니다. 다음 가이드라인은 모든 웹 콘텐츠에 대한 모범 사례를 반영하므로 대부분 친숙하게 들릴 수 있습니다.

텍스트

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

확장 프로그램 UI의 유연성을 나타내려면 200% 테스트를 적용합니다. 텍스트 크기 또는 페이지 확대/축소가 200% 증가해도 여전히 사용 가능한가요?

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

색상

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

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

더 나은 대비를 위해 다양한 색상 테마를 제공하거나 사용자가 색 구성표를 맞춤설정할 수 있는 기능을 제공하는 것이 좋습니다.

사운드

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

이미지

이미지에 유용한 대체 텍스트를 제공합니다.

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

이미지 콘텐츠의 리터럴 설명이 아닌 대체 텍스트를 사용하여 이미지의 목적을 명시합니다. 스페이서 이미지 또는 완전히 장식된 이미지는 빈 "" 대체 텍스트를 포함하거나 HTML에서 완전히 삭제하여 CSS에 배치해야 합니다.

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

자세히 알아보기

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