HTML

この記事では、ボタンやリンクがどのコンテンツを操作するかを支援技術へ伝えるaria-controls属性と、対象要素のidとの関係を初心者向けに説明します。

この記事でわかること

This attribute tells assistive technologies which content a button or link controls.

aria-controls 属性は、ある要素が「どの部分のコンテンツを操作するか」を示すために使います。

例えば、ボタンに aria-controls="menu1" と書くと、そのボタンが「idがmenu1の要素（例：メニュー）」を開いたり閉じたりする役割を持つことを支援技術に伝えられます。

これにより、スクリーンリーダー利用者などは「このボタンを押すと、どの部分に影響があるのか」を理解できるようになります。

見た目には変化はありませんが、アクセシビリティを高めるために重要な属性です。