HTML

この記事では、メニューやアコーディオンなどの開閉状態を、スクリーンリーダーへtrue・falseで伝えるaria-expanded属性を初心者向けに説明します。

この記事でわかること

trueとfalseで開閉状態を伝える方法
属性の値を実際の表示状態と同期させる理由
aria-controlsと組み合わせて操作対象を示す方法

aria-expanded is an accessibility attribute that tells screen readers whether a collapsible element—such as a dropdown menu—is “open” (true) or “closed” (false).

aria-expanded 属性

折りたたみメニューやアコーディオンなど、「開く／閉じる」動きをする要素に付けて、「いま開いているのか（true）」「閉じているのか（false）」をスクリーンリーダーに伝えるためのマークです。視覚的な開閉状態を、目の見えないユーザーにも伝えられるので、アクセシビリティが向上します。