閉じるボタンのアクセシビリティ対策

スクリーンリーダー用のクラスを使う以外の方法では下記のようにaria-describedby属性を使用する方法がある。

// https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
<button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">このウィンドウを閉じると、入力された情報は破棄され、
メインページに戻ります</div>

説明ではなくラベルとして利用するテキスト説明にとどまる場合は、aria-labeledby属性を使用する。