Chosen: Chosen의 접근성 문제

해당 토론의 관련 부분:

작업이 너무 많이 필요합니다. 접근성이 고려되지 않은 것처럼 보입니다.
이 위젯에 모두 포함되어 있으므로 많은 WAI-ARIA 및 JS 작업이 필요합니다. *
WCAG 2.0을 준수하도록 *를 시도하십시오.

FF6 / JAWS12를 사용한 30초 리뷰에서 가장 큰 문제는
구성 요소는 순서가 지정되지 않은 목록이 뒤에 오는 입력 유형=텍스트로 표시됩니다.
사용자가 탐색해야 하는 모든 옵션(국가의 경우 243개) 중
필드를 무시해도 됩니다.

처음에는 검색 텍스트 필드에 레이블을 사용할 수 있지만 쉽게 수정할 수 있습니다.

더 큰 문제는 생성된 목록 항목에 앵커가 없다는 것입니다... 목록 항목의 용도를 알고 있는 경우 스크린 리더 사용자가 조치를 취할 수 있습니까?

이것은 아주 좋은 플러그인입니다! 기능이 정말 마음에 듭니다.
더 나은 접근성을 위한 향후 개발이 있습니까? WAI-ARIA를 추가하여 WCAG 2.0을 준수하도록 하시겠습니까?

나는 filamentgroups의 웹사이트에서 이 기사를 읽었습니다. ARIA 역할은 선택된 사람에게 적합할 수 있습니다.
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

예를 들어, 선택된 결과 UL에는 role="menu" aria-activedescendant="active-menuitem"이 적용되고 <li> 결과에는 role="menuitem"이 있습니다.
선택됨 드롭다운의 검색 상자에도 일종의 ARIA 역할이 필요할 것입니다.

@dotdreaming 은 올바른 문서를 가리키고 있지만 언급한 역할은 정확하지 않습니다.

다음 역할을 사용해야 한다고 생각합니다.

• 콤보박스 .
• 옵션

누군가 WAI-ARIA 문서를 자세히 살펴보고 선택 항목에 적용하면 정말 멋질 것 같아요.

시간을 찾을 수 있다면 직접 할 수 있습니다. 하기가 그리 어렵지 않을 것 같습니다.

이 프로젝트에 ARIA를 참여시키는 움직임이 있습니까?

보조 기술과 함께 작동하더라도 키보드 전용 사용자에게도 작동하는지 테스트해야 합니다.

Btw, 이것은 접근성 개선을 위해 낮은 매달린 과일을 확인하는 방법일 뿐이지만 WAVE는 정리해야 할 몇 가지 꽤 기본적인 사항을 식별했습니다 -> http://wave.webaim.org/report?url=http%3A% 2F%2Fharvesthq.github.com%2Fchosen%2F&js=2

이러한 접근성 문제가 해결되었습니까? 나는 우리의 주요 대학 사이트에서 이것을 사용하고 싶지만 이러한 접근성 문제가 나를 미루고 있습니다.

+1 - 선택 드롭다운 목록을 사용하기 어렵고 옵션을 선택하는 데 어려움이 있다는 시각 장애인 사용자로부터 피드백을 받았습니다. 그들은 JAWS 14를 스크린 리더로 사용하고 있습니다.

탐색용으로만 키보드를 사용하여 시도했습니다. 항목 선택은 매우 훌륭하고 직관적으로 작동합니다(아래로 새 항목 목록을 열려면 위/아래로, 목록을 탐색하려면 위/아래로, 목록을 닫으려면 esc, 선택하려면 Enter). 다중 선택에서 항목을 제거하는 것은 간단했지만(백스페이스) 단일 선택 드롭다운을 지우는 것은 더 많은 문제를 야기했습니다. 항목을 선택한 후 아래로 눌러 목록을 다시 연 다음 아무 옵션도 선택하지 않을 때까지 위로 이동할 수 있는 것처럼 보이지만(예제와 같이 첫 번째 항목이 비어 있는 경우 일반 드롭다운이 작동함) Enter 키를 눌러 null 옵션을 선택할 수 없습니다. 옵션을 완전히 선택 취소하는 방법(또는 최소한 비어 있는 기본 옵션)은 매우 유용합니다.

또한 이것이 가치가 있는지 확실하지 않지만 데이터가 여전히 숨겨진 선택 컨트롤에 저장되어 있음을 알았습니다(이것이 양식으로 전달되는 방식이라고 가정합니다). 선택 항목도 변경될 때 선택 항목 드롭다운을 업데이트하는 것이 좋습니다. UA가 선택 제어와 프로그래밍 방식으로 상호 작용할 수 있고 선택 항목을 파사드로 취급할 수 있기 때문에 이것이 WCAG의 기준 4.1.2를 충족하는지 논의했습니다. 접근성을 위해 맨 위에 있습니다.

두 번째 부분에서는 선택한 업데이트를 프로그래밍 방식으로 변경하는 경우에도 listz:updated 를 트리거해야 합니다.
이것은 Chosen에게 값이 프로그래밍 방식으로 변경될 때 브라우저가 이벤트를 트리거하지 않기 때문에 필요합니다.

오늘은 접근성을 추가해 보려고 합니다. @marklagendijk ATM에 가는 가장 좋은 방법을 말씀하신 것 같아요. 내 발견에 대한 나쁜 업데이트.

이것은 도움이 될 수도 있고 그렇지 않을 수도 있지만 우리는 따라야 할 엄격한 접근성 지침이 있으며 버전 1.0.0에서는 클라이언트의 접근성 테스터가 다음 의견과 함께 돌아왔습니다.

1. '레이블'과 관련된 '선택'에는 표시가 없습니다. 그래서
   'label'이(가) 효과적으로 분리되었습니다. 'div class="chosen-container-single"'
   양식 컨트롤로서의 위치에는 프로그래밍 방식으로 액세스할 수 있는 이름이나 레이블이 없습니다.

2. 가짜 드롭다운에 눈에 띄는 초점이 없습니다.

1. 가짜 드롭다운 내의 링크에 눈에 띄는 초점이 없습니다.

Drupal Chosen 모듈과 함께 이것을 사용하고 있습니다. 또한 블라인드 테스터는 입력에 도달하면 입력할 수 있다는 사실을 알지 못했으며 "결과를 찾을 수 없음"을 포함하여 결과가 반환되지 않았다는 점에 주목했습니다.

@marklagendijk
이 문제에 대한 모든 진행 상황. Drupal 코어에 Chosen을 추가하는 문제를 다시 소개하려고 하며 이것이 주요 차단입니다.

여기에서 이것이 어떻게 수행되는지에 대한 정말 좋은 예를 찾았습니다.
http://cookiecrook.com/test/aria/multiselect/listbox.html
자바 스크립트는 다음과 같습니다. http://cookiecrook.com/test/aria/multiselect/js/aria.js

나는 이것이 기본적으로 선택된 기능에 거의 정확하게 매핑된다고 믿습니다. 목록 상자와 다중 선택 가능한 aria 속성을 사용하여 구현하는 것은 매우 간단해 보입니다.
http://www.w3.org/TR/wai-aria/roles#listbox
http://www.w3.org/TR/wai-aria/states_and_properties#aria - 다중 선택 가능

내가 직접 패치를 만들겠지만 js에서는 그렇게 인기가 없습니다.

위에 링크된 내 PR은 현재 선택된 코드베이스에서 완전히 액세스 가능한 위젯을 만드는 데 "깊이 다이빙"하는 대신 점진적 향상 원칙을 중심으로 하는 훨씬 간단한 접근 방식을 통해 솔루션을 제공합니다. 모든 피드백을 환영합니다.

여전히 IE8에서 제대로 지원되지 않는 ARIA에 집중하는 이유는 무엇입니까? 불행히도 이 5년 된 브라우저는 여전히 일반 브라우저 목록에 있습니다. 즉, 접근성 검사를 받는 동안 ARIA에 의존하는 구현이 실패합니다.

단순히 선택된 것을 모두 비활성화하고 사용자에게 원래 선택을 제공하는 대체 방법을 사용하지 않는 이유는 무엇입니까? 이것은 선택된 것을 비활성화하는 작은 자바스크립트 코드 조각을 사용하는 (숨겨진) 링크를 추가하여 달성할 수 있습니다.

IE8 ARIA 지원 관련 리소스 : http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html

브라우저/기능 감지를 수행하고 IE8을 사용할 때 선택을 사용하지 않을 수 있습니다.

@Daniel15 그것은 아마도 더 쉬운 수정 일 것입니다. 생각을 공유해 주셔서 감사합니다. 내 게시물에서 저는 ARIA를 구현하는 것이 (현재로서는) WCAG 2.0을 준수해야 하는 응용 프로그램에서 액세스할 수 있고 사용할 준비가 되어 있다는 것을 의미하지 않는다는 점을 지적하려고 했습니다.

이 작업을 보고 싶습니다. 스크린리더와 키보드 전용 사용자는 이 필드에 액세스해야 합니다. 나는 IE8에 그다지 관심이 없지만 적어도 최신 브라우저를 위한 솔루션은 허용될 것입니다. 나는 IE8 폴백 아이디어를 아주 좋아합니다. 두 개의 좋은 PR이 있는 것 같습니다. 둘 중 하나가 병합되는 것을 보고 싶습니다.

이것에 큰 +1을 주십시오

+1 (+) 우리는 이것을 선택해야 합니다. 문제야

aria-label(속성)

현재 요소에 레이블을 지정하는 문자열 값을 정의합니다. aria-labelledby도 참조하십시오.

aria-label의 목적은 aria-labelledby의 목적과 같습니다. 사용자에게 개체의 인식할 수 있는 이름을 제공합니다. 레이블에 대한 가장 일반적인 액세스 가능성 API 매핑은 액세스 가능한 이름 속성입니다.

레이블 텍스트가 화면에 표시되는 경우 작성자는 aria-labelledby를 사용해야 하고 aria-label을 사용하지 않아야 합니다(SHOULD NOT). 요소의 내용에서 프로그래밍 방식으로 요소의 이름을 결정할 수 없는 경우가 있을 수 있으며 가시적인 레이블을 제공하는 것이 원하는 사용자 경험이 아닌 경우가 있습니다. 대부분의 호스트 언어는 요소의 이름을 지정하는 데 사용할 수 있는 속성(예: HTML [HTML]의 title 속성)을 제공하지만 이는 브라우저 도구 설명을 표시할 수 있습니다. 보이는 레이블이나 보이는 툴팁이 바람직하지 않은 경우 작성자는 aria-label을 사용하여 요소의 액세스 가능한 이름을 설정할 수 있습니다(MAY). 사용자 에이전트는 접근 가능한 이름 속성을 계산할 때 aria-label보다 aria-labelledby를 우선시합니다.

@Natshah 변경 사항으로 pull 요청을 할 수 있습니까?

@Natshah 실제로 https://github.com/harvesthq/chosen/pull/2047 을 검토하여 올바른 방식으로 구현하는지 확인할 수 있습니까?

안녕,

이 링크에서 내 경우에 대해 해결했습니다.
https://www.drupal.org/node/2384865

감사 해요.

보상 :)

예. 다음 코드와 같아야 합니다. .

      if (this.is_multiple) {
        this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>');
      } else {
        this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'"  autocomplete="off" /></div><ul class="chosen-results"></ul></div>');
      }

그러나 우리는 이 코드를 사용할 수 있습니다:

        $(".views-exposed-widget").each(function( index, element ) {
           $(this).find('.form-type-select .chosen-container input').attr("aria-label" ,$.trim($(this).find('label').text()));
        });

감사 해요.

보상 :)

이에 대한 업데이트가 있습니까? 우리는 최근에 selected를 구현했고 보조 기술 "Jaws"를 사용하는 사용자로부터 선택 필드를 전혀 사용할 수 없다는 피드백을 받았습니다.

살펴봐야 할 중요한 문제인 것 같습니다. 이 부분에서 움직임이 있었나요?

내가 아는 것은 없지만 불행히도 브라우저 및 OS와 보조 기술의 방대한 조합을 감안할 때 문제를 복제하는 것은 매우 어렵습니다... 일반적으로 키보드 탐색이 가능하고 올바른 ARIA 구현이 있는 한 대부분의 경우 작동해야 합니다.

빠른 수정을 위해 스크린 리더가 최소한 원래 선택 필드를 사용할 수 있도록 했습니다. 이를 위해 select 요소를 숨기는 대신 생성된 선택된 컨테이너에 screenreaders-only 클래스와 aria-hidden:true 를 추가합니다.

따라서 chosen.jquery.js 행에서 599 to 605 다음과 같습니다.

container_props = {
        'class': container_classes.join(' '),
        'style': "width: " + (this.container_width()) + ";",
        'title': this.form_field.title,
        // hide widget for screen-readers
        'aria-hidden': 'true'
};

616 은 다음과 같습니다.

      // instead of hiding the original select field, adding the .sr-only class to keep it accessible for screen readers
      this.form_field_jq.addClass('sr-only').after(this.container);

숨겨진 선택과 위젯 모두 키보드 포커스가 가능하기 때문에 완벽한 솔루션은 아니지만 액세스할 수 없는 위젯이 있는 것보다 훨씬 낫습니다.

이것은 나를 위해 일했습니다.
위의 모든 조언을 따랐고 다음 줄을 변경했습니다.

this.container.bind('mousedown.chosen', function(evt)   // around line 630

에게:

this.container.bind('mousedown.chosen keydown.chosen', function(evt)

감사 해요

작동하는지 시도하십시오. 구조는 이러해야 합니다. :)

@kirstenmalin 이 수행한 작업을 기반으로 몇 가지 ARIA 요소를 추가했습니다. 그 작업은 A11Y를 향한 좋은 추진력이었지만 내가 추가한 몇 가지 항목이 누락되었습니다.

여기 에 다음을 수행하는

ARIA 레이블 및 기타 유용한 속성

• 검색 입력 상자에 다음 aria 요소를 추가합니다.
  
  
  
  • 역할="콤보박스"
  
  
  • 사용자가 입력하여 옵션을 선택하거나 목록에 새 요소를 추가할 수 있음을 나타내는 데 사용됩니다.
  
  
  • aria-haspopup (콤보박스 역할을 사용할 때 암시적)
  
  
  • 이 상자에 관련 메뉴가 있음을 나타내는 데 사용됩니다.
  
  
  • 아리아 확장
  
  
  • 콤보 상자를 사용할 때 필요하며 결과 목록이 표시되거나 숨겨져 있음을 나타냅니다.
  
  
  • 선택한 필드가 활성화/비활성화되면 상태를 동적으로 업데이트해야 합니다.
  
  
  • aria-activedescendant="id_of_highlighted_option"
  
  
  • 현재 선택한 값이 어떤 옵션인지 나타내는 데 사용됩니다.
  
  
  • 새 옵션이 선택되면 업데이트해야 합니다.
  
  
  • aria-owns="id_of_list_of_options"
  
  
  • 이 검색 상자와 관련된 선택 목록을 나타냅니다.
  
  
  • aria-autocomplete="목록"
  
  
  • "저자가 콤보 상자의 aria-autocomplete 값을 'list'로 설정하면 사용자 에이전트는 콤보 상자에 포커스가 있는 동안 콤보 상자의 aria-activedescendant 속성에 대한 변경 사항을 노출해야 합니다. 예를 들어, 새로운 활성 자손 요소의 대체 텍스트를 말함으로써 보조 기술이 해당 변경 사항을 사용자에게 경고해야 합니다(SHOULD). 작성자는 aria-owns를 사용하여 콤보 상자 텍스트 필드를 해당 목록 상자와 연결해야 합니다(SHOULD)."
  
  
  • aria-labeledby="id_of_field_label"
  
  
  • 이것은 선택한 양식 레이블 요소의 ID입니다.
  
  
• 옵션 목록에 다음 속성을 추가합니다.
  
  
  
  • ID
  
  
  • 검색 입력 상자의 aria-owns 속성이 대상으로 하는 양식 필드 ID를 기반으로 하는 단순 ID
  
  
  • 역할="목록 상자"
  
  
  • "사용자가 선택 목록에서 하나 이상의 항목을 선택할 수 있게 해주는 위젯."
  
  
• 옵션 목록의 각 개별 옵션에 다음 속성을 추가합니다.
  
  
  
  • ID
  
  
  • 목록의 옵션 인덱스와 현재 선택된 요소를 나타내는 aria-activedescendant가 사용할 양식 필드 ID를 기반으로 하는 단순 ID
  
  
  • 역할="옵션"
  
  
  • 선택 목록에서 선택 가능한 항목입니다.
  
  
  • 아리아 바쁜
  
  
  • 이것이 필요한 이유는 Chosen이 필드에서 초기화될 때 필드가 처음 활성화될 때까지 옵션 목록을 작성하지 _하지 않기 때문입니다.
  
  
  • 이것은 접근성 문제를 찾는 스캐너뿐만 아니라 보조 기술의 문제입니다. 검색 상자(role="combobox")가 이제 목록 상자(aria-owns="id_of_list_of_options")를 소유한다고 표시하므로 목록 상자(결과 목록)는 _반드시_ 그 안에 옵션이 있거나 다음을 준수하기 위해 사용 중으로 표시되어야 합니다. 사양.
    
    
    
    
    
    • 나는 이것이 올바른 움직임인지 100% 확신하지도 못합니다. 그것은 확실히 스캐너가 필드에 플래그를 지정하는 것을 방지하지만, 이것들이 완전히 바쁜 것은 아니며, 아직 옵션을 구축하지 않았을 뿐입니다.
    
    
    
  
  
  • 나는 A11Y 경험이 더 많은 사람이 이것에 무게를 둘 수 있기를 바랍니다.
  
  
  • 또한 필드가 처음 활성화될 때 결과 목록을 작성하는 것과 관련된 보다 급진적인 접근 방식을 고려했지만 여기에는 Chosen에 새 트리거를 추가하는 것이 포함됩니다.
    
    
    
    
    
    • 이 트리거는 기본적으로 검색 결과를 구축하는 winnow_results 메서드에 대한 전달이었지만(여전히 숨겨져 있음) 스캐너를 만족스럽게 만들었습니다.
    
    
    
  
  

상태 관리

• aria-expanded 속성 관리
  
  
  
  • 검색 결과가 보조 기술과 관련되어야 하는 시기를 나타내기 위해 필드가 활성화/비활성화될 때 aria-expanded 속성을 토글해야 합니다.
  
  
  • 이를 수행하는 가장 쉬운 방법(AFAIK)은 close_field 및 activate_field 메서드 중에 속성을 조정하는 것입니다.
  
  
  • 이러한 각 메서드에서 true에서 false로 또는 false에서 true로의 간단한 전환은 상태를 업데이트된 상태로 유지하기에 충분합니다.
  
  

여러 프로젝트에서 이 버전을 사용하기 시작할 예정이며 A11Y 보기에서 프로젝트를 더 자세히 살펴봄에 따라 변경 사항으로 분기를 계속 업데이트할 것입니다.

여기까지 읽어주신 모든 분들께 감사드리며, 내용이 많다는 것을 알고 있으며 피드백이 있으면 알려주세요! 나는 이것을 가능한 한 멀리 밀어내고 싶다.

@cooperfellows 변경 사항이 포함된 풀 리퀘스트를 열어주세요

@stof 완료, 하지만 내가 말했듯이 나는 A11Y 전문가가 아니며 더 많은 테스트를 할 계획입니다. 나는 이것에 대한 나의 첫 번째 안정적인 패스에 대해 공유하고 싶었습니다.

이에 대한 "공식" 업데이트가 있습니까? @cooperfellows의 노력에 따라 변경된 사항이 있습니까?

내가 묻는 이유는 위젯을 사용할 수 없다고 보고하는 Jaws 사용자의 수가 증가하고 있어 보고 있는 양식을 사용할 수 없게 효과적으로 렌더링하기 때문입니다.

우리는 복제할 수 있습니다. 도움이 된다면 기꺼이 지원/공유할 수 있습니까?

pull 요청이 이루어졌지만(사실 이후 해결된 몇 가지 사소한 문제가 있음) 아직 아무 일도 일어나지 않았습니다. 지금 프로덕션에서 사용하고 있는 브랜치는 다음과 같습니다.

• https://github.com/cooperfellows/chosen/tree/a11y-updates

그래도 다른 피드백을 원합니다. Jaws가 없기 때문에 다양한 온라인 도구의 감사에 의존하고 있습니다.

따라서 해당 분기는 기본적으로 현재 프로덕션에 변경 사항을 더한 것입니까, 아니면 최근 변경 사항이 아직 병합되지 않은 이전 버전입니까?

(BTW 감사합니다)

네, 맞습니다 @wcndave. PR은 실제로 검토를 위해 다른 눈을 사용할 수 있지만.

@cooperfellows 기존에 선택한 구현을 WCAG 2를 충족해야 하는 새 빌드로 이식해야 하므로 접근성 테스트를 지원하게 되어 기쁩니다.

풀 리퀘스트에 대한 업데이트가 있습니까?

어리석은 질문 - 다운로드할 수 있는 컴파일된 JavaScript 버전이 있습니까?
아니면 커피스크립트를 설치하고 직접 컴파일해야 합니까?

@KITSKevinBonett 도와주셔서 감사합니다!

첨부 파일은 압축 및 비압축 모두에서 jquery 및 proto 유형 버전의 zip입니다.

컴파일된-a11y-chosen-jquery-proto.zip

@cooperfellows 빨랐습니다 . 우리 프로젝트에 추가하고 몇 가지 테스트를 수행하고 알려 드리겠습니다 ...

@KITSKevinBonett Ya, A11Y 전문가가 아니기 때문에 좀 더 지켜보고 싶습니다. 따라서 어떤 피드백(가혹하고 긍정적인)도 높이 평가됩니다.

안녕하세요 @cooperfellows - 귀하의 구현을 검토했습니다 - 정말 좋습니다.

스크린 리더/브라우저 비호환성으로 인해 (쉽게) 해결되지 않을 수 있는 몇 가지 문제가 있습니다.

나는 첨부 파일에 나의 발견을 문서화했습니다. 나는 당신이 유용하기를 바라는 1 또는 2개의 사소한 권장 사항을 만들었습니다.

_업데이트_

1. 내 의견 중 일부는 우리 구현에 국한된 기능에 대해 언급했습니다. 저는 이러한 기능을 제거했습니다.
2. "combobox" 내부에 입력하고 Enter 키를 누르는 문제 - 양식 제출이 활성화되지 않음 - 다시 말하지만 이것은 로컬 구현 문제입니다.
3. 아래 ZIP은 (1)과 (2)를 제거하도록 업데이트되었습니다.

aria-chosen-plugin.zip

안녕하세요 @cooperfellows - 내 감사가 의미가 있었습니까?

안녕하세요 @KITSKevinBonett 저는 일주일 동안 휴가를

@KITSKevinBonett 감사 감사합니다. 이것은 꽤 철저한 것 같습니다. 나는 당신이 그들을 배치한 감사의 섹션을 기반으로 내 생각을 세분화했습니다.

플러그인에 의해 생성된 HTML 마크업

• 여기에 피드백이 있습니까? 아니면 생성된 것을 보여주고 있습니까?

키보드 전용 동작

• "하지만 옵션을 선택하면 다시 탭할 때 키보드 포커스가 사라집니다."
  
  
  
  • 해당 요소가 표시/숨김으로 설정될 때 aria-hidden 속성을 켜고 끄면 이 문제가 해결될 수 있다고 생각합니다.
  
  
  • 이 접근 방식을 살펴볼 것입니다.
  
  
• "CSS 비활성화 문제"
  
  
  
  • 표준 선택이 보입니다.
  
  
  • 나는 이것을 다시 만들 수 없습니다. 스크린샷이나 스크린 캐스트 등을 줄 수 있습니까?
  
  
  • 키보드로 결과를 강조 표시할 때 표시되는 신호가 없습니다.
  
  
  • 현재 강조 표시된 항목의 텍스트를 <em> 태그로 래핑할 수 있습니다. 이 태그는 기울임꼴로 표시됩니다(적어도 Chrome에서는).
    
    
    
    
    
    • 여기서 잠재적인 문제는 검색에서 <em> 를 사용하여 텍스트 일치를 나타내기 때문에 이들이 서로 충돌할 가능성이 있다는 점입니다.
    
    
    
  
  

스크린 리더

• 저는 JAWS에 액세스할 수 없으므로 여기서 많은 작업을 수행할 수 없습니다. 내가 찾을 수 있는 것을 보기 위해 시간이 더 있을 때 시험판을 가동할 것입니다.
• 스크린 리더는 더 많은 도움을 주시면 감사하겠습니다. 자세한 분석에 감사드립니다.

아리아 생각

• 언급했듯이 haspopup 속성을 제거할 수 있습니다. 중복됩니다.
• aria-busy를 추가한 이유는 기본적으로 Chosen은 포커스가 배치될 때까지 숨겨진 div에 목록 요소를 생성하지 않기 때문입니다.
  
  
  
  • 즉, role="listbox" 요소에는 기본적으로 옵션이 없으므로 도구로 이를 스캔할 때 문제가 발생했습니다. 시작 부분에 aria-busy 요소를 추가하면 해당 도구에서 무시됩니다.
  
  
  • 문제의 이유는 목록 상자 요소가 _소유해야 하는_ 옵션 요소( source ) 때문입니다.
  
  
  • 목록이 채워질 때 처음으로 제거되기 때문에 나에게는 무해하고 파울이 없는 상황처럼 보였습니다.
  
  
• aria-selected를 추가하는 것은 명백한 단계처럼 보입니다. 내가 그것을 놓쳤다는 것이 믿기지 않습니다. 잡아주셔서 감사합니다.
  * 마무리 생각 *
  이 감사를 위해 HTML을 직접 작성했습니까? 아니면 도구에서 작성한 것입니까? 너무 도움이 많이 되네요 다시한번 감사드립니다.

@cooperfellows - 귀하의 질문에 대한 답변:

HTML 마크업

• 플러그인 동작의 각 단계에서 생성된 것을 보여주기만 하면 됩니다.

키보드 동작

• "초점 상실"은 Firefox에만 있습니다. 포커스를 방지하기 위해 tabindex="-1" 을 추가한 다음 다시 제거할 수 있습니다. 그러면 ARIA가 필요하지 않습니다.

CSS 비활성화

• 기본적으로 원본 SELECT는 페이지에서 볼 수 있으며 UP | 기본 브라우저 동작은 탐색할 때 다양한 옵션을 표시하기 때문에 아래쪽 화살표입니다.
• 플러그인 렌더링 HTML도 표시되지만 드롭다운에는 강조 표시된 "옵션"이 표시되지 않습니다.
• EM 사용을 제안하셨습니다. 대신 STRONG을 사용하세요. HTML5의 EM보다 의미론적인 의미가 더 큽니다. http://html5doctor.com/ib-em-strong-element/ 참조
• 그러나 사용자가 여전히 SELECT를 사용할 수 있으므로 이것이 중요한 문제라고 생각하지 않습니다.
• 스크린샷 보기

스크린 리더

• 사용 중인 브라우저와 화면 판독기의 조합과 버전에 따라 결과가 다르기 때문에 어려운 작업입니다.
• 내가 말하고 싶은 것은 ARIA 역할/상태/속성 측면에서 플러그인에 대한 접근성 업데이트가 W3C/WAI 권장 사항과 일치한다는 것입니다. 좋은 소식입니다. :)
• 소프트웨어가 이를 준수하는지 확인하는 것은 브라우저 및 화면 판독기 제조업체에 달려 있습니다.

아리아

• "aria-busy"에 대한 설명이 이해가 됩니다. 그것이 더 이상 사용되지 않더라도 문제를 일으키지 않을 것입니다.
• HTML을 감사합니다. 손으로 만든. 나는 내가 일하는 회사를 위해 UI 구성 요소 라이브러리 / 생활 스타일 가이드를 구축하고 있으므로 거기에서 구성 요소를 사용했습니다. 전혀 오래 걸리지 않았습니다. 가장 어려운 부분은 내가 모든 것을 올바르게 캡처했는지 확인하기 위해 모든 스크린 리더 출력을 다시 듣는 것이었습니다.

이 모든 것이 풀 리퀘스트에 도움이 되기를 바랍니다. 당신은 A11Y로 훌륭한 일을 해냈습니다. :)

안녕하세요,

저는 장님입니다. @cooperfellows 의 JAWS 작업을 테스트

이것을 마스터에 병합한다는 소식이 있습니까?

일상 업무에서 개발자가 최근 자동 완성 콤보 상자에 "선택"을 사용하기로 결정한 MISP(Malware Information Sharing Platform - https://github.com/MISP/MISP)를 사용합니다. 그것은 나에게 악몽이 되었다.

당신의 도움에 미리 감사드립니다.

몇 가지 테스트를 거친 후 위에 게시된(2016년 7월 1일) 컴파일된 버전(.zip 아카이브)이 작동하는지 확인할 수 있습니다.

그러나, 나는 @cooperfellows의 지점을, 또는 내가 @cooperfellows 복제 할 때 '할 때의 지점을 다음 harvesthq / 마스터와 병합 메뉴 옵션이 제대로 JAWS들이 사용되지만이 양식을 제출하지 않는 키를 누릅니다.

@obert01님 , 안녕하세요. JAWS를 사용하여 이것을 살펴주셔서 정말 감사합니다. 작업하는 동안 놓치고 있던 큰 부분이었습니다.

이 브랜치는 현재 수확/마스터 브랜치보다 오래되었습니다. 작업 상태로 되돌리려면 변경 사항 을 검토하고 조정 해야 할 것입니다.

월말이 되기 전에 이 작업을 수행하려고 노력할 것입니다. 저는 지금 직장에서 꽤 백업을 받고 있습니다.

업데이트되면 기여자 중 한 명이 다시 눈을 뜨게 하고 싶습니다. 따라서 업데이트가 완료되면 @stof (2016년 초기

정말 감사합니다.

참고로 Internet Explorer 11, Google Chrome, Firefox ESR, Firefox Standard, Microsoft Edge 브라우저에서 JAWS 및 NVDA 화면 판독기의 모든 조합으로 테스트할 수 있습니다.

이에 대한 진전이 있습니까?

유감스럽게도 제 일상 업무는 이러한 접근성 부족으로 인해 어려움을 겪고 있습니다.

또한 접근성 지원을 추가하면 점점 더 많은 국가에서 규제가 이러한 방식으로 진행되기 때문에 Chosen을 공공 부문/행정 웹사이트에서 사용할 수 있습니다.

감사합니다

안녕,
선택한 응용 프로그램이 있고 이제 접근성을 지원해야 하지만 이를 통해 내가 볼 수 있는 것은 이것이 아직 병합되지 않았다는 것입니다. @cooperfellows 가 이것을 마무리하고 병합할 수 있다면 정말 도움이 될 것입니다.

안녕하세요 @obert01 및 @csmuthukuda ,

최신 버전의 Chosen으로 PR을 업데이트했습니다. 여기를 살펴보세요.
https://github.com/harvesthq/chosen/pull/2596

내 분기된 저장소의 복사본을 얻고 끝에서 테스트할 수 있습니다. 실제 피드백을 받고 싶습니다.

모든 TravisCI 검사를 통과했지만 A11Y 문제는 다루지 않는다고 생각합니다. 당신이 무슨 생각을하는지 제게 알려주세요.

안녕하세요 @cooperfellows 입니다 .
이를 유지하기 위해 많은 노력을 해주셔서 감사합니다. 나는 이것을 테스트하고 이에 대한 피드백을 알려 드리겠습니다. 나는 소유자가 이것을 마스터에 병합하는 것을 고려하기를 정말로 바랍니다. 이것은 이제 필수 요구 사항입니다.

@csmuthukuda 감사합니다.

@pfiller @stof @tjschuck @koenpunt , 이것을 보기 위해 내가 할 수 있는 일은 무엇입니까? 정말 놀라운 시스템에 빠진 부분입니다.

안녕하세요 @cooperfellows 입니다 .

최신 웹 브라우저와 JAWS 및 NVDA 화면 판독기로 귀하의 멋진 작업을 테스트했습니다. 고맙습니다 !

키보드로 옵션을 화살표로 이동하는 것은 잘 작동합니다. 음성 및 점자 피드백은 완벽합니다. 즉, 모든 ARIA 속성이 잘 정의되어 있습니다. 그러나 Enter 키를 눌러 옵션을 선택하면 아무 일도 일어나지 않습니다. 저는 JavaScript에 대한 경험이 충분하지 않아 문제가 Chosen에서 발생했는지 또는 이를 사용하는 애플리케이션에 문제가 있는지 판단할 수 없습니다.

재현하려면 키보드만 사용하여 선택된 콤보 상자에서 옵션을 선택하십시오. 콤보 상자에 초점을 맞추려면 TAB, 목록을 탐색하려면 화살표 키, 선택하려면 Enter 키를 누르십시오.

다시 한 번 진심으로 감사드립니다.

@overt01 정보 감사합니다. 나는 내가 찾을 수 있는 것을 찾아볼 것이다.

@obert01 이 JS 바이올린을 사용하여 작동하는지/작동하지 않는지 확인할 수 있습니까? 이 바이올린은 내 최신 커밋의 컴파일된 jQuery 버전을 로드합니다.

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

내 키보드(Chrome 최신 버전)를 사용하여 해당 드롭다운을 탐색할 수 있지만 스크린 리더를 실행하고 있지 않습니다.

당신이 무슨 생각을하는지 제게 알려주세요.

안녕하세요 @cooperfellows 입니다 .

JS Fiddle에는 문제가 없습니다. 따라서 문제는 MISP(https://www.misp-project.org/)에서 Chosen이 사용되는 방식 때문이라고 생각합니다.

MISP 프로젝트 팀과 함께 확인하겠습니다.

감사 해요

@overt01 감사합니다. 당신이 알아낸 것을 저에게 알려주십시오. 그것은 Chosen의 특정 설정과의 비호환성을 가리킬 수 있으므로 MISP가 그것을 어떻게 활용하는지 볼 수 있는 방법이 있다면 그들의 구현을 살펴보려고 노력할 수 있습니다.

어딘가에 공개적으로 선택되어 사용됩니까?

@cooperfellows 빌드 방법을 모르는 최신 변경 사항이 포함된 새 빌드를

@obert01 @cooperfellows 방금 NVDA로 Fiddle을 시도했는데 키보드 탐색이 완벽하게 작동하는 것 같습니다(ENTER 키로 선택 포함). 그러나 위쪽 및 아래쪽 화살표 키를 사용하여 탐색할 때 화면 판독기는 "________ 선택되지 않음", 즉 "버뮤다 선택되지 않음"으로 읽습니다. 이것이 예상된 동작입니까?

@woenlee와 같은 문제가 있습니다. 그렇게 해롭지는 않습니다. 그러나 아마도 선택된 항목에 "selected" 속성이 설정되는 방식을 확인해야 합니다.

목록 항목을 "입력" 및 "종료"할 때 예상되는 동작은 무엇입니까? 언제
새로 선택한 항목을 읽어야 하는 경우 새 항목으로 이동합니다.
안건? 더 이상 선택되지 않은 항목도 표시합니까? @obert01 @woenlee

2019년 8월 25일 일요일 오후 12:18 Olivier BERT [email protected]
썼다:

@woenlee https://github.com/woenlee 와 같은 문제가
너무 해롭다. 하지만 아마도 "selected" 속성이
선택한 항목을 확인해야 합니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFVEXG43VMVBW63LN
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
.

--
~쿠퍼

@cooperfellows 도끼 접근성 테스트를 실행한 후 PR에서 버그를 찾은 것 같습니다. 버그가 왜 그렇게 했는지 설명합니다. Abstract-chosen.coffee의 342행에서 입력에는 "combobox"와 "listbox"라는 두 가지 역할이 할당되어 있습니다.

<input class="chosen-search-input" type="text" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" autocomplete="off" role="listbox" /> </div> <ul class="chosen-results"></ul>

준 후

여기에서 Harvest의 고객에게 비용을 지불하고 내부적으로 액세스할 수 있도록 테스트하는 데 문제가 발생했습니다. 접근성은 필수이며 Harvest의 유지 관리자가 조만간 이에 대한 지원을 표시하지 않는 경우 이 문제가 해결되지 않으면 Harvest에서 물러날 것입니다.

@obert01 이 JS 바이올린을 사용하여 작동하는지/작동하지 않는지 확인할 수 있습니까? 이 바이올린은 내 최신 커밋의 컴파일된 jQuery 버전을 로드합니다.

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

내 키보드(Chrome 최신 버전)를 사용하여 해당 드롭다운을 탐색할 수 있지만 스크린 리더를 실행하고 있지 않습니다.

당신이 무슨 생각을하는지 제게 알려주세요.

@cooperfellows
저는 이 JS Fiddle을 JAWS 2019로 테스트하고 있었고 위쪽 및 아래쪽 화살표 키로 옵션을 탐색할 때 약간 다른 것을 경험했습니다.
Google 크롬 71.0.3578.98:
JAWS는 목록이 일부 스크롤/렌더링을 수행하지 않는 한 현재 강조 표시된 값을 읽지 않습니다. 즉, 목록이 표시되는 경우

<option selected="selected" value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>

9개 옵션, JAWS는 10번째 옵션에 도달할 때까지 아래로 누를 때 강조 표시된 옵션을 읽지 않습니다.앤티가 바부다 . 상자는 Antigua and Barbuda를 강조 표시하기 위해 약간의 자동 스크롤을 수행한 다음 옵션을 읽습니다.

IE 11.0.9600.19463에서: 화살표 키로 탐색하면 현재 강조 표시된 옵션이 위아래로 올바르게 이동하는 것으로 읽는 것 같습니다. 일종의 렌더가 필요하지 않습니다.

다른 사람이 이것을 경험했는지 알고 싶습니다. @obert01 @woenlee

안녕하세요. 작업에 감사드립니다.

불행히도 이것은 제대로 작동하지 않습니다. 사용하는 브라우저나 화면 판독기의 기능에서 동작이 변경되기 때문에 설명하기가 매우 어렵습니다.

일부 aria 속성이 없거나 업데이트되지 않은 것 같습니다. 여기서 내가 만나는 일반적인 문제는 다음과 같습니다.

• 스크롤 문제: 아래로 화살표를 누르고 보이는 항목 목록의 끝에 도달하면 아래로 화살표를 두 번 눌러 다음 항목에 초점을 맞춰야 합니다.
• ENTER를 눌러 항목을 선택하면 포커스가 해제되지 않습니다. 예상되는 동작은 화면 판독기가 빠른 탐색 모드로 돌아가서 내가 웹 페이지의 나머지 부분을 읽을 수 있도록 하는 것입니다. 대신 화살표 키가 목록에서 내 선택을 제어하고 있습니다.
• 현재 스크립트는 제안이 표시되는지 여부와 제안이 몇 개인지 알 수 없습니다. 내가 아는 대부분의 액세스 가능한 선택 플러그인에서 JAWS/NVDA는 텍스트 입력에 입력된 문자열과 일치하는 결과의 수를 발표합니다.
• 마지막으로 목록이 축소 또는 확장되었는지 JAWS가 이해하지 못한다는 인상을 받았습니다. 때때로 ENTER로 선택하고 페이지의 나머지 부분을 읽으려고 시도한 후에도 JAWS는 표시된 최신 제안을 계속 읽습니다.

좋은 점:

• 자동 완성 부분이 잘 작동합니다. "fra"를 입력하면 JAWS가 "France"를 발음하고 ENTER를 눌러 선택할 수 있습니다.
• 목록에서 화살표로 표시된 대로 항목을 올바르게 읽습니다.

저는 불행히도 ARIA, JavaScript 및 웹 전반에 관해 많은 것을 알지 못합니다. ARIA 속성의 최대값이 올바르게 설정되고 업데이트되었는지 확인하는 것이 좋습니다.

아래에서 스크린 리더와 완벽하게 상호 작용하는 JQuery 플러그인의 데모 및 코드를 찾으십시오.
https://a11y.nicolas-hoffmann.net/autocomplete-list/

더 많은 도움을 드리지 못해 죄송합니다.

주저하지 말고 작업에 대한 새로운 데모를 게시하십시오. 나는 당신을 위해 테스트하게되어 기쁩니다.