Chosen: Chosenのアクセシビリティの問題

その議論からの関連部分：

あまりにも多くの作業が必要です。 アクセシビリティが考慮されていないように見えます
すべてこのウィジェットに含まれているため、*には多くのWAI-ARIAとJSの作業が必要になります。
*これをWCAG2.0に準拠させようとします。

FF6 / JAWS12での30秒のレビューからの最大の問題は、
コンポーネントは、入力タイプ=テキストとそれに続く順序なしリストとして表されます
ユーザーが過去にナビゲートする必要があるすべてのオプション（国の場合は243）の
フィールドを無視することさえできます。

検索テキストフィールドには、初心者向けのラベルを使用できますが、修正は簡単です。

より大きな問題は、生成されたリストアイテムにアンカーが含まれていないことです...スクリーンリーダーのユーザーは、リストアイテムの目的を知っている場合、アクションを実行できますか？

これはとても素敵なプラグインです！ 私はその機能が本当に好きです。
より良いアクセシビリティへの将来の発展はありますか？ WAI-ARIAを追加してWCAG2.0に準拠させる???

thefilamentsgroupsのウェブサイトでこの記事を読んだばかりです。 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をこのプロジェクトに参加させる動きはありますか？

支援技術で動作する場合でも、キーボードのみのユーザーでも動作することを確認するためにテストする必要があります。

ところで、これはアクセシビリティの改善のためにぶら下がっている果物をチェックするための単なる方法ですが、WAVEはクリーンアップする必要があるいくつかのかなり基本的なことを特定しました-> http://wave.webaim.org/report?url=http%3A% 2F％2Fharvesthq.github.com％2Fchosen％2F＆js = 2

これらのアクセシビリティの問題のいずれかが対処されましたか？ 私は大学のメインサイトでこれを使用するのが本当に好きですが、これらのアクセシビリティの問題は私を先延ばしにしました

+ 1-目の不自由なユーザーから、選択したドロップダウンリストは使いにくく、オプションの選択に問題があるというフィードバックを受け取りました。 彼らはスクリーンリーダーとしてJAWS14を使用しています。

ナビゲーション専用のキーボードを使用してみました。 アイテムの選択は非常に直感的に機能します（下に移動して新しいアイテムのリストを開き、上/下に移動してリストをナビゲートし、escでリストを閉じ、Enterキーを押して選択します）。 複数選択からアイテムを削除するのは簡単でしたが（バックスペース）、単一選択のドロップダウンをクリアすると、さらに多くの課題が発生しました。 アイテムを選択したら、下を押してリストを再度開き、オプションが選択されなくなるまで上に移動できるように見えます（例のように最初のアイテムが空白の場合は通常のドロップダウンが機能します）が、私はEnterキーを押してnullオプションを選択できません。 オプションを完全に（または少なくとも空白のデフォルトオプション）選択解除するためのいくつかの方法は非常に便利です。

また、これが価値があるかどうかはわかりませんが、データがまだ非表示の選択コントロールに保存されていることに気付きました（これがフォームに渡される方法だと思います）。 選択が変更されたときに選択されたドロップダウンを更新することも価値があるかもしれません-UAはプログラムで選択コントロールと対話でき、選択されたものをファサードとして扱うことができるので、これがWCAGの基準4.1.2を満たすかどうかを議論していましたアクセシビリティの目的のためにそれの上に。

2番目の部分では、選択したコントロールの値をプログラムで変更して選択したものを更新する場合でも、 listz:updatedをトリガーする必要があります。
これが必要なのは、Chosenに通知するために値がプログラムで変更されたときにブラウザーがイベントをトリガーしないためです（プログラムで変更しているため、ブラウザーはイベントをトリガーしていましたが、無限ループを回避する必要があります）。

今日はアクセシビリティの追加について検討します。 @marklagendijkあなたが

これは役立つかもしれませんが、そうではないかもしれませんが、従うべき厳格なアクセシビリティガイドラインがあり、バージョン1.0.0では、クライアントのアクセシビリティテスターが次のコメントを返しました。

1. 「ラベル」に関連付けられた「選択」には、次のように表示されます。 だから
   「ラベル」は事実上孤立しています。 'div class = "chosen-container-single"'
   フォームコントロールとしての場所には、プログラムでアクセス可能な名前やラベルがありません。

2.フェイクドロップダウンに目に見える焦点はありません。

1. 偽のドロップダウン内のリンクに目に見える焦点はありません。

私はこれをDrupalChosenモジュールと組み合わせて使用​​しています。 また、入力に到達すると、入力できることに気づかず、「結果が見つかりません」などの結果が返されないことに気付いた視覚障害者のテスターもいます。

@marklagendijk
この問題に関する進捗状況。 DrupalコアにChosenを追加するために、この問題を再導入することを検討しています。これがメインのブロッカーです。

私はこれがどのようにここで行われることができるかについての本当に良い例を見つけました：
http://cookiecrook.com/test/aria/multiselect/listbox.html
これがjavascriptです： http ：

これは、選択した基本的な機能にほぼ正確に対応していると思います。リストボックスと複数選択可能なariaプロパティを使用して実装するのは非常に簡単に見えます。
http://www.w3.org/TR/wai-aria/roles#listbox
http://www.w3.org/TR/wai-aria/states_and_properties#aria -multiselectable

自分でパッチを作成しますが、jsはそれほど熱心ではありません。

上にリンクされている私のPRは、現在選択されているコードベースから完全にアクセス可能なウィジェットを作成するための「詳細」ではなく、プログレッシブエンハンスメントの原則を中心としたはるかに単純なアプローチによるソリューションを提供します。 あらゆるフィードバックを歓迎します。

IE8でまだ適切にサポートされていないのに、なぜARIAに焦点を合わせるのですか？ 残念ながら、この5年前のブラウザは、まだ一般的なブラウザのリストに含まれています。 これは、アクセシビリティスキャンを実行している間、ARIAに依存する実装が失敗することを意味します。

選択をすべて無効にし、ユーザーに元の選択を提供するフォールバックメソッドを使用してみませんか？ これは、選択を無効にする小さなJavaScriptコードを使用する（非表示の）リンクを追加することで実現できます。

IE8 ARIAサポートに関するリソース： http ：

IE8が使用されている場合は、ブラウザー/機能の検出を行うだけで、Chosenを使用できません。

@ Daniel15それはおそらくもっと簡単な修正でしょう。 あなたの考えを共有してくれてありがとう。 私の投稿では、ARIAの実装（今のところ）は、WCAG 2.0に準拠する必要のあるアプリケーションでアクセス可能であり、すぐに使用できることを意味するものではないことを指摘しようとしていました。

これが機能するのを見たいです。 スクリーンリーダーとキーボードのみのユーザーは、実際にこれらのフィールドにアクセスする必要があります。 私はIE8にはあまり関心がありませんが、少なくとも最新のブラウザー向けのソリューションは受け入れられます。 私はIE8フォールバックのアイデアがとても好きです。 2つの優れたPRがあるようです-どちらかがマージされるのを見てみたいです。

これに大きな+1をお願いします

+1（+）これはChosenにある必要があります。 それは問題です

aria-label（プロパティ）

現在の要素にラベルを付ける文字列値を定義します。 aria-labelledbyも参照してください。

aria-labelの目的は、aria-labelledbyの目的と同じです。 これは、オブジェクトの認識可能な名前をユーザーに提供します。 ラベルの最も一般的なアクセシビリティAPIマッピングは、アクセシブル名プロパティです。

ラベルテキストが画面に表示されている場合、作成者はaria-labelledbyを使用する必要があり、aria-labelを使用しないでください。 要素の名前を要素のコンテンツからプログラムで決定できない場合や、表示可能なラベルを提供することが望ましいユーザーエクスペリエンスではない場合があります。 ほとんどのホスト言語は、要素に名前を付けるために使用できる属性（たとえば、HTML [HTML]のtitle属性）を提供しますが、これはブラウザーのツールチップを提示する場合があります。 表示可能なラベルまたは表示可能なツールチップが望ましくない場合、作成者はaria-labelを使用して要素のアクセス可能な名前を設定できます（MAY）。 ユーザーエージェントは、アクセシブルなnameプロパティを計算するときに、aria-labelよりもaria-labelledbyを優先します。

@Natshah変更を加えてプルリクエストを実行できますか？

@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()));
        });

ありがとう。

やりがい:)

これに関する更新はありますか？ 最近、chooseを実装し、assistative technology "Jaws"を使用しているユーザーから、selectフィールドをまったく使用できないというフィードバックがありました。

調査すべき重要な問題のようです。 この面で何か動きはありましたか？

私が知っていることは何もありませんが、残念ながら、支援技術とブラウザや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要素を追加することに

私はここで次のことを行う

ARIAラベルおよびその他の役立つ属性

• 次のaria要素を検索入力ボックスに追加します
  
  
  
  • role = "combobox"
  
  
  • ユーザーが入力してオプションを選択したり、リストに新しい要素を追加したりできることを示すために使用されます
  
  
  • aria-haspopup （コンボボックスの役割を使用する場合は暗黙的）
  
  
  • このボックスに関連メニューがあることを示すために使用されます
  
  
  • aria-拡張
  
  
  • コンボボックスを使用する場合に必要で、結果リストが表示または非表示であることを示します
  
  
  • 選択したフィールドがアクティブ化/非アクティブ化されると、状態を動的に更新する必要があります
  
  
  • aria-activedescendant = "id_of_highlighted_option"
  
  
  • 現在選択されている値を示すために使用されます
  
  
  • 新しいオプションが選択されたら、これを更新する必要があります
  
  
  • aria-owns = "id_of_list_of_options"
  
  
  • この検索ボックスが関連する選択肢のリストを示します
  
  
  • aria-autocomplete = "list"
  
  
  • 「作成者がコンボボックスのaria-autocompleteの値を「list」に設定した場合、ユーザーエージェントはコンボボックスがフォーカスされたままでコンボボックスのaria-activedescendant属性への変更を公開する必要があります。コンボボックス中にaria-activedescendant属性への変更が発生した場合に焦点を当てた支援技術は、たとえば、新しいアクティブな子孫要素の代替テキストを話すことによって、その変更をユーザーに警告する必要があります。作成者は、aria-ownsを使用してコンボボックステキストフィールドをリストボックスに関連付ける必要があります。」
  
  
  • aria-labeledby = "id_of_field_label"
  
  
  • これは、選択されたフォームラベル要素が置き換えられるIDです。
  
  
• オプションのリストに次の属性を追加します
  
  
  
  • id
  
  
  • 検索入力ボックスのaria-owns属性の対象となるフォームフィールドIDに基づく単純なID
  
  
  • role = "listbox"
  
  
  • 「ユーザーが選択肢のリストから1つ以上のアイテムを選択できるようにするウィジェット。」
  
  
• オプションリストの個々のオプションに次の属性を追加します
  
  
  
  • id
  
  
  • リスト内のオプションのインデックスに基づく単純なIDと、現在選択されている要素を示すaria-activedescendantによって使用されるフォームフィールドID
  
  
  • role = "option"
  
  
  • 選択リスト内の選択可能なアイテム。
  
  
  • aria-忙しい
  
  
  • これが必要な理由は、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ユーザーの数が増えており、見ているフォームが使用不能になっていることを効果的に示しているためです。

私たちは複製することができます、それが助けになるなら例を支援/共有するのはとても幸せですか？

プルリクエストが行われましたが（事後に解決されたいくつかのマイナーな問題がありました）、まだ何も起こりませんでした。 私が現在本番環境で使用しているブランチは次のとおりです。

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

しかし、他のフィードバックが欲しいです。 私はJawsを持っていないので、さまざまなオンラインツールからの監査に依存しています。

つまり、そのブランチは基本的に現在の本番環境に変更を加えたものですか、それとも最近の変更がまだマージされていない以前のバージョンですか？

（ありがとうところで）

はい、そうです@wcndave。 PRは実際にレビューのために他の目を使うことができますが。

@cooperfellows WCAG 2を満たす必要がある新しいビルドに既存の選択された実装を移植する必要があるので、アクセシビリティテストを喜んで支援します。

プルリクエストの更新はありますか？

ばかげた質問-ダウンロードできるコンパイル済みのJavaScriptバージョンはありますか？
または、coffeescriptをインストールして自分でコンパイルする必要がありますか？

@KITSKevinBonett助けてくれてありがとう！

添付されているのは、圧縮および非圧縮の両方のjqueryおよびprotoタイプバージョンのzipです。

コンパイル済み-a11y-chosen-jquery-proto.zip

@cooperfellowsそれは速かった。 私たちのプロジェクトに追加し、いくつかのテストを行い、あなたに知らせます...

@KITSKevinBonett Ya、私はA11Yの専門家ではないので、もう少し目を向けたいと思っています。 したがって、フィードバック（過酷で前向きなもの）はありがたいです。

こんにちは@ cooperfellows-私はあなたの実装をレビューしました-確かにとても良いです。

スクリーンリーダーとブラウザの非互換性が原因で（簡単に）解決できない問題がいくつかあります。

添付のに私の発見を文書化しました。 私はあなたが役立つと思う1つか2つのマイナーな推薦をしました。

_アップデート_

1. 私のコメントのいくつかは、私たちの実装にローカルな機能について言及しました-私はこれらを削除しました。
2. 「コンボボックス」内に入力してEnterキーを押すと、フォームの送信がアクティブ化されないという問題が発生します。これも、ローカル実装の問題です。
3. 以下のZIPは、（1）と（2）を削除するように更新されました。

aria-chosen-plugin.zip

こんにちは@ cooperfellows-私の監査は理にかなっていますか？

こんにちは@KITSKevinBonett私は休暇で1週間不在でした。 他の仕事に追いついたらすぐに見ていきます。 フィードバックをありがとうございますが、それは役立つと確信しています。

@KITSKevinBonett監査に感謝します、これはかなり徹底的なようです。 あなたがそれらをレイアウトしたとき、私は監査のセクションに基づいて私の考えを分解しました。

プラグインによって生成されたHTMLマークアップ

• ここにフィードバックはありますか？ それとも、何が生成されるかを示しているだけですか？

キーボードのみの動作

• 「ただし、オプションを選択すると、キーボードのフォーカスが再びタブで失われます。」
  
  
  
  • これは、 aria-hidden属性のオンとオフを切り替えて、その要素を表示/非表示にすることで解決できると思いますか？
  
  
  • このアプローチを検討します。
  
  
• 「CSS無効の問題」
  
  
  
  • 標準選択が表示されます
  
  
  • これを再現することはできません。スクリーンショットやスクリーンキャストなどを教えていただけますか？
  
  
  • キーボードで結果を強調表示するときに、目に見える手がかりはありません。
  
  
  • 現在強調表示されているアイテムのテキストを<em>タグで囲むことができます。これは、イタリック体になっています（少なくともChromeでは）。
    
    
    
    
    
    • ここでの潜在的な問題は、検索でも<em>を使用してテキストの一致を示すことです。そのため、これらが互いに競合する可能性があるのではないかと心配しています。
    
    
    
  
  

スクリーンリーダー

• 私はJAWSにアクセスできないので、ここではあまり多くのことを行うことができません。 何が見つかるかを確認する時間ができたら、トライアルを開始します。
• スクリーンリーダーは、私がもっと助けてくれればと思う分野です。詳細な内訳に感謝します。

アリアの考え

• ご指摘のとおり、haspopup属性は冗長です。
• aria-busyを追加した理由は、デフォルトでは、フォーカスが配置されるまで、Chosenは非表示のdivにリスト要素を生成しないためです。
  
  
  
  • これは、role = "listbox"要素にはデフォルトでオプションがないことを意味し、ツールでこれをスキャンするときに問題が発生していました。 最初にaria-busy要素を追加することにより、これらのツールでは無視されます。
  
  
  • この問題の理由は、リストボックス要素がオプション要素（ソース）を_所有している必要がある_ということです。
  
  
  • リストが最初に入力されたときに削除されるので、私には無害でファウルのない状況のように見えました。
  
  
• 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 / masterとマージしたりすると、メニューオプションはJAWSによって適切に読み上げられますが、ENTERキーでフォームが送信されません。

こんにちは@ obert01 、JAWSを使用してこれを見てくれてありがとう、それは私の仕事中に欠けていた大きな部分でした。

このブランチは、現在のharvesthq / masterブランチからかなり古くなっています。動作状態に戻すには、変更を確認し

私は月末までにこれに到達しようとします、私は今仕事でかなりバックアップされています。

更新されたら、寄稿者の1人にもう一度注目してもらいたいので、更新し送信します。

どうもありがとう。

参考までに、次のブラウザーを使用して、JAWSとNVDAスクリーンリーダーのすべての組み合わせでテストできます：Internet Explorer 11、Google Chrome、Firefox ESR、Firefox Standard、MicrosoftEdge。

これについて何か進展はありますか？

申し訳ありませんが、私の日常業務はこのアクセシビリティの欠如に苦しんでいます。

さらに、アクセシビリティサポートを追加すると、ますます多くの国で規制がこのように行われているため、Chosenを公共部門/管理Webサイトで使用できるようになります。

ありがとう

こんにちは、
選択したアプリケーションがあり、アクセシビリティをサポートする必要がありますが、これを確認すると、まだマージされていないことがわかります。 @cooperfellowsがこれを完成させ、マージしてください。

こんにちは@ obert01と@csmuthukuda 、

選択した最新バージョンでPRを高速化するために更新を行いました。こちらをご覧ください：
https://github.com/harvesthq/chosen/pull/2596

私のフォークされたリポジトリのコピーを入手して、あなたの側でテストすることができます。 実生活でのフィードバックが欲しいです。

すべてのTravisCIチェックに合格しましたが、A11Yの問題をカバーしているとは思いません。 どう考えているか教えてください。

こんにちは@cooperfellows 、
これを存続させるためのあなたの献身に感謝します。 これをテストして、フィードバックをお知らせします。 オーナーがこれをマスターにマージすることを検討してくれることを本当に望んでいます。 これは現在必須の要件です。

ありがとう@csmuthukuda私はそれがマージされることを望んでいます....

@pfiller @stof @tjschuck @koenpunt 、これを見てもらうために私にできることはありますか？ それ以外の点では信じられないほど素晴らしいシステムには、本当に欠けている部分です。

こんにちは@cooperfellows 、

最新のWebブラウザーとJAWSおよびNVDAスクリーンリーダーを使用して、すばらしい作業をテストしました。 ありがとう ！

キーボードを使用してオプションを矢印表示するとうまく機能します。音声と点字のフィードバックは完璧です。つまり、すべてのARIA属性が明確に定義されています。 ただし、Enterキーを押してオプションを選択しても、何も起こりません。 私は、問題がChosenに起因するのか、それを使用するアプリケーションに存在するのかを判断するのに十分なJavaScriptの経験がありません。

再現するには、キーボードのみを使用して、選択したコンボボックスのオプションを選択してみてください。Tabキーでコンボボックスにフォーカスし、矢印キーでリストを参照し、Enterキーで選択します。

改めて、ありがとうございました。

その情報をありがとう@ obert01。 私は見て、私が見つけることができるものを見ていきます。

@ obert01このJSフィドルを使用して、機能している/機能していないことを確認できますか？ このフィドルは、コンパイルされたjQueryバージョンの最新のコミットをロードしています。

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

キーボード（Chrome最新）を使用してそのドロップダウンをナビゲートできますが、スクリーンリーダーを実行していません。

どう考えているか教えてください。

こんにちは@cooperfellows 、

JSフィドルに問題はありません。 したがって、問題はMISP（https://www.misp-project.org/）でのChosenの使用方法にあると思います。

これはMISPプロジェクトチームに確認します。

ありがとう

@ obert01に感謝します。 あなたが見つけたものを私に知らせてください。 選ばれた特定の設定との非互換性を示している可能性があるので、MISPがそれをどのように利用しているかを確認する方法があれば、それらの実装を見てみることができます。

選ばれたのはどこかで公に使われていますか？

@cooperfellowsは、ビルド方法がわからない最新の変更を加えた新しいビルドを教えてください。

@ obert01 @cooperfellows NVDAでFiddleを試しましたが、キーボードナビゲーションは完全に機能しているようです（Enterキーでの選択を含む）。 ただし、上下の矢印キーを使用してナビゲートすると、スクリーンリーダーに「________未選択」、つまり「バミューダが選択されていません」と表示されます。 これは予想される動作ですか？

@woenleeと同じ問題があります。 それほど有害ではありません。 ただし、選択したアイテムに「選択した」属性が設定されている方法を確認する必要があるかもしれません。

リストアイテムを「入力」および「終了」したときに予想される動作は何ですか？ いつ
新しく選択したアイテムを読み取る必要がある場合は、新しいアイテムに移動します
アイテム？ また、選択されなくなったものを発表しますか？ @ obert01 @woenlee

12:18オリヴィエBERTの日、2019年8月25日には[email protected]
書きました：

@woenleehttps ： //github.com/woenleeと同じ問題がます。 そうではない
とても有害です。 しかし、おそらく、「選択された」属性が
選択した項目を確認する必要があります。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
。

-
〜クーパー

@cooperfellowsいくつかのaxアクセシビリティテストを実行した後、私はあなたのPRにバグを見つけたようです。それは、それがそれを行っていた理由を説明しています。 Abstract-chosen.coffeeの342行目で、入力には「combobox」と「listbox」の2つの役割が割り当てられています。

<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
私はこのJSFiddleをJAWS2019でテストしていましたが、上下の矢印キーを使用してオプションをナビゲートすると、少し異なることが発生しました。
Google Chrome 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番目のオプションに到達するまで、押し下げたときに強調表示されたオプションを読み取りません。アンティグアバーブーダ 。 ボックスは少し自動スクロールしてアンティグアバーブーダを強調表示し、オプションを読みます。

IE 11.0.9600.19463の場合：矢印キーを使用してナビゲートすると、現在強調表示されているオプションが正しく上下に移動しているように見えます。 なんらかのレンダリングは必要ありません。

他の誰かがこれを経験したかどうか知りたいです。 @ obert01 @woenlee

こんにちは、あなたの仕事に感謝します。

残念ながら、これは正しく機能しません。 使用するブラウザやスクリーンリーダーの機能によって動作が変化するため、説明するのは非常に困難です。

一部のariaプロパティが存在しないか、更新されていないと思います。 ここで私が遭遇する一般的な問題：

• スクロールの問題：下向き矢印を押して表示されているアイテムのリストの最後に到達したら、下向き矢印を2回押して、次のアイテムにフォーカスを合わせる必要があります。
• ENTERを押して項目を選択しても、フォーカスが解除されません。 予想される動作は、スクリーンリーダーがクイックナビゲーションモードに戻り、Webページの残りの部分を読み上げられるようにすることです。 代わりに、矢印キーがリスト内の私の選択を制御しています。
• 現在のスクリプトでは、プロポーザルが表示されているかどうか、およびその数を知ることはできません。 私が知っている最もアクセスしやすい選択プラグインでは、JAWS / NVDAは、テキスト入力に入力された文字列に一致する結果の数をアナウンスします。
• 最後に、リストがコラボされているのか拡張されているのかをJAWSが理解していないという印象があります。 場合によっては、Enterキーを押して選択し、ページの残りの部分を読み込もうとした後でも、JAWSは表示されている最新のプロポーザルを読み取ります。

良い点：

• オートコンプリート部分はうまく機能します。 「fra」と入力すると、JAWSは「France」と発音し、Enterキーを押して選択できます。
• リストの矢印を見ると、項目が正しく読み取られます。

残念ながら、ARIA、JavaScript、Web全般に関しては多くのことを知りません。 ARIAプロパティの最大数が適切に設定および更新されていることを確認することをお勧めします。

スクリーンリーダーと完全に相互作用するJQueryプラグインのデモとコードを以下に示します。
https://a11y.nicolas-hoffmann.net/autocomplete-list/

これ以上お役に立てず申し訳ございません。

あなたの作品の新しいデモを投稿することを躊躇しないでください。 私はあなたのためにテストしてうれしいです。