7

私たちの Web アプリケーションの 1 つが 508 コンプライアンス テストを通過しました。コンテンツ開発には TinyMCE バージョン 3 を使用していますが、一般的にアクセシビリティが高いことは理解しています。ただし、ページの 1 つに 3 つ以上の TinyMCE インスタンスが含まれており、それぞれの前にlabelTinyMCE インスタンスの目的を示すものがありますが、これらは「明示的」ラベル (つまりfor属性付き) である必要があるのに「暗黙的」ラベルであると言われています。問題は、TinyMCE インスタンスが、カスタム html「コントロール」の複雑な品揃えを備えた単なる iframe であるのに対し、私が知る限り、label/for テクニックは従来のフォーム要素でのみ機能することです。TinyMCE インスタンスの「明示的な」ラベルを達成するための最良の戦略は何ですか?

ありがとう!

編集

label+を使用して調査した解決策はfor機能しません:label最初のtextareaを指し、label生成された をiframe指す

私が検討している解決策の 1 つは、各 TinyMCE インスタンスをledgend+で囲むことですが、これを JAWS 9.0 でテストしたところ、フォーム要素 ( 、 など) が含まれていて JAWS がフォーム モードでfieldsetない限り、違いはないようです。fieldsetinputtype=text

4

3 に答える 3

5

ARIA (Accessible Rich Internet Applications) という、まさにこの種の問題に対する新たな標準があります。これはまだ作業中のドラフトですが、最近のブラウザー (IE 9、Firefox 3.6 (部分的) および 4.0、Chrome) で使用すると、最近のスクリーン リーダー (JAWS 9、NVDA の最近のバージョン) でサポートが表示され始めています。

この特定のケースでは、aria-labelaria-labelledbyを見てください。これらは、TinyMCE のウィジェットの BODY 要素、または IFRAME のいずれかに追加される属性であり、ユーザーがデータを入力するときに実際にフォーカスされる方です。したがって:

<body aria-label="Edit document">

aria-label 属性は、ラベルとして機能する文字列を指定するだけです。aria-labelledby (英国の綴りによると、2 つの L に注意してください) は、従来の LABEL 要素の逆のように機能します。つまり、ID をフィードします。

<body aria-labelledby="edit-label">

そして、これをコードの別の場所に配置します。

<label id="edit-label">Edit document</label>

必ずしも LABEL 要素である必要はありません。SPAN などを使用できますが、意味的には LABEL が適切と思われます。

ARIA 属性は、HTML 4 または XHTML DTD の下では検証されません。ただし、HTML 5 で検証します (それ自体はまだ開発中です)。古い DTD で検証が重要な場合は、ページの読み込み時に JavaScript を使用してプログラムで属性を追加できます。

理想的には、ウィジェットのラベルがすでに表示されている場合は、冗長性を防ぐために aria-labelledby を使用する必要があります。ただし、ドキュメントの境界を越えて機能するかどうかはわかりません。つまり、BODY が IFRAME にあり、可視ラベルが IFRAME の親ドキュメントで定義されている場合、それが機能するかどうかはわかりません。ブラウザー/スクリーン リーダーは、この 2 つを互いに対話しない別個のドキュメントとして扱う場合があります。調べるには、実験する必要があります。しかし、それらが機能しないことが判明した場合は、試してくださいhttp://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden。したがって、親ドキュメントでは次のようになります。

<label aria-hidden="true">Edit document</label>

また、TinyMCE ドキュメントでは次のように記述されています。

<body aria-label="Edit document">

aria-hidden 属性は、親ドキュメントのラベルが読み取られるのを防ぎ、子ドキュメント (表示されない) の aria-label 属性がその代わりになります。ほら、視覚的にも聴覚的にもラベル付けされたウィジェットで、冗長な読み取りはありません。

このように aria-hidden を使用する場合は、非表示にしているビット (または同等のもの) が常に他の場所で読み取れるようになるように十分に注意してください。

このソリューションは、ARIA をサポートする Web ブラウザーとスクリーン リーダーを使用しているユーザーに対してのみ機能します。古いスクリーン リーダーやブラウザを使用している人は運が悪いでしょう。これについては、A List Apart に関する最近の記事、The Accessibility of WAI ARIAで詳細に説明されています。著者は、可能な限り従来のセマンティック HTML ソリューションを好むことをよく説明しています。しかし、あなたの場合、他に選択肢はないと思います。少なくとも、ARIA 属性を追加することで、適切な注意を払い、できるだけアクセスしやすくするために誠意を持って努力したことを合理的に主張できます。

幸運を!

将来の読者への注意: ここに示す ARIA 仕様へのリンクは、2010 年 9 月のワーキング ドラフトを参照しています。それから数か月以上経過している場合は、最新の仕様を確認してください。

于 2010-12-12T20:31:27.977 に答える
0

仕様を正しく読めば、既に述べたように、forプロパティは実際に同じページの別のコントロールを指している必要があります。

したがって、唯一の有効なオプションは、TinyMCE が置き換える要素にfor属性をポイントすることだと思います。<textarea>編集が終了したときにその要素がサーバーに送信されることを考えると、これは最も理にかなっています。

于 2010-11-23T17:07:40.693 に答える