접근성 지원

확장 프로그램을 사용하면 사용자는 개인의 능력과 환경설정에 맞게 이상적인 탐색 환경을 만들 수 있습니다. 확장 프로그램에는 시각장애인, 청각 손실, 수동기민성 제한 및 수동기민성 장애가 있는 사용자를 지원함으로써 액세스할 수 있습니다.

특별한 도움이 필요한 사용자뿐만 아니라 모든 사용자가 접근성 기능을 활용할 수 있습니다. 비전 장애가 있는 사용자, 수동기민성이 부족한 사용자, 고급 사용자 모두 단축키의 이점을 누릴 수 있습니다. 자막과 스크립트는 청각장애인 사용자에게 필수적이지만 언어 학습자에게도 도움이 됩니다.

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

액세스 가능한 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 지원은 아직 진행 중이기 때문에 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="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</div>

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

접근 가능한 콘텐츠 제공

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

텍스트

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

확장 프로그램 UI의 유연성을 나타내는 지표로 200% 테스트를 적용합니다. 텍스트 크기 또는 페이지 확대/축소가 200% 증가했습니다. 그래도 사용할 수 있나요?

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

색상

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

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

다른 색상 테마를 제공하거나 사용자에게 색상을 맞춤설정할 수 있는 기능을 제공하세요. 대비가 더 잘 되도록 합니다.

소리

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

이미지

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

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

대체 텍스트는 이미지의 콘텐츠를 문자 그대로 설명하는 대신 이미지의 목적을 명시하는 데 사용합니다. 스페이서 이미지나 장식용 이미지가 아닌 경우 빈 "" 대체 텍스트가 있거나 삭제되어야 합니다. CSS에 배치됩니다.

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

자세히 알아보기

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