HTML5の詳細や要約要素の新しいが、現在、私は私を懸念される一つのことを見つけて、私は問題に自分の考えを聞きたいクローム12HTML5詳細と要約ユーザビリティの懸念
に実装されています。
open
属性が設定されている場合、サマリー要素以外の子ノードであるdetails要素の「content」はドキュメントフローから削除されます。
私は、ユーザーに明確な視覚的な手がかりを与え ことにより、利便性を向上させたいです。
JavaScriptのデフォルトの の動作を防止します。 summary要素は、(クリックまたはキーボード) トグルさ
は、スライドダウン アニメーションは詳細 要素が閉じている場合、起動時またはアップスライド アニメーション開始詳細 要素が開かれています。
要素が開いている場合、アニメーションが終了するとopen属性が削除されます。それ以外の場合は、アニメーションが実行中にコンテンツがすぐに表示されなくなります。
これはすべて問題ありませんが、アクセシビリティについてはどうですか?支援技術を使用する人々。 detailsエレメントが閉じられていることを確認する前に、スライドアップアニメーションの再生時間を待たなければなりません(なぜなら、open属性が削除されるからです)。
これは、aria-expandedとopenが同じ状態を示しているので、さらに複雑になります。詳細エレメントは、divをaria-expanded属性で置き換えることを意味するのではなく、セマンティックな意味を持たないのでしょうか? – DADU
@DADの違いは、 'open'がdetails要素の出現に作用するので、アニメーションの後でそれを削除しなければならないということです。しかし、アニメーションの前に、「aria-hidden」と「aria-expanded」の値(trueまたはfalse)を切り替えることができます。 – Knu
それでは、私は、aria-expanded属性とCSSの可視性と組み合わせていくつかのプレーンdiv要素を使用してはいけませんか? details要素の使い方は非常に限られているようです。たとえば、閉じた詳細要素のスライドダウン効果を達成するには、閉じた詳細要素の内容が完全に削除されたため、JavaScriptで開いて高さをグラブしてから元の状態に戻す必要があります隠された – DADU