チャンク (情報の塊) が視覚的な手掛かりだけで表現される場合のラベル付け
ウェブページの画面デザインにおいて、チャンク (情報の塊) が視覚的な手掛かりだけで表現されることは多いと思います。レイアウトを見渡すと、暗黙的に、コンテンツのブロックとその意味を感じ取ることができるようなケースです。たとえば、商品を紹介するページにおいて、カラーバリエーションがあることをサムネイルの並びだけで表現するような例が挙げられるでしょう。
このような場合、マークアップが適切でも (上記の例で言うと、個々のサムネイルに代替テキストが書かれていても)、リニアライズ (線形化) された形で情報を取得するスクリーンリーダー利用者 (視覚障害者) にとっては、チャンク (上記の例では、サムネイル群) の意味を瞬時に把握できない可能性があります。もちろん、ひととおり音声読み上げを聞いたうえで文脈から類推することはできるかもしれませんが、もっと「伝わる」実装にできないでしょうか (上記の例だと、カラーバリエーションがあることはその商品の「売り」であって、積極的にアピールしたい情報であるはずです)。
画面デザインの都合上、チャンクを視覚的にしか表現できないとしても、そのチャンクに対しては自然言語によるラベルを (視覚的には非表示であってもスクリーンリーダーでは読み上げられる形で) 付けたいものです。チャンクを括るブロック (<div> 要素) に aria-label 属性を記述する、という手もありますが、情報構造的にそのラベルを見出しと捉えるのが適切であれば、やはり見出し要素 (<h2>、<h3> など) でマークアップして、CSS のオフレフトで画面表示領域の外に追いやるのがよいと思います。スクリーンリーダーユーザーは、まず見出しだけを拾い読みしてページの概要をつかもうとすることが多く、見出し要素でマークアップしておけば、拾い読みの段階でチャンクの存在 (上記の例の場合、当該商品にはカラーバリエーションがあること) をスムーズに知ることができるからです。