2016-05-24 3 views
1

を提供するための可能性私は著者はCKEditorバージョンの画像プラグインのダイアログで長い説明、その後、ARIA-describedbyの属性を経由して、スクリーンリーダーが利用できる説明を入力できるようにしたいです。使用例では、著者はWYSIWYGモードで動作します。彼らは生のHTMLを編集することが期待していないので、我々はそれはCKEditorバージョンのイメージを高めるために、些細な問題だなど、CKEditorバージョンイメージプラグイン:ARIA-describedbyのコンテンツ

を、画像ダイアログでIDを入力してもらう他のいくつかの要素に対応するIDを追加することはできません。プラグインのダイアログには、著者が短い説明文に付随する長い説明を入力できるフィールドがあります。結果は<img data-long-description="this is a long description" alt="short description" />のようなものになります。しかし、私たちがが必要longDescriptionIDは(晴眼のユーザーやないから隠さ)ページ上のいくつかの要素のIDで<img aria-describedby="longDescriptionID" alt="short description" />、です....

は、私は心の中で可能性のカップルを持っています。 (1)画像プラグインの動作を維持する:最初の例のように<img />タグを出力し、次にエンドユーザーに直面するビューの他のコードは、データの長い説明を見つけて置き換える責任を負うaria-describedby属性にID(ランダムに生成された、例えば)を付け、ビューのどこかに視覚的なユーザーから隠された対応するコンテンツを挿入することで、スクリーン・リーダーがそれを拾うようにします。

可能性(2)画像プラグインが<span class="accessibleImage"><img aria-describedby="randomID1" alt="short description" /><span id="randomID1" class="accessibleLongDescription">This is nice, long description of the image blah blah blah</span></span>のように出力される可能性があります。この場合、.accessibleLongDescriptionはスクリーンリーダー以外は表示されません。

+1

CKeditorを当日に実装し、長い説明を扱う人として、これは素晴らしいアイデアだと思います。私はあなたの質問が何であるかは分かりません。共有することの1つ - スクリーンリーダーのユーザーに提供するだけではありません。すべてのユーザーが利益を得ることができるため(インフォグラフィックスを考える)、開示ウィジェットを検討してください。そのために、私はオプション#1が好きです。 – aardrian

+0

@aardrian私の質問は、ハウツーの質問ではありませんでした。私は両方のオプションを行う方法を知っています。それはもっと良い練習であった。私もオプション#1を好んでおり、それは私たちのために開発しているベンダーと話し合った後に、私は一緒に行くことに決めました。オプション#2もちゃんとしています。ハックは正確ではありませんが、私たちが後で気に入らないようなデータやコンテンツに何かを持っていることに夢中になっています。そして、たくさんのコンテンツを生成します。オプション#1は、コンテンツとプレゼンテーションとの間に何らかの分離をもたらす。 –

+0

キーン。あなたはこれに対する「回答」としてフィードバックを望みますか(それで、受け入れられたとマークしたり、詳細を集めることができます)? – aardrian

答えて

2

あなたがこれを検討していることは良いことです。イメージの詳細な説明はしばしば役に立ちます。思考のカップル...それは長い説明が役立つスクリーンリーダーを使用するだけの人ではありません

。認知障害のある人は、しばしば複雑な画像のより詳細な説明の恩恵を受けるでしょう。必要に応じて説明を誰にでも利用できるようにすることができれば、より多くの人々に役立つでしょう。説明は、それが直ちにそれがに関する画像の後にする必要があるDOMに挿入さ

。スクリーンリーダーはアクセシビリティツリーと呼ばれるDOMの翻訳を使用してコンテンツにアクセスするため、DOMの順序が重要です。

だから、一つの可能​​性は、あなたの方法を組み合わせることである - あなたが最初の方法で提案するように、検索/データ属性を交換し、あなたの第二の方法では、パターンに基づく記述を挿入します。

公開ウィジェットパターンを代わりに使用する可能性があります。開示のためのトリガーコントロールとして画像を表現し、ウィジェットが展開されたときに詳細な説明を利用可能にする。

合理disclosure widget patternはこちらです。

関連する問題