확장 프로그램은 사용자가 개인의 능력과 선호도에 맞는 이상적인 브라우징 경험을 만들 수 있도록 합니다. 확장 프로그램에는 시각 장애, 청력 손실, 손재주 제한 및 기타 장애가 있는 사람들이 확장 프로그램에 액세스 할 수 있도록 하여 포괄적 인 사용자 기반을 장려하는 접근성 구성 요소가 포함되어야 합니다.

특별한 도움이 필요한 사용자 뿐만 아니라 모든 사람이 접근성 기능의 혜택을 누릴 수 있습니다. 시각 장애, 손재주 부족 및 고급 사용자는 모두 키보드 단축키의 이점을 누릴 수 있습니다. 캡션과 대본은 청각 장애인에게 필수적이지만 언어 학습자에게도 도움이 됩니다.

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

액세스 가능한 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에 추가되면 Google 크롬은 스크린 리더에 적절한 이벤트를 발생시킵니다. WAI-ARIA 지원은 아직 진행 중이기 때문에 Chrome은 모든 WAI-ARIA 속성에 대해 이벤트를 발생 시키지 않을 수 있으며 스크린 리더는 발생하는 모든 이벤트를 인식하지 못할 수 있습니다.

사용자 지정 컨트롤에 WAI-ARIA 컨트롤을 추가하는 방법에 대한 빠른 자습서는 WWW2010의 Dave Raggett 프레젠테이션을 참조하세요.

Focus in custom controls 

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

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

element.tabIndex = 0

element.focus();

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

키보드 액세스 지원 

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

Navigation 

사용자가 마우스를 사용하지 않고 확장 프로그램의 다른 부분을 탐색 할 수 있는지 확인합니다. 팝업 사용이 키보드로 탐색 가능한지 확인하십시오. Chrome 단축키를 사용하여 확장 프로그램을 탐색 할 수 있는지 확인합니다.

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

Shortcuts 

가장 일반적인 키보드 탐색 전략은 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 요소에 대한 명시적인 키보드 단축키를 만들 수 있습니다. 이러한 단축키를 구현하려면 키보드 이벤트 리스너를 컨트롤에 연결합니다. 옵션 페이지에서 제공하여 사용 가능한 바로 가기를 사용자에게 알립니다.

접근 가능한 콘텐츠 제공 

액세스 가능한 콘텐츠를 제공하는 것은 모든 사용자에게 중요합니다. 다음 지침의 대부분은 모든 웹 콘텐츠에 대한 우수 사례를 반영하므로 친숙하게 들릴 수 있습니다.

Text 

글꼴 선택 및 텍스트 크기는 확장 프로그램의 내용을 읽을 수 있는 정도에 영향을 줍니다. 시력 문제가 있는 사용자는 확장 텍스트 크기를 늘려야 할 수 있습니다. 단축키를 사용하는 경우 Chrome에 내장 된 확대 / 축소 단축키를 방해하지 않는지 확인하세요.

확장 UI의 유연성을 나타내는 지표로 200 % 테스트를 적용하십시오. 텍스트 크기 또는 페이지 확대 / 축소가 200 % 증가해도 여전히 사용할 수 있습니까?

텍스트를 이미지로 굽지 마십시오. 사용자는 크기를 수정할 수 없으며 화면 판독기는 이미지를 해석 할 수 없습니다. Insead에서는 Google Font API에있는 글꼴 중 하나와 같은 스타일이 지정된 웹 글꼴을 선택합니다. 웹 글꼴은 다양한 크기로 확장 할 수 있으며 화면 판독기를 사용하는 사람들이 액세스 할 수 있습니다.

Colors 

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

대비를 평가할 때 정보를 전달하기 위해 그래픽에 의존하는 확장의 모든 부분이 명확하게 보이는지 확인합니다. 특정 이미지의 경우 Coblis — Color Blindness Simulator와 같은 도구를 사용하여 다양한 형태의 색 부족에서 이미지가 어떻게 보이는지 확인할 수 있습니다.

더 나은 대비를 만들기 위해 다양한 색상 테마를 제공하거나 사용자에게 색상 구성을 사용자 정의 할 수 있는 기능을 제공하는 것이 좋습니다.

Sound 

확장 프로그램이 정보를 전달하기 위해 사운드 또는 비디오에 의존하는 경우 캡션 또는 대본을 사용할 수 있는지 확인하십시오. 캡션에 대한 자세한 내용은 설명 및 캡션이 있는 미디어 프로그램 지침을 참조하십시오.

Images 

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

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

이미지 내용에 대한 리터럴 설명이 아닌 대체 텍스트를 사용하여 이미지의 목적을 설명합니다. 스페이서 이미지 또는 순전히 장식적인 이미지에는 빈 ""대체 텍스트가 있거나 HTML에서 완전히 제거되고 CSS에 배치되어야 합니다.

확장 프로그램이 이미지에 텍스트를 사용해야 하는 경우 대체 텍스트에 이미지 텍스트를 포함합니다. 참조 할 수 있는 좋은 리소스는 적절한 대체 텍스트에 대한 WebAIM 문서입니다.

더 알아보기 

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